From c5b09bbb9e12005e4e351351adcc0ce54b3b06bd Mon Sep 17 00:00:00 2001 From: "moxey.eth" Date: Mon, 30 Oct 2023 12:58:04 +1100 Subject: [PATCH] chore: accent vars --- src/app/components/CodeGroup.css.ts | 2 +- src/app/components/Sidebar.css.ts | 2 +- src/app/styles/reset.css.ts | 2 +- src/app/styles/vars.css.ts | 31 ++++++++++++++++------------- 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/app/components/CodeGroup.css.ts b/src/app/components/CodeGroup.css.ts index b8ce3b45..6dd9788c 100644 --- 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 index 2921acb8..5df8daee 100644 --- 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 index c26b5efa..9a57f97d 100644 --- 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 index 1355b39a..838e91ad 100644 --- 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'],