From 0e69e315b349cc500470b6ef686ea26f1cf1226d Mon Sep 17 00:00:00 2001
From: Eduard Deisling <edikdeisling@gmail.com>
Date: Wed, 6 Nov 2024 10:30:27 +0200
Subject: [PATCH] feat: theme css

#ref #150
---
 packages/ui/src/styles/reset.css              | 221 +++++++++++++++++-
 packages/ui/src/styles/reset/normalize.css    | 218 -----------------
 packages/ui/src/styles/reset/variables.css    |  49 ----
 .../styles/themes/acronis/acronis-common.pcss |  47 ++++
 .../ui/src/styles/themes/acronis/acronis.pcss |   5 +
 5 files changed, 271 insertions(+), 269 deletions(-)
 delete mode 100644 packages/ui/src/styles/reset/normalize.css
 delete mode 100644 packages/ui/src/styles/reset/variables.css
 create mode 100644 packages/ui/src/styles/themes/acronis/acronis-common.pcss

diff --git a/packages/ui/src/styles/reset.css b/packages/ui/src/styles/reset.css
index 817a36a33..0909a0c9d 100644
--- a/packages/ui/src/styles/reset.css
+++ b/packages/ui/src/styles/reset.css
@@ -4,5 +4,222 @@
  */
 @layer acv-reset, acv-theme;
 
-@import "./reset/variables.css";
-@import "./reset/normalize.css";
+@layer acv-reset {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+
+  ::before,
+  ::after {
+    text-decoration: inherit;
+    vertical-align: inherit;
+  }
+
+  :root {
+    block-size: 100%;
+    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;
+  }
+
+  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);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+  }
+
+  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;
+    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;
+    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;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  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;
+  }
+
+  a {
+    color: currentcolor;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  :focus-visible {
+    outline: var(--acv-outline-width) solid var(--acv-color-outline);
+  }
+}
+
diff --git a/packages/ui/src/styles/reset/normalize.css b/packages/ui/src/styles/reset/normalize.css
deleted file mode 100644
index 3a417a7a2..000000000
--- a/packages/ui/src/styles/reset/normalize.css
+++ /dev/null
@@ -1,218 +0,0 @@
-@layer acv-reset {
-  *,
-  ::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%;
-    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;
-  }
-
-  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);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 400;
-  }
-
-  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;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  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;
-  }
-
-  a {
-    color: currentcolor;
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  :focus-visible {
-    outline: var(--acv-outline-width) solid var(--acv-color-outline);
-  }
-}
diff --git a/packages/ui/src/styles/reset/variables.css b/packages/ui/src/styles/reset/variables.css
deleted file mode 100644
index 3758dff3f..000000000
--- a/packages/ui/src/styles/reset/variables.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@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;
-  }
-}
diff --git a/packages/ui/src/styles/themes/acronis/acronis-common.pcss b/packages/ui/src/styles/themes/acronis/acronis-common.pcss
new file mode 100644
index 000000000..2ca3dcb6b
--- /dev/null
+++ b/packages/ui/src/styles/themes/acronis/acronis-common.pcss
@@ -0,0 +1,47 @@
+@define-mixin acv-theme-acronis-common {
+  --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;
+}
diff --git a/packages/ui/src/styles/themes/acronis/acronis.pcss b/packages/ui/src/styles/themes/acronis/acronis.pcss
index 1d45bfc6c..fd4cc3aef 100644
--- a/packages/ui/src/styles/themes/acronis/acronis.pcss
+++ b/packages/ui/src/styles/themes/acronis/acronis.pcss
@@ -1,7 +1,12 @@
+@import "./acronis-common.pcss";
 @import "./acronis-light.pcss";
 @import "./acronis-dark.pcss";
 
 @layer acv-theme {
+  :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis) {
+    @mixin acv-theme-acronis-common;
+  }
+
   @media (prefers-color-scheme: light) {
     /* light theme without color scheme override */
     :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis):not(.acv-color-scheme-dark) {