Merge pull request #282 from department-of-veterans-affairs/179-jessi…

…ca-segmented-control-tokens Add tokens for Segmented Control
department-of-veterans-affairs · Apr 15, 2024 · 5b6e0e7 · 5b6e0e7
2 parents 0b9f486 + 612b558
commit 5b6e0e7
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 42 deletions.
diff --git a/packages/tokens/figma/dark.json b/packages/tokens/figma/dark.json
@@ -1,20 +1,8 @@
 {
-  "button-primary-background-on-dark": {
-    "$value": "{semantic-test-on-dark}",
-    "$type": "color"
-  },
   "color-link-default-hover": {
     "$value": "rgba({uswds-system-color-gray-100}, {color-link-default-hover.alpha})",
     "$type": "color"
   },
-  "semantic-test-2-on-dark": {
-    "$value": "{vads-color-base}",
-    "$type": "color"
-  },
-  "semantic-test-on-dark": {
-    "$value": "{uswds-system-color-blue-vivid-60}",
-    "$type": "color"
-  },
   "uswds-system-color-blue-10": {
     "$value": "#d9e8f6",
     "$type": "color"
@@ -535,6 +523,10 @@
     "$value": "{uswds-system-color-red-warm-10}",
     "$type": "color"
   },
+  "vads-color-fg-default-on-dark": {
+    "$value": "{vads-color-base-lightest}",
+    "$type": "color"
+  },
   "vads-color-gibill-accent": {
     "$value": "{uswds-system-color-gold-vivid-5}",
     "$type": "color"
@@ -739,6 +731,10 @@
     "$value": "{uswds-system-color-green-cool-5}",
     "$type": "color"
   },
+  "vads-color-surface-secondary-on-dark": {
+    "$value": "{vads-color-base-darker}",
+    "$type": "color"
+  },
   "vads-color-va-accent": {
     "$value": "{uswds-system-color-yellow-50}",
     "$type": "color"
@@ -766,5 +762,9 @@
   "vads-color-white": {
     "$value": "#ffffff",
     "$type": "color"
+  },
+  "vads-segmented-control-color-surface-selected-on-dark": {
+    "$value": "{vads-color-base-dark}",
+    "$type": "color"
   }
 }
diff --git a/packages/tokens/figma/light.json b/packages/tokens/figma/light.json
@@ -1,20 +1,8 @@
 {
-  "button-primary-background-on-light": {
-    "$value": "{semantic-test-on-light}",
-    "$type": "color"
-  },
   "color-link-default-hover": {
     "$value": "rgba({uswds-system-color-gray-100}, {color-link-default-hover.alpha})",
     "$type": "color"
   },
-  "semantic-test-2-on-light": {
-    "$value": "{vads-color-base}",
-    "$type": "color"
-  },
-  "semantic-test-on-light": {
-    "$value": "{uswds-system-color-blue-vivid-60}",
-    "$type": "color"
-  },
   "uswds-system-color-blue-10": {
     "$value": "#d9e8f6",
     "$type": "color"
@@ -555,6 +543,10 @@
     "$value": "{uswds-system-color-red-warm-10}",
     "$type": "color"
   },
+  "vads-color-fg-default-on-light": {
+    "$value": "{vads-color-base}",
+    "$type": "color"
+  },
   "vads-color-gibill-accent": {
     "$value": "{uswds-system-color-gold-vivid-5}",
     "$type": "color"
@@ -759,6 +751,10 @@
     "$value": "{uswds-system-color-green-cool-5}",
     "$type": "color"
   },
+  "vads-color-surface-secondary-on-light": {
+    "$value": "{vads-color-base-lighter}",
+    "$type": "color"
+  },
   "vads-color-va-accent": {
     "$value": "{uswds-system-color-yellow-50}",
     "$type": "color"
@@ -798,5 +794,9 @@
   "vads-process-list-color-text-pending-on-light": {
     "$value": "{uswds-system-color-gray-50}",
     "$type": "color"
+  },
+  "vads-segmented-control-color-surface-selected-on-light": {
+    "$value": "{vads-color-white}",
+    "$type": "color"
   }
 }
diff --git a/packages/tokens/src/tokens/color/component-dark.json b/packages/tokens/src/tokens/color/component-dark.json
@@ -1,7 +1,7 @@
 {
-  "button-primary-background-on-dark": {
-    "name": "button-primary-background-on-dark",
-    "value": "{semantic-test-on-dark}",
+  "vads-segmented-control-color-surface-selected-on-dark": {
+    "name": "vads-segmented-control-color-surface-selected-on-dark",
+    "value": "{vads-color-base-dark.*.value}",
     "attributes": {
       "category": "color"
     }

diff --git a/packages/tokens/src/tokens/color/component-light.json b/packages/tokens/src/tokens/color/component-light.json
@@ -1,7 +1,7 @@
 {
-  "button-primary-background-on-light": {
-    "name": "button-primary-background-on-light",
-    "value": "{semantic-test-on-light}",
+  "vads-segmented-control-color-surface-selected-on-light": {
+    "name": "vads-segmented-control-color-surface-selected-on-light",
+    "value": "{vads-color-white.*.value}",
     "attributes": {
       "category": "color"
     }

diff --git a/packages/tokens/src/tokens/color/semantic-dark.json b/packages/tokens/src/tokens/color/semantic-dark.json
@@ -1,14 +1,14 @@
 {
-  "semantic-test-on-dark": {
-    "name": "semantic-test-on-dark",
-    "value": "{uswds-system-color-blue-vivid-60}",
+  "vads-color-fg-default-on-dark": {
+    "name": "vads-color-fg-default-on-dark",
+    "value": "{vads-color-base-lightest.*.value}",
     "attributes": {
       "category": "color"
     }
   },
-  "semantic-test-2-on-dark": {
-    "name": "semantic-test-2-on-dark",
-    "value": "{vads-color-base.*.value}",
+  "vads-color-surface-secondary-on-dark": {
+    "name": "vads-color-surface-secondary-on-dark",
+    "value": "{vads-color-base-darker.*.value}",
     "attributes": {
       "category": "color"
     }

diff --git a/packages/tokens/src/tokens/color/semantic-light.json b/packages/tokens/src/tokens/color/semantic-light.json
@@ -1,14 +1,14 @@
 {
-  "semantic-test-on-light": {
-    "name": "semantic-test-on-light",
-    "value": "{uswds-system-color-blue-vivid-60}",
+  "vads-color-fg-default-on-light": {
+    "name": "vads-color-fg-default-on-light",
+    "value": "{vads-color-base.*.value}",
     "attributes": {
       "category": "color"
     }
   },
-  "semantic-test-2-on-light": {
-    "name": "semantic-test-2-on-light",
-    "value": "{vads-color-base.*.value}",
+  "vads-color-surface-secondary-on-light": {
+    "name": "vads-color-surface-secondary-on-light",
+    "value": "{vads-color-base-lighter.*.value}",
     "attributes": {
       "category": "color"
     }