@tempoxyz/ds 0.0.5 → 0.0.7

package/src/platform/vars.ts

@@ -16,6 +16,10 @@ export const variables = Vars.define(
         secondary: { light: core.color.neutral['000'], dark: core.color.neutral['092'] },
       },
       border: {
+        accent: {
+          light: core.color.accent.alpha.strong.blue['100'],
+          dark: core.color.accent.alpha.strong.blue['200'],
+        },
         focus: { light: core.color.neutral.shade['040'], dark: core.color.neutral.tint['052'] },
         negative: {
           light: core.color.accent.alpha.strong.red['100'],
@@ -30,6 +34,17 @@ export const variables = Vars.define(
           dark: core.color.accent.alpha.strong.orange['200'],
         },
       },
+      chart: {
+        series: {
+          '1': { light: core.color.accent.blueLight, dark: core.color.accent.blueLight },
+          '2': { light: core.color.accent.magentaLight, dark: core.color.accent.magentaDark },
+          '3': { light: core.color.accent.orangeLight, dark: core.color.accent.orangeLight },
+          '4': { light: core.color.accent.purpleLight, dark: core.color.accent.purpleLight },
+          '5': { light: core.color.accent.greenLight, dark: core.color.accent.greenLight },
+          '6': { light: core.color.accent.violetLight, dark: core.color.accent.violetDark },
+          '7': { light: core.color.accent.redLight, dark: core.color.accent.redLight },
+        },
+      },
       component: {
         button: {
           primary: {
@@ -67,6 +82,10 @@ export const variables = Vars.define(
         pullTab: { light: core.color.neutral.shade['012'], dark: core.color.neutral.tint['024'] },
       },
       container: {
+        accent: {
+          light: core.color.accent.alpha.regular.blue['100'],
+          dark: core.color.accent.alpha.regular.blue['200'],
+        },
         negative: {
           light: core.color.accent.alpha.regular.red['100'],
           dark: core.color.accent.alpha.regular.red['200'],
@@ -84,6 +103,7 @@ export const variables = Vars.define(
         },
       },
       content: {
+        accent: { light: core.color.accent.blueLight, dark: core.color.accent.blueDark },
         negative: { light: core.color.accent.redLight, dark: core.color.accent.redDark },
         positive: { light: core.color.accent.greenLight, dark: core.color.accent.greenDark },
         primary: { light: core.color.neutral['100'], dark: core.color.neutral['000'] },
@@ -305,6 +325,11 @@ export const variables = Vars.define(
   },
   (vars) => ({
     color: {
+      chart: {
+        axis: { light: vars.color.content.secondary, dark: vars.color.content.secondary },
+        grid: { light: vars.color.line.secondary, dark: vars.color.line.secondary },
+        muted: { light: vars.color.content.tertiary, dark: vars.color.content.tertiary },
+      },
       component: {
         button: {
           secondary: {
@@ -434,10 +459,20 @@ export const inverse = Vars.extend(variables, {
       primary: { light: core.color.neutral['100'], dark: core.color.neutral['004'] },
       secondary: { light: core.color.neutral['092'], dark: core.color.neutral['092'] },
     },
+    chart: {
+      series: {
+        '2': { light: core.color.accent.magentaDark, dark: core.color.accent.magentaLight },
+        '6': { light: core.color.accent.violetDark, dark: core.color.accent.violetLight },
+      },
+    },
     component: {
       pullTab: { light: core.color.neutral.tint['024'], dark: core.color.neutral.shade['012'] },
     },
     container: {
+      accent: {
+        light: core.color.accent.alpha.regular.blue['200'],
+        dark: core.color.accent.alpha.regular.blue['100'],
+      },
       negative: {
         light: core.color.accent.alpha.regular.red['200'],
         dark: core.color.accent.alpha.regular.red['100'],
@@ -455,6 +490,7 @@ export const inverse = Vars.extend(variables, {
       },
     },
     content: {
+      accent: { light: core.color.accent.blueDark, dark: core.color.accent.blueLight },
       negative: { light: core.color.accent.redDark, dark: core.color.accent.redLight },
       positive: { light: core.color.accent.greenDark, dark: core.color.accent.greenLight },
       primary: { light: core.color.neutral['000'], dark: core.color.neutral['100'] },