feat: global css structure (#151)

- refactor global css
- introduce dark theme mode

packages/documentation/.vitepress/theme/style.css

@@ -1,2 +1,3 @@
 @import "./vitepress/index.css";
-@import "@/styles/public/themes.css";
+@import "@/styles/reset.css";
+@import "@/styles/themes/acronis/acronis.pcss";

packages/documentation/theming/css-variables.md

@@ -14,26 +14,20 @@ and other design tokens according used theme.
 [List of CSS variables](#list-of-basic-variables) is available at the bottom of this page.
 :::
 
-## List of UI-syntax 3.0 css variables
+## List of UI-syntax 3.0 global styles
 
 Basic variables are used to define the basic design tokens like colors, typography, spacing, etc.
 
 Theme variables are used to define the theme-specific design tokens like colors, spacing, components, etc.
 
 ::: code-group
-<<< ../../ui/src/styles/tokens/base.css [Base tokens]
-<<< ../../ui/src/styles/tokens/acronis.css [Acronis theme]
-<<< ../../ui/src/styles/tokens/constructor.css [Constructor theme]
-<<< ../../ui/src/styles/tokens/virtuozzo.css [Virtuozzo theme]
-<<< ../../ui/src/styles/tokens/dark.css [Dark theme]
+<<< ../../ui/src/styles/reset.css
 :::
 
-## List of basic tokens
+## List of UI-syntax 3.0 theme styles
 
 ::: code-group
-<<< ../../ui/src/styles/tokens/acv/animation.css [Animation tokens]
-<<< ../../ui/src/styles/tokens/acv/aspects.css [Aspects tokens]
-<<< ../../ui/src/styles/tokens/acv/shadows.css [Shadows tokens]
+<<< ../../ui/src/styles/themes/acronis/acronis.pcss [Acronis theme]
 :::
 
 ## Shadows

packages/ui/.storybook/preview.ts

@@ -1,21 +1,20 @@
 import type { Decorator, Preview } from '@storybook/vue3';
 import { useEffect, useGlobals } from '@storybook/preview-api';
-import '../src/styles/public/themes.css';
+import '../src/styles/reset.css';
+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.dataset.theme = 'dark';
-      global.document.documentElement.classList.add('color-scheme-dark');
-      global.document.documentElement.classList.remove('color-scheme-light');
+      global.document.documentElement.classList.add('acv-color-scheme-dark');
+      global.document.documentElement.classList.remove('acv-color-scheme-light');
     }
     else {
-      global.document.documentElement.dataset.theme = 'light';
-      global.document.documentElement.classList.remove('color-scheme-dark');
-      global.document.documentElement.classList.add('color-scheme-light');
+      global.document.documentElement.classList.remove('acv-color-scheme-dark');
+      global.document.documentElement.classList.add('acv-color-scheme-light');
     }
   }, [darkMode]);
 

packages/ui/cypress/support/component.ts

@@ -17,7 +17,7 @@
 import { mount } from 'cypress/vue';
 
 // Ensure global styles are loaded
-import '../../src/styles/public/acronis.css';
+import '../../src/styles/_deprecated_/public/acronis.css';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';

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/_deprecated_/elements/index.css

@@ -0,0 +1 @@
+@import "scrollbar.css";

packages/ui/src/styles/_deprecated_/index.css

@@ -0,0 +1,7 @@
+@import "layers.css";
+@import "generic/reset.css";
+@import "generic/normalize.css";
+@import "tokens/base.css" layer(theme);
+@import "tokens/acv" layer(tokens);
+@import "elements";
+@import "utilities";

packages/ui/src/styles/_deprecated_/tokens/acv/aliases.css

@@ -0,0 +1,3 @@
+@import "aliases/link.css";
+@import "aliases/surfaces.css";
+@import "aliases/text.css";

packages/ui/src/styles/_deprecated_/tokens/acv/colors.css

@@ -0,0 +1,29 @@
+@import "colors/color.amber.css";
+@import "colors/color.blue.css";
+@import "colors/color.brown.css";
+@import "colors/color.charts.css";
+@import "colors/color.cyan.css";
+@import "colors/color.deep-purple.css";
+@import "colors/color.dodge-blue.css";
+@import "colors/color.gray.css";
+@import "colors/color.green.css";
+@import "colors/color.indigo.css";
+@import "colors/color.light-blue.css";
+@import "colors/color.light-green.css";
+@import "colors/color.named.css";
+@import "colors/color.orange.css";
+@import "colors/color.pink.css";
+@import "colors/color.primary.css";
+@import "colors/color.purple.css";
+@import "colors/color.red.css";
+@import "colors/color.secondary.css";
+@import "colors/color.state.css";
+@import "colors/color.status.css";
+@import "colors/color.teal.css";
+@import "colors/color.tertiary.css";
+@import "colors/color.yellow.css";
+
+:root {
+  --acv-color-text-on-primary: var(--acv-color-white);
+  --acv-color-surface-card: var(--acv-color-white);
+}

packages/ui/src/styles/_deprecated_/utilities/icon.css

@@ -0,0 +1,9 @@
+@layer 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;
+  }
+}

packages/ui/src/styles/_deprecated_/utilities/index.css

@@ -0,0 +1,16 @@
+@import "background-color.css";
+@import "border-color.css";
+@import "display.css";
+@import "flex.css";
+@import "grid.css";
+@import "icon.css";
+@import "layer.css";
+@import "overflow.css";
+@import "position.css";
+@import "size.css";
+@import "spacing.css";
+@import "surfaces.css";
+@import "text-middle-ellipsis.css";
+@import "text.css";
+@import "transitions.css";
+@import "vertical-align.css";