Merge pull request #4292 from grommet/sandbox-theme

Update sandbox theme
grommet · Oct 28, 2024 · 4dd1300 · 4dd1300
2 parents c096eb6 + 6265eee
commit 4dd1300
Show file tree

Hide file tree

Showing 5 changed files with 463 additions and 658 deletions.
diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json
@@ -3357,7 +3357,7 @@
       "toolbar": {
         "paddingX": {
           "$type": "number",
-          "$value": "{button.medium.default.paddingX}",
+          "$value": "{element.medium.paddingX.default}",
           "$description": "",
           "$extensions": {
             "com.figma": {
@@ -8781,7 +8781,7 @@
       "disabled": {
         "textColor": {
           "$type": "color",
-          "$value": "{color.text.strong}",
+          "$value": "{color.text.disabled}",
           "$description": "",
           "$extensions": {
             "com.figma": {

diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json
@@ -158,6 +158,18 @@
                 "codeSyntax": {}
               }
             }
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{base.color.brand}",
+            "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
+            "$extensions": {
+              "com.figma": {
+                "hiddenFromPublishing": false,
+                "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+                "codeSyntax": {}
+              }
+            }
           }
         },
         "weak": {

diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json
@@ -158,6 +158,18 @@
                 "codeSyntax": {}
               }
             }
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{base.color.brand}",
+            "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
+            "$extensions": {
+              "com.figma": {
+                "hiddenFromPublishing": false,
+                "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+                "codeSyntax": {}
+              }
+            }
           }
         },
         "weak": {

diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
@@ -40,10 +40,11 @@ import {
   ThumbsRating,
   DataTable,
   Meter,
+  ToggleGroup,
 } from 'grommet';
-import { User } from 'grommet-icons';
+import { User, Table, List, MapLocation } from 'grommet-icons';
 import { hpe } from 'grommet-theme-hpe';
-import { refresh as hpeCurrent } from '../../theme';
+import { current as hpeCurrent } from '../../theme';
 
 const textSizes = [
   'xsmall',
@@ -419,7 +420,31 @@ const StickerSheet = () => {
               </Tabs>
             </Compare>
             <Compare>
-              <Tag value="Value" name="Name" />
+              <Box align="start" gap="small">
+                <ToggleGroup
+                  value={2}
+                  options={[
+                    {
+                      value: 1,
+                      icon: <Table />,
+                    },
+                    {
+                      value: 2,
+                      icon: <List />,
+                    },
+                    {
+                      value: 3,
+                      icon: <MapLocation />,
+                    },
+                  ]}
+                />
+              </Box>
+            </Compare>
+            <Compare>
+              <Box align="start" gap="small">
+                <Tag value="Value" name="Name" />
+                <Tag value="Value" name="Name" onRemove={() => {}} />
+              </Box>
             </Compare>
             <Compare>
               <TextArea placeholder="Type something" />