refactor(site): add styleVariants, change createVar to assignVars, ch…

…ange to iife, take unity (#1452) Co-authored-by: Adam Skoufis <[email protected]>
vanilla-extract-css · Aug 18, 2024 · ffbaead · ffbaead
1 parent 06f35aa
commit ffbaead
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 37 deletions.
diff --git a/site/src/Chevron/Chevron.css.ts b/site/src/Chevron/Chevron.css.ts
@@ -1,14 +1,14 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 export const root = style({
   transition: 'transform .15s ease',
   position: 'relative',
   top: '1px',
 });
 
-export const direction = {
-  down: null,
-  up: style({ transform: 'rotate(180deg)' }),
-  left: style({ transform: 'rotate(90deg)' }),
-  right: style({ transform: 'rotate(270deg)' }),
-};
+export const direction = styleVariants({
+  down: {},
+  up: { transform: 'rotate(180deg)' },
+  left: { transform: 'rotate(90deg)' },
+  right: { transform: 'rotate(270deg)' },
+});
diff --git a/site/src/ColorModeToggle/ColorModeToggle.css.ts b/site/src/ColorModeToggle/ColorModeToggle.css.ts
@@ -1,35 +1,41 @@
-import { createVar, style } from '@vanilla-extract/css';
+import { assignVars, createThemeContract, style } from '@vanilla-extract/css';
 import { darkMode } from '../system/styles/sprinkles.css';
 import { vars } from '../themes.css';
 
-const toggleBrightness = createVar();
-const toggleContent = createVar();
-const focusRingColor = createVar();
+const themeVars = createThemeContract({
+  toggleBrightness: null,
+  toggleContent: null,
+  focusRingColor: null,
+});
+
+const lightVars = assignVars(themeVars, {
+  toggleBrightness: '0',
+  toggleContent: '"☀️"',
+  focusRingColor: vars.palette.pink400,
+});
+
+const darkVars = assignVars(themeVars, {
+  toggleBrightness: '10',
+  toggleContent: '"🌙"',
+  focusRingColor: vars.palette.pink500,
+});
 
 export const root = style({
   outline: 'none',
   fontSize: 24,
   height: 42,
   width: 42,
-  vars: {
-    [toggleBrightness]: '0',
-    [toggleContent]: '"☀️"',
-    [focusRingColor]: vars.palette.pink400,
-  },
+  vars: lightVars,
   ':focus-visible': {
-    boxShadow: `0px 0px 0px 3px ${focusRingColor}`,
+    boxShadow: `0px 0px 0px 3px ${themeVars.focusRingColor}`,
   },
   '::before': {
-    content: toggleContent,
-    filter: `contrast(0) brightness(${toggleBrightness})`,
+    content: themeVars.toggleContent,
+    filter: `contrast(0) brightness(${themeVars.toggleBrightness})`,
   },
   selectors: {
     [`.${darkMode} &`]: {
-      vars: {
-        [toggleBrightness]: '10',
-        [toggleContent]: '"🌙"',
-        [focusRingColor]: vars.palette.pink500,
-      },
+      vars: darkVars,
     },
   },
 });
diff --git a/site/src/DocsPage/DocsPage.css.ts b/site/src/DocsPage/DocsPage.css.ts
@@ -22,8 +22,8 @@ export const header = style({
   height: headerHeight,
 });
 
-export const headerBg = style({
-  ...responsiveStyle({
+export const headerBg = style(
+  responsiveStyle({
     mobile: {
       width: '100%',
       clipPath: 'polygon(0 0, 100% 0, 100% 20%, 0 100%)',
@@ -35,7 +35,7 @@ export const headerBg = style({
       backdropFilter: 'blur(4px)',
     },
   }),
-});
+);
 
 export const container = style(
   responsiveStyle({
@@ -45,8 +45,8 @@ export const container = style(
   }),
 );
 
-export const sidebar = style({
-  ...responsiveStyle({
+export const sidebar = style(
+  responsiveStyle({
     mobile: {
       width: `clamp(300px, 40vw, 400px)`,
       transition: 'transform .15s ease, opacity .15s ease',
@@ -59,7 +59,7 @@ export const sidebar = style({
       top: `${calc(headerHeight).add(vars.spacing.large)}`,
     },
   }),
-});
+);
 
 export const showOnWideScreens = style({
   '@media': {

diff --git a/site/src/GitHubStars/GitHubStars.tsx b/site/src/GitHubStars/GitHubStars.tsx
@@ -19,7 +19,7 @@ export const GitHubStars = () => {
   const [stars, setStars] = useState<string | null>(null);
 
   useEffect(() => {
-    const getCount = async () => {
+    (async () => {
       const res = await fetch(
         `https://api.github.com/repos/vanilla-extract-css/vanilla-extract`,
       );
@@ -32,8 +32,7 @@ export const GitHubStars = () => {
             : `${Math.sign(count) * Math.abs(count)}`,
         );
       }
-    };
-    getCount();
+    })();
   }, []);
 
   return (

diff --git a/site/src/HomePage/HomePage.css.ts b/site/src/HomePage/HomePage.css.ts
@@ -7,13 +7,15 @@ export const homePage = style({});
 
 export const shadowColorVar = createVar();
 
-export const featureKeyLine = style({
-  transform: 'skew(15deg)',
-  ...responsiveStyle({
+export const featureKeyLine = style([
+  {
+    transform: 'skew(15deg)',
+  },
+  responsiveStyle({
     mobile: { height: vars.text.standard.mobile.lineHeight },
     desktop: { height: vars.text.standard.desktop.lineHeight },
   }),
-});
+]);
 
 export const skewedContainer = style({
   ':after': {