Small refinements, add primary color

grommet · Mar 6, 2024 · 67222c5 · 67222c5
1 parent cd01a3f
commit 67222c5
Show file tree

Hide file tree

Showing 11 changed files with 548 additions and 320 deletions.
diff --git a/design-tokens/tokens/color.dark.json b/design-tokens/tokens/color.dark.json
diff --git a/design-tokens/tokens/color.light.json b/design-tokens/tokens/color.light.json
diff --git a/design-tokens/tones/color.warm-light.json b/design-tokens/tones/color.warm-light.json
@@ -0,0 +1,348 @@
+{
+  "primary": {
+    "$type": "color",
+    "$value": "{color.purple.20}",
+    "$description": "",
+    "$extensions": {
+      "com.figma": {
+        "hiddenFromPublishing": false,
+        "scopes": ["ALL_SCOPES"],
+        "codeSyntax": {}
+      }
+    }
+  },
+  "background": {
+    "default": {
+      "$type": "color",
+      "$value": "{color.white.100}",
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "front": {
+      "$type": "color",
+      "$value": "{color.white.100}",
+      "$description": "Background color applied on top of background-back.",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "back": {
+      "$type": "color",
+      "$value": "{color.tan.10}",
+      "$description": "Background color applied to the base layer of the application.",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "contrast": {
+      "$type": "color",
+      "$value": "{color.black.4}",
+      "$description": "abc",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "active": {
+      "$type": "color",
+      "$value": "{color.background.contrast}",
+      "$description": "abc",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "selected": {
+      "$type": "color",
+      "$value": "{color.brand}",
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["ALL_SCOPES"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "status": {
+      "critical": {
+        "$type": "color",
+        "$value": "{color.red.20-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "ok": {
+        "$type": "color",
+        "$value": "{color.green.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.yellow.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.blue.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      }
+    },
+    "validation": {
+      "critical": {
+        "$type": "color",
+        "$value": "{color.red.20-24pc}",
+        "$description": "abc",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.yellow.10-24pc}",
+        "$description": "abc",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "ok": {
+        "$type": "color",
+        "$value": "{color.green.10-24pc}",
+        "$description": "abc",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      }
+    }
+  },
+  "chart": {
+    "qualitative": {
+      "10": {
+        "$type": "color",
+        "$value": "{color.blue.20}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "20": {
+        "$type": "color",
+        "$value": "{color.orange.20}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "30": {
+        "$type": "color",
+        "$value": "{color.purple.20}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "40": {
+        "$type": "color",
+        "$value": "{color.teal.10}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "50": {
+        "$type": "color",
+        "$value": "{color.yellow.30}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "60": {
+        "$type": "color",
+        "$value": "{color.purple.10}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "70": {
+        "$type": "color",
+        "$value": "{color.blue.10}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "10-secondary": {
+        "$type": "color",
+        "$value": "{color.blue.20-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "20-secondary": {
+        "$type": "color",
+        "$value": "{color.orange.20-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "30-secondary": {
+        "$type": "color",
+        "$value": "{color.purple.20 -12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "40-secondary": {
+        "$type": "color",
+        "$value": "{color.teal.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "50-secondary": {
+        "$type": "color",
+        "$value": "{color.yellow.30-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "60-secondary": {
+        "$type": "color",
+        "$value": "{color.purple.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "70-secondary": {
+        "$type": "color",
+        "$value": "{color.blue.10-12pc}",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["ALL_SCOPES"],
+            "codeSyntax": {}
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -15,6 +15,7 @@ import { LinkNext, ShareRounded } from 'grommet-icons';
 export const DashboardCard = ({
   icon,
   external,
+  hideCta,
   level,
   title,
   subtitle,
@@ -54,13 +55,15 @@ export const DashboardCard = ({
             <Text size="small">{subtitle}</Text>
           </Box>
         </Box>
-        <Box flex={false}>
-          {external ? (
-            <ShareRounded a11yTitle={`Go to ${title}`} color="brand" />
-          ) : (
-            <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
-          )}
-        </Box>
+        {!hideCta ? (
+          <Box flex={false}>
+            {external ? (
+              <ShareRounded a11yTitle={`Go to ${title}`} color="primary" />
+            ) : (
+              <LinkNext a11yTitle={`Go to ${title}`} color="primary" />
+            )}
+          </Box>
+        ) : undefined}
       </CardHeader>
       {children && (
         <CardBody
@@ -83,6 +86,7 @@ export const DashboardCard = ({
 };
 
 DashboardCard.propTypes = {
+  hideCta: PropTypes.bool,
   icon: PropTypes.element,
   external: PropTypes.bool,
   level: PropTypes.number,

diff --git a/sandbox/grommet-app/src/pages/FeaturedServices.jsx b/sandbox/grommet-app/src/pages/FeaturedServices.jsx
@@ -13,7 +13,7 @@ const TabContent = ({ data, ...rest }) => (
         title={service.name}
         subtitle={service.category}
         description={service.description || 'hi'}
-        actions={<LinkNext color="brand" />}
+        actions={<LinkNext color="primary" />}
         level={3}
       />
     ))}