feat: theme css

#ref acronis#150

Author: edikdeisling

packages/ui/.storybook/preview.ts

@@ -1,20 +1,20 @@
 import type { Decorator, Preview } from '@storybook/vue3';
 import { useEffect, useGlobals } from '@storybook/preview-api';
 import '../src/styles/reset.css';
-import '@/styles/themes/acronis/acronis.pcss';
+import '../src/styles/themes/acronis/acronis.pcss';
 
 export function withToggleDarkMode(StoryFn) {
   const [globals] = useGlobals();
   const darkMode = [true, 'true'].includes(globals.darkMode);
 
   useEffect(() => {
     if (darkMode) {
-      global.document.documentElement.classList.add('acv-theme-dark-acronis');
-      global.document.documentElement.classList.remove('acv-theme-light-acronis');
+      global.document.documentElement.classList.add('acv-color-scheme-dark');
+      global.document.documentElement.classList.remove('acv-color-scheme-light');
     }
     else {
-      global.document.documentElement.classList.remove('acv-theme-dark-acronis');
-      global.document.documentElement.classList.add('acv-theme-light-acronis');
+      global.document.documentElement.classList.remove('acv-color-scheme-dark');
+      global.document.documentElement.classList.add('acv-color-scheme-light');
     }
   }, [darkMode]);
 

packages/ui/scripts/buildCssPlugin.ts

@@ -3,11 +3,14 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 export function buildCssPlugin(): Plugin {
-  const stylesPath = path.join('src', 'styles', 'public');
-  const styles = fs.readdirSync(stylesPath);
-  const entry = Object.fromEntries(styles.map((style) => {
-    return [`styles/${style.replace('.css', '')}`, path.join(stylesPath, style)];
-  }));
+  const stylesPath = path.join('src', 'styles', 'themes');
+  const themes = fs.readdirSync(stylesPath).map((theme) => {
+    return [`styles/themes/${theme}`, path.join(stylesPath, theme, `${theme}.pcss`)];
+  });
+  const entry = {
+    'styles/reset': path.join('src', 'styles', 'reset.css'),
+    ...Object.fromEntries(themes)
+  };
 
   return {
     name: 'build-css-plugin',

packages/ui/src/styles/reset.css

@@ -2,7 +2,10 @@
     - acv-reset - reset default browser styling for HTML elements (lowest priority)
     - acv-theme - css for specific theme
  */
-@layer acv-reset, acv-theme;
+@layer acv-reset, acv-theme, acv-utilities;
+@import "./tokens/sizes.css";
+@import "./tokens/icon.css";
+@import "./utilities/icon.css";
 
 @layer acv-reset {
   *,

packages/ui/src/styles/themes/acronis/acronis-common.pcss

@@ -1,4 +1,3 @@
-@import "./acronis-common.pcss";
 @import "./acronis-light.pcss";
 @import "./acronis-dark.pcss";
 

packages/ui/src/styles/themes/acronis/acronis.pcss

@@ -0,0 +1,18 @@
+@layer acv-reset {
+  :root {
+    --acv-icon-color: currentColor;
+    --acv-icon-size: var(--acv-icon-size-x-small);
+    --acv-icon-size-xxx-small: 8px;
+    --acv-icon-size-xx-small: 12px;
+    --acv-icon-size-x-small: 16px;
+    --acv-icon-size-small: 20px;
+    --acv-icon-size-medium: 24px;
+    --acv-icon-size-large: 32px;
+    --acv-icon-size-x-large: 48px;
+    --acv-icon-size-xx-large: 72px;
+    --acv-icon-size-xxx-large: 96px;
+    --acv-base-icon-size: var(--acv-icon-size-medium);
+    --acv-icon-size-height: var(--acv-icon-size);
+    --acv-icon-size-width: var(--acv-icon-size);
+  }
+}

packages/ui/src/styles/tokens/icon.css

@@ -0,0 +1,49 @@
+@layer acv-reset {
+  :root {
+    --acv-outline-width: 1px;
+    --acv-border-large: 2px;
+    --acv-border-regular: 1px;
+    --acv-border-x-large: 3px;
+    --acv-font-line-height-large: 40px;
+    --acv-font-line-height-medium: 32px;
+    --acv-font-line-height-regular: 24px;
+    --acv-font-line-height-small: 20px;
+    --acv-font-line-height-x-large: 48px;
+    --acv-font-line-height-x-small: 16px;
+    --acv-font-size-accent: 16px;
+    --acv-font-size-body: 14px;
+    --acv-font-size-caption: 12px;
+    --acv-font-size-display: 32px;
+    --acv-font-size-fineprint: 10px;
+    --acv-font-size-lead: 18px;
+    --acv-font-size-note: 11px;
+    --acv-font-size-title: 24px;
+    --acv-font-weight-accent: 500;
+    --acv-font-weight-regular: 400;
+    --acv-font-weight-strong: 600;
+    --acv-font-weight-x-strong: 700;
+    --acv-height-large: 40px;
+    --acv-height-regular: 32px;
+    --acv-height-small: 24px;
+    --acv-height-x-large: 48px;
+    --acv-height-x-small: 16px;
+    --acv-radius-circle: 999px;
+    --acv-radius-large: 8px;
+    --acv-radius-medium: 6px;
+    --acv-radius-regular: 4px;
+    --acv-radius-small: 2px;
+    --acv-radius-zero: 0px;
+    --acv-shadow-blur-regular: 20px;
+    --acv-shadow-blur-small: 4px;
+    --acv-shadow-position-y-regular: 8px;
+    --acv-shadow-position-y-small: 4px;
+    --acv-spacing-large: 24px;
+    --acv-spacing-regular: 16px;
+    --acv-spacing-small: 8px;
+    --acv-spacing-x-large: 32px;
+    --acv-spacing-x-regular: 12px;
+    --acv-spacing-x-small: 4px;
+    --acv-spacing-xx-small: 2px;
+    --acv-spacing-zero: 0px;
+  }
+}

packages/ui/src/styles/tokens/sizes.css

@@ -0,0 +1,9 @@
+@layer acv-utilities {
+  .acv-icon {
+    width: var(--acv-icon-size);
+    height: var(--acv-icon-size);
+    accent-color: var(--acv-icon-color);
+    display: inline-block;
+    vertical-align: middle;
+  }
+}