@tempoxyz/ds 0.3.0 → 0.3.1

package/src/web/vars.ts

@@ -48,11 +48,13 @@ export const variables = Vars.define(
         // doubles both.
         alpha: {
           regular: {
+            blue: { '100': 'rgb(68 113 237 / 0.08)', '200': 'rgb(116 152 251 / 0.16)' },
             green: { '100': 'rgb(19 169 99 / 0.08)', '200': 'rgb(89 229 164 / 0.16)' },
             orange: { '100': 'rgb(224 111 18 / 0.08)', '200': 'rgb(250 142 54 / 0.16)' },
             red: { '100': 'rgb(235 52 23 / 0.08)', '200': 'rgb(245 92 69 / 0.16)' },
           },
           strong: {
+            blue: { '100': 'rgb(68 113 237 / 0.16)', '200': 'rgb(116 152 251 / 0.32)' },
             green: { '100': 'rgb(19 169 99 / 0.16)', '200': 'rgb(89 229 164 / 0.32)' },
             orange: { '100': 'rgb(224 111 18 / 0.16)', '200': 'rgb(250 142 54 / 0.32)' },
             red: { '100': 'rgb(235 52 23 / 0.16)', '200': 'rgb(245 92 69 / 0.32)' },
@@ -333,8 +335,8 @@ export const variables = Vars.define(
       toast: 1000,
     },
   },
-  // TPDS 1.0 Platform `Base`, `Attributes`, and text styles, the `Inverse` colors and the action
-  // colors of `Working / Platform / Semantic` that the Platform Button paints. Base tokens that
+  // TPDS 1.0 Platform `Base`, `Attributes`, and text styles, and the pressed action colors of
+  // `Working / Platform / Semantic` that the Platform Button paints. Base tokens that
   // alias other Base tokens, such as `component.button.secondary.fill`, point at the same
   // primitives instead.
   (vars) => ({
@@ -346,6 +348,13 @@ export const variables = Vars.define(
     },
     color: {
       action: {
+        danger: {
+          fill: {
+            hover: '#eb3417',
+            rest: '#eb3417',
+          },
+          label: { rest: vars.color.neutral['000'] },
+        },
         focusRing: { dark: vars.color.neutral.tint['056'], light: vars.color.neutral.shade['056'] },
         primary: {
           fill: {
@@ -379,9 +388,8 @@ export const variables = Vars.define(
         elevated: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
         primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['004'] },
         secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
-        // The layouts fill the sidebar and the page header a step lighter than the page. Their
-        // color has no dark value, so dark mode keeps the page background.
-        sidebar: { dark: vars.color.neutral['100'], light: '#fafafa' },
+        // The layouts fill the sidebar and the page header a step lighter than the page.
+        sidebar: { dark: vars.color.neutral['096'], light: '#fafafa' },
       },
       border: {
         focus: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
@@ -448,6 +456,7 @@ export const variables = Vars.define(
         pullTab: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['012'] },
       },
       container: {
+        accent: vars.color.accent.alpha.regular.blue['100'],
         negative: {
           dark: vars.color.accent.alpha.regular.red['200'],
           light: vars.color.accent.alpha.regular.red['100'],
@@ -456,7 +465,9 @@ export const variables = Vars.define(
           dark: vars.color.accent.alpha.regular.green['200'],
           light: vars.color.accent.alpha.regular.green['100'],
         },
-        regular: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral.shade['004'] },
+        // Dark mode fills the regular container at 8% white, dimmer than Figma's 12%, so badges and
+        // other soft fills recede on the dark page.
+        regular: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
         strong: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
         subtle: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['003'] },
         warning: {
@@ -465,6 +476,7 @@ export const variables = Vars.define(
         },
       },
       content: {
+        accent: '#4471ed',
         negative: vars.color.accent.red.background,
         positive: vars.color.accent.green.background,
         primary: { dark: vars.color.neutral['000'], light: vars.color.neutral['100'] },
@@ -476,7 +488,7 @@ export const variables = Vars.define(
       inverse: {
         background: {
           primary: { dark: vars.color.neutral['004'], light: vars.color.neutral['100'] },
-          secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['092'] },
+          secondary: { dark: vars.color.neutral['000'], light: vars.color.neutral['092'] },
         },
         container: {
           regular: { dark: vars.color.neutral.shade['004'], light: vars.color.neutral.tint['012'] },
@@ -490,6 +502,7 @@ export const variables = Vars.define(
         // Dark mode draws the secondary line at 8% white, dimmer than Figma's 16%, so the borders
         // and dividers recede on the dark fills.
         secondary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['008'] },
+        tertiary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
       },
       material: {
         regular: { dark: vars.color.neutral.tint['048'], light: vars.color.neutral.shade['040'] },