feat: theme css

#ref acronis#150
edikdeisling · Nov 6, 2024 · 0e69e31 · 0e69e31
1 parent 06f1d19
commit 0e69e31
Show file tree

Hide file tree

Showing 5 changed files with 271 additions and 269 deletions.
diff --git 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);
+  }
+}
+