Fix selected background colors

grommet · Aug 26, 2024 · 2859b48 · 2859b48
1 parent 02fdb95
commit 2859b48
Show file tree

Hide file tree

Showing 3 changed files with 260 additions and 261 deletions.
diff --git a/design-tokens/tokens/component.default.json b/design-tokens/tokens/component.default.json
@@ -5809,7 +5809,7 @@
         "hover": {
           "background": {
             "$type": "color",
-            "$value": "{color.background.selected.strong}",
+            "$value": "{color.background.selected.strong.enabled}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -5913,7 +5913,7 @@
         "enabled": {
           "background": {
             "$type": "color",
-            "$value": "{color.background.selected.strong}",
+            "$value": "{color.background.selected.strong.enabled}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -5951,7 +5951,7 @@
         "hover": {
           "background": {
             "$type": "color",
-            "$value": "{color.background.selected.strong}",
+            "$value": "{color.background.selected.strong.enabled}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -6258,7 +6258,7 @@
           "enabled": {
             "background": {
               "$type": "color",
-              "$value": "{color.background.selected.strong}",
+              "$value": "{color.background.selected.strong.enabled}",
               "$description": "",
               "$extensions": {
                 "com.figma": {
@@ -6270,7 +6270,7 @@
             },
             "borderColor": {
               "$type": "color",
-              "$value": "{color.border.default}",
+              "$value": "{color.transparent}",
               "$description": "",
               "$extensions": {
                 "com.figma": {
@@ -6284,7 +6284,7 @@
           "hover": {
             "background": {
               "$type": "color",
-              "$value": "{color.background.selected.strong}",
+              "$value": "{color.background.selected.strong.enabled}",
               "$description": "",
               "$extensions": {
                 "com.figma": {
@@ -6351,7 +6351,7 @@
           },
           "borderColor": {
             "$type": "color",
-            "$value": "{color.border.default}",
+            "$value": "{color.transparent}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -6655,7 +6655,7 @@
           },
           "width": {
             "$type": "number",
-            "$value": "{base.dimension.1200}",
+            "$value": "{base.dimension.900}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -6693,7 +6693,7 @@
         "handle": {
           "height": {
             "$type": "number",
-            "$value": "{component.medium.lineHeight}",
+            "$value": "{base.dimension.400}",
             "$description": "",
             "$extensions": {
               "com.figma": {
@@ -6705,7 +6705,7 @@
           },
           "width": {
             "$type": "number",
-            "$value": "{component.medium.lineHeight}",
+            "$value": "{base.dimension.400}",
             "$description": "",
             "$extensions": {
               "com.figma": {

diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx
@@ -1275,6 +1275,7 @@ const buildTheme = tokens => {
       // Q is toggle and switch the same thing?
       // A: Yes, we can discuss if this name feels right or not.
       toggle: {
+        size: components.hpe.switch.medium.control.track.width, // TO DO should this token be called "size" instead?
         background: components.hpe.switch.control.track.enabled.background,
         color: components.hpe.switch.control.handle.enabled.background,
         knob: {
@@ -1290,17 +1291,32 @@ const buildTheme = tokens => {
             theme.global.colors[
               components.hpe.switch.control.handle.enabled.borderColor
             ][theme.dark ? 'dark' : 'light']
-          }
+          };
+            width: ${components.hpe.switch.medium.control.handle.width};
+            height: ${components.hpe.switch.medium.control.handle.height};
+            margin-block: 2px; // TO DO token?
           `,
         },
-        extend: ({ checked, theme }) => `
+        extend: ({ checked, theme, toggle }) => `
           ${
             checked &&
             `background-color: ${
               theme.global.colors[
                 components.hpe.switch.control.track.selected.enabled.background
-              ][theme.dark ? 'dark' : 'light']
-            };`
+              ]?.[theme.dark ? 'dark' : 'light']
+            };
+            ${
+              toggle
+                ? `
+            border-color: ${
+              theme.global.colors[
+                components.hpe.switch.control.track.selected.enabled.borderColor
+              ]?.[theme.dark ? 'dark' : 'light']
+            };
+            `
+                : ''
+            }
+            `
           }
         `,
       },