feat: global css structure

ref acronis#150

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.css';
 
 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-theme-dark-acronis');
+      global.document.documentElement.classList.remove('acv-theme-light-acronis');
     }
     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-theme-dark-acronis');
+      global.document.documentElement.classList.add('acv-theme-light-acronis');
     }
   }, [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/package.json

@@ -119,6 +119,7 @@
     "prompts": "2.4.2",
     "rollup-plugin-node-externals": "7.0.1",
     "rollup-plugin-visualizer": "5.12.0",
+    "sanitize.css": "13.0.0",
     "sass": "1.77.4",
     "storybook": "8.2.9",
     "storybook-vue3-router": "5.0.0",

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/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";

packages/ui/src/styles/reset.css

@@ -0,0 +1,9 @@
+/*
+    - acv-reset - reset default browser styling for HTML elements (lowest priority)
+    - acv-theme - css for specific theme
+ */
+@layer acv-reset, acv-theme;
+
+@import "./reset/variables.css";
+@import 'sanitize.css' layer(acv-reset);
+@import "./reset/normalize.css";

packages/ui/src/styles/reset/normalize.css

@@ -0,0 +1,42 @@
+@layer acv-reset {
+  :where(:root) {
+    block-size: 100%;
+    color-scheme: var(--acv-color-scheme);
+  }
+
+  :where(body) {
+    background-color: var(--acv-color-surface-primary);
+    min-block-size: 100%;
+    color: var(--acv-color-text-primary);
+    font-family: var(--acv-font-family-default);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+  }
+
+  :where(h1),
+  :where(h2),
+  :where(h3),
+  :where(h4) {
+    margin: 0;
+  }
+
+  :where(button) {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+  }
+
+  :where(a) {
+    color: currentcolor;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  :where(:focus-visible) {
+    outline: var(--acv-outline-width) solid var(--acv-color-outline);
+  }
+}

packages/ui/src/styles/reset/variables.css

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

packages/ui/src/styles/themes/acronis/acronis-dark.css

@@ -0,0 +1,121 @@
+@layer acv-theme {
+  .acv-theme-dark-acronis {
+    --acv-color-brand-primary: hsl(215deg 68% 46%);
+    --acv-color-brand-secondary: hsl(218deg 57% 97%);
+    --acv-color-brand-tertiary: hsl(218deg 57% 97%);
+    --acv-color-button-active-danger: hsl(0deg 81% 45%);
+    --acv-color-button-active-inversed: hsla(0deg 0% 100% / 0.05);
+    --acv-color-button-active-primary: hsl(215deg 68% 38%);
+    --acv-color-button-active-secondary: hsl(215deg 56% 89%);
+    --acv-color-button-danger: hsl(0deg 81% 57%);
+    --acv-color-button-disabled: hsla(215deg 68% 46% / 0.3);
+    --acv-color-button-disabled-danger: hsla(0deg 4% 35% / 0.3);
+    --acv-color-button-disabled-inversed: hsla(0deg 0% 100% / 0.1);
+    --acv-color-button-focus: hsl(214deg 81% 84%);
+    --acv-color-button-hover-danger: hsl(0deg 65% 51%);
+    --acv-color-button-hover-inversed: hsla(0deg 0% 100% / 0.1);
+    --acv-color-button-hover-primary: hsl(215deg 68% 38%);
+    --acv-color-button-hover-secondary: hsl(214deg 57% 95%);
+    --acv-color-button-inversed: hsla(0deg 0% 100% / 0.2);
+    --acv-color-button-label-disabled: hsla(215deg 68% 46% / 0.3);
+    --acv-color-button-label-disabled-inversed: hsla(0deg 0% 100% / 0.7);
+    --acv-color-button-label-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-button-label-inversed-secondary: hsl(0deg 0% 100%);
+    --acv-color-button-label-primary: hsl(215deg 68% 46%);
+    --acv-color-button-label-secondary: hsl(0deg 0% 100%);
+    --acv-color-button-primary: hsl(215deg 68% 46%);
+    --acv-color-button-secondary: hsl(215deg 68% 46%);
+    --acv-color-divider-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-divider-inversed-secondary: hsl(0deg 0% 100%);
+    --acv-color-divider-primary: hsl(215deg 60% 92%);
+    --acv-color-divider-secondary: hsl(215deg 60% 92%);
+    --acv-color-effect-shadow-primary: hsla(215deg 30% 20% / 0.2);
+    --acv-color-form-active: hsl(215deg 68% 46%);
+    --acv-color-form-disabled-primary: hsla(215deg 68% 46% / 0.1);
+    --acv-color-form-disabled-secondary: hsla(215deg 68% 46% / 0.1);
+    --acv-color-form-disabled-success: hsl(75deg 57% 95%);
+    --acv-color-form-disabled-tertiary: hsl(215deg 59% 84%);
+    --acv-color-form-error: hsl(0deg 81% 57%);
+    --acv-color-form-focus: hsl(214deg 81% 84%);
+    --acv-color-form-hover: hsl(215deg 68% 38%);
+    --acv-color-form-primary: hsl(0deg 0% 100%);
+    --acv-color-form-secondary: hsl(215deg 59% 84%);
+    --acv-color-form-success: hsl(75deg 68% 45%);
+    --acv-color-icon-active: hsl(215deg 30% 20%);
+    --acv-color-icon-active-disabled: hsl(215deg 30% 20%);
+    --acv-color-icon-disabled: hsla(215deg 68% 46% / 0.3);
+    --acv-color-icon-disabled-inversed: hsla(0deg 0% 100% / 0.7);
+    --acv-color-icon-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-icon-inversed-secondary: hsla(0deg 0% 100% / 0.7);
+    --acv-color-icon-primary: hsl(215deg 68% 46%);
+    --acv-color-icon-status-critical: hsl(11deg 73% 41%);
+    --acv-color-icon-status-danger: hsl(0deg 72% 45%);
+    --acv-color-icon-status-info: hsl(215deg 68% 38%);
+    --acv-color-icon-status-neutral: hsl(0deg 0% 4%);
+    --acv-color-icon-status-success: hsl(88deg 85% 24%);
+    --acv-color-icon-status-warning: hsl(30deg 50% 37%);
+    --acv-color-link-active: hsl(215deg 68% 46%);
+    --acv-color-link-disabled: hsla(215deg 68% 46% / 0.3);
+    --acv-color-link-disabled-inversed: hsla(0deg 0% 100% / 0.7);
+    --acv-color-link-hover: hsl(215deg 68% 38%);
+    --acv-color-link-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-link-inversed-secondary: hsl(0deg 0% 100%);
+    --acv-color-link-primary: hsl(215deg 68% 46%);
+    --acv-color-link-secondary: hsl(0deg 0% 100%);
+    --acv-color-nav-active-primary: hsl(213deg 100% 45%);
+    --acv-color-nav-active-secondary: hsl(214deg 57% 95%);
+    --acv-color-nav-focus-primary: hsla(0deg 0% 100% / 0.2);
+    --acv-color-nav-focus-secondary: hsl(215deg 56% 89%);
+    --acv-color-nav-hover-primary: hsla(0deg 0% 100% / 0.2);
+    --acv-color-nav-hover-secondary: hsl(214deg 57% 95%);
+    --acv-color-nav-label-primary: hsl(0deg 0% 100%);
+    --acv-color-nav-label-secondary: hsla(0deg 0% 100% / 0.7);
+    --acv-color-nav-primary: hsl(215deg 100% 15%);
+    --acv-color-nav-secondary: hsl(0deg 0% 100%);
+    --acv-color-scroll-thumb: hsla(215deg 30% 20% / 0.4);
+    --acv-color-scroll-thumb-inversed: hsla(0deg 0% 100% / 0.4);
+    --acv-color-status-active: hsla(215deg 30% 20% / 0.1);
+    --acv-color-status-critical-primary: hsl(32deg 95% 92%);
+    --acv-color-status-critical-secondary: hsl(29deg 100% 53%);
+    --acv-color-status-critical-tertiary: hsl(21deg 100% 83%);
+    --acv-color-status-danger-primary: hsl(0deg 100% 96%);
+    --acv-color-status-danger-secondary: hsl(0deg 81% 57%);
+    --acv-color-status-danger-tertiary: hsl(0deg 100% 89%);
+    --acv-color-status-focus: hsl(214deg 81% 84%);
+    --acv-color-status-hover: hsla(215deg 30% 20% / 0.05);
+    --acv-color-status-info-primary: hsl(215deg 81% 96%);
+    --acv-color-status-info-secondary: hsl(214deg 80% 58%);
+    --acv-color-status-info-tertiary: hsl(214deg 80% 88%);
+    --acv-color-status-neutral-primary: hsl(220deg 7% 92%);
+    --acv-color-status-neutral-secondary: hsl(216deg 8% 61%);
+    --acv-color-status-neutral-tertiary: hsl(216deg 8% 88%);
+    --acv-color-status-success-primary: hsl(75deg 57% 95%);
+    --acv-color-status-success-secondary: hsl(75deg 68% 45%);
+    --acv-color-status-success-tertiary: hsl(75deg 57% 80%);
+    --acv-color-status-warning-primary: hsl(46deg 100% 95%);
+    --acv-color-status-warning-secondary: hsl(45deg 100% 51%);
+    --acv-color-status-warning-tertiary: hsl(45deg 100% 82%);
+    --acv-color-surface-fixed-primary: hsla(215deg 30% 20% / 0.9);
+    --acv-color-surface-fixed-secondary: hsl(0deg 0% 100%);
+    --acv-color-surface-inversed-dark-primary: hsl(215deg 30% 20%);
+    --acv-color-surface-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-surface-inversed-secondary: hsla(0deg 0% 100% / 0.95);
+    --acv-color-surface-primary: hsl(218deg 57% 97%);
+    --acv-color-surface-secondary: hsl(214deg 57% 95%);
+    --acv-color-text-disabled: hsla(215deg 30% 20% / 0.4);
+    --acv-color-text-error: hsl(0deg 81% 57%);
+    --acv-color-text-highlight-result: hsl(52deg 100% 50%);
+    --acv-color-text-inversed-primary: hsl(0deg 0% 100%);
+    --acv-color-text-inversed-secondary: hsla(0deg 0% 100% / 0.7);
+    --acv-color-text-primary: hsl(215deg 30% 20%);
+    --acv-color-text-secondary: hsla(215deg 30% 20% / 0.7);
+    --acv-color-text-status-critical: hsl(11deg 73% 41%);
+    --acv-color-text-status-danger: hsl(0deg 72% 45%);
+    --acv-color-text-status-info: hsl(215deg 68% 38%);
+    --acv-color-text-status-neutral: hsl(215deg 30% 20%);
+    --acv-color-text-status-success: hsl(88deg 85% 24%);
+    --acv-color-text-status-warning: hsl(30deg 50% 37%);
+    --acv-font-family-default: var(--acv-base-font-family-inter, Inter sans-serif);
+    color-scheme: dark;
+  }
+}