feat: theme css

#ref acronis#150

packages/ui/package.json

@@ -119,7 +119,6 @@
     "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/reset.css

@@ -5,5 +5,4 @@
 @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

@@ -1,11 +1,31 @@
 @layer acv-reset {
-  :where(:root) {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box; /* 1 */
+    background-repeat: no-repeat; /* 2 */
+  }
+
+  ::before,
+  ::after {
+    text-decoration: inherit; /* 1 */
+    vertical-align: inherit; /* 2 */
+  }
+
+  :root {
     block-size: 100%;
-    color-scheme: var(--acv-color-scheme);
+    cursor: default;
+    line-height: var(--acv-font-line-height-regular);
+    overflow-wrap: break-word;
+    tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-text-size-adjust: 100%;
+    hanging-punctuation: first last;
   }
 
-  :where(body) {
+  body {
     background-color: var(--acv-color-surface-primary);
+    margin: 0;
     min-block-size: 100%;
     color: var(--acv-color-text-primary);
     font-family: var(--acv-font-family-default);
@@ -14,29 +34,185 @@
     font-weight: 400;
   }
 
-  :where(h1),
-  :where(h2),
-  :where(h3),
-  :where(h4) {
+  hr {
+    block-size: 0;
+    color: inherit;
+    border-block-start-width: 1px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  pre,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  b, strong {
+    font-weight: var(--acv-font-weight-strong);
+  }
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em;
+    overflow: auto;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  img,
+  picture {
+    max-width: 100%;
+    display: block;
+  }
+
+  :target {
+    /* Anything that has been anchored to should have extra scroll margin */
+    scroll-margin-block: 5ex;
+  }
+
+  iframe {
+    border-style: none;
+  }
+
+  :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  code, kbd, samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
     margin: 0;
+    padding: 0;
+  }
+
+  abbr[title] {
+    text-decoration: underline;
+    text-decoration: underline dotted;
   }
 
-  :where(button) {
+  fieldset {
+    margin: 0;
     padding: 0;
-    border: 0;
-    background: none;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font: inherit;
+    font-size: var(--acv-font-size-body);
+    line-height: inherit;
     color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    appearance: button;
     font: inherit;
+  }
+
+  ::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.54;
+  }
+
+  [type="search"] {
+    appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  [aria-controls] {
+    cursor: pointer;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  [aria-disabled="true"],
+  [disabled] {
+    cursor: not-allowed;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  button {
+    -webkit-appearance: button;
+    border: 0;
+    background: none;
     text-align: inherit;
   }
 
-  :where(a) {
+  a {
     color: currentcolor;
     cursor: pointer;
     text-decoration: none;
   }
 
-  :where(:focus-visible) {
+  :focus-visible {
     outline: var(--acv-outline-width) solid var(--acv-color-outline);
   }
 }

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

@@ -1,49 +1,49 @@
 @layer acv-reset {
-  :where(:root) {
+  :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);
+    --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/themes/acronis/acronis-dark.pcss

@@ -114,6 +114,6 @@
   --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);
+  --acv-font-family-default: var(--acv-base-font-family-inter) sans-serif;
   color-scheme: dark;
 }

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

@@ -114,6 +114,6 @@
   --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);
+  --acv-font-family-default: var(--acv-base-font-family-inter) sans-serif;
   color-scheme: light;
 }