feat: theme css

#ref acronis#150

packages/ui/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3';
 import { useEffect, useGlobals } from '@storybook/preview-api';
 import '../src/styles/reset.css';
-import '../src/styles/themes/acronis/acronis.css';
+import '@/styles/themes/acronis/acronis.pcss';
 
 export function withToggleDarkMode(StoryFn) {
   const [globals] = useGlobals();

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

@@ -0,0 +1,119 @@
+@define-mixin acv-theme-acronis-dark {
+  --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;
+}