chore: accent vars

wevm · Oct 30, 2023 · c5b09bb · c5b09bb
1 parent e862294
commit c5b09bb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/app/components/CodeGroup.css.ts b/src/app/components/CodeGroup.css.ts
@@ -47,7 +47,7 @@ export const tabsTrigger = style(
     padding: `${spaceVars['8']} ${spaceVars['8']} ${spaceVars['6']} ${spaceVars['8']}`,
     selectors: {
       '&[data-state="active"]': {
-        borderBottom: `2px solid ${primitiveColorVars.accent}`,
+        borderBottom: `2px solid ${primitiveColorVars.border}`,
         color: primitiveColorVars.text,
       },
     },

diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
@@ -31,7 +31,7 @@ export const item = style(
         color: primitiveColorVars.text,
       },
       '&[data-active="true"]': {
-        color: primitiveColorVars.text,
+        color: primitiveColorVars.textAccent,
       },
     },
   },

diff --git a/src/app/styles/reset.css.ts b/src/app/styles/reset.css.ts
@@ -16,7 +16,7 @@ globalStyle(['*', '::before', '::after'].join(','), {
 globalStyle('*:focus-visible', {
   '@layer': {
     [resetLayer]: {
-      outline: `2px solid ${primitiveColorVars.accent}`,
+      outline: `2px solid ${primitiveColorVars.borderAccent}`,
       outlineOffset: '2px',
       outlineStyle: 'dashed',
     },

diff --git a/src/app/styles/vars.css.ts b/src/app/styles/vars.css.ts
@@ -11,13 +11,11 @@ export const primitiveColorVars = createGlobalThemeContract(
   {
     white: 'white',
     black: 'black',
-    accent: 'accent',
-    accentHover: 'accentHover',
-    accentTint: 'accentTint',
     background: 'background',
     background2: 'background2',
     background3: 'background3',
     background4: 'background4',
+    backgroundAccentTint: 'backgroundBlueTint',
     backgroundBlueTint: 'backgroundBlueTint',
     backgroundDark: 'backgroundDark',
     backgroundGreenTint: 'backgroundGreenTint',
@@ -26,6 +24,7 @@ export const primitiveColorVars = createGlobalThemeContract(
     backgroundYellowTint: 'backgroundYellowTint',
     border: 'border',
     border2: 'border2',
+    borderAccent: 'borderAccent',
     borderBlue: 'borderBlue',
     borderGreen: 'borderGreen',
     borderIris: 'borderIris',
@@ -35,6 +34,8 @@ export const primitiveColorVars = createGlobalThemeContract(
     text2: 'text2',
     text3: 'text3',
     text4: 'text4',
+    textAccent: 'textAccent',
+    textAccentHover: 'textAccentHover',
     textBlue: 'textBlue',
     textGreen: 'textGreen',
     textIris: 'textIris',
@@ -46,13 +47,11 @@ export const primitiveColorVars = createGlobalThemeContract(
 createGlobalTheme(':root', primitiveColorVars, {
   white,
   black,
-  accent: globalColors.iris.iris11,
-  accentHover: globalColors.iris.iris12,
-  accentTint: globalColors.iris.iris3,
   background: white,
   background2: globalColors.gray.gray2,
   background3: globalColors.gray.gray3,
   background4: globalColors.gray.gray4,
+  backgroundAccentTint: globalColors.amber.amber3,
   backgroundBlueTint: globalColors.blueA.blueA2,
   backgroundDark: globalColors.gray.gray2,
   backgroundGreenTint: globalColors.greenA.greenA2,
@@ -61,6 +60,7 @@ createGlobalTheme(':root', primitiveColorVars, {
   backgroundYellowTint: globalColors.yellowA.yellowA2,
   border: globalColors.blackA.blackA1,
   border2: globalColors.gray.gray7,
+  borderAccent: globalColors.amber.amber11,
   borderBlue: globalColors.blueA.blueA4,
   borderGreen: globalColors.greenA.greenA5,
   borderIris: globalColors.iris.iris5,
@@ -70,6 +70,8 @@ createGlobalTheme(':root', primitiveColorVars, {
   text2: globalColors.gray.gray11,
   text3: globalColors.gray.gray10,
   text4: globalColors.gray.gray8,
+  textAccent: globalColors.amber.amber11,
+  textAccentHover: globalColors.amber.amber12,
   textBlue: globalColors.blue.blue11,
   textGreen: globalColors.green.green11,
   textIris: globalColors.iris.iris11,
@@ -79,13 +81,11 @@ createGlobalTheme(':root', primitiveColorVars, {
 createGlobalTheme(':root.dark', primitiveColorVars, {
   white,
   black,
-  accent: globalColors.irisDark.iris11,
-  accentHover: globalColors.irisDark.iris10,
-  accentTint: globalColors.irisDark.iris3,
   background: globalColors.mauveDark.mauve3,
   background2: globalColors.mauveDark.mauve4,
   background3: globalColors.mauveDark.mauve5,
   background4: globalColors.mauveDark.mauve6,
+  backgroundAccentTint: globalColors.amberDark.amber5,
   backgroundBlueTint: globalColors.blueA.blueA3,
   backgroundDark: '#1e1d1f',
   backgroundGreenTint: globalColors.greenA.greenA3,
@@ -94,6 +94,7 @@ createGlobalTheme(':root.dark', primitiveColorVars, {
   backgroundYellowTint: globalColors.yellowA.yellowA2,
   border: globalColors.mauveDark.mauve5,
   border2: globalColors.mauveDark.mauve9,
+  borderAccent: globalColors.amberDark.amber11,
   borderBlue: globalColors.blueA.blueA4,
   borderGreen: globalColors.greenA.greenA5,
   borderIris: globalColors.irisDark.iris5,
@@ -103,6 +104,8 @@ createGlobalTheme(':root.dark', primitiveColorVars, {
   text2: '#bdbdbe',
   text3: '#a7a7a8',
   text4: '#656567',
+  textAccent: globalColors.amberDark.amber11,
+  textAccentHover: globalColors.amber.amber8,
   textBlue: globalColors.blueDark.blue11,
   textGreen: globalColors.greenDark.green11,
   textIris: globalColors.irisDark.iris11,
@@ -173,15 +176,15 @@ createGlobalTheme(':root', semanticColorVars, {
   warningBackground: primitiveColorVars.backgroundYellowTint,
   warningBorder: primitiveColorVars.borderYellow,
   warningText: primitiveColorVars.textYellow,
-  inlineCode: primitiveColorVars.accent,
-  inlineCodeBackground: primitiveColorVars.accentTint,
+  inlineCode: primitiveColorVars.textAccent,
+  inlineCodeBackground: primitiveColorVars.backgroundAccentTint,
   codeBlockBackground: primitiveColorVars.background2,
   codeHighlightBackground: primitiveColorVars.background3,
   codeHighlightBorder: primitiveColorVars.border2,
   lineNumber: primitiveColorVars.text4,
   hr: primitiveColorVars.border,
-  link: primitiveColorVars.accent,
-  linkHover: primitiveColorVars.accentHover,
+  link: primitiveColorVars.textAccent,
+  linkHover: primitiveColorVars.textAccentHover,
   tableBorder: primitiveColorVars.border,
   tableHeaderBackground: primitiveColorVars.background2,
   tableHeaderText: primitiveColorVars.text2,
@@ -260,7 +263,7 @@ createGlobalTheme(':root', fontSizeVars, {
   h4: fontSizeVars['18'],
   h5: fontSizeVars['16'],
   h6: fontSizeVars['16'],
-  code: '0.9375em',
+  code: '0.875em',
   codeBlock: fontSizeVars['15'],
   lineNumber: fontSizeVars['15'],
   subtitle: fontSizeVars['20'],