From 06f1d19f64e24e96b025d47bf6875f3b75d4aab7 Mon Sep 17 00:00:00 2001 From: Eduard Deisling Date: Tue, 5 Nov 2024 13:34:47 +0200 Subject: [PATCH] feat: theme css #ref #150 --- packages/ui/package.json | 1 - packages/ui/src/styles/reset.css | 1 - packages/ui/src/styles/reset/normalize.css | 200 ++++++++++++++++-- packages/ui/src/styles/reset/variables.css | 90 ++++---- .../styles/themes/acronis/acronis-dark.pcss | 2 +- .../styles/themes/acronis/acronis-light.pcss | 2 +- pnpm-lock.yaml | 8 - 7 files changed, 235 insertions(+), 69 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 3c6fd161f..a352621f2 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/styles/reset.css b/packages/ui/src/styles/reset.css index dafd2af72..817a36a33 100644 --- a/packages/ui/src/styles/reset.css +++ b/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"; diff --git a/packages/ui/src/styles/reset/normalize.css b/packages/ui/src/styles/reset/normalize.css index 5a6751de1..3a417a7a2 100644 --- a/packages/ui/src/styles/reset/normalize.css +++ b/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); } } diff --git a/packages/ui/src/styles/reset/variables.css b/packages/ui/src/styles/reset/variables.css index 27f0ae4bd..3758dff3f 100644 --- a/packages/ui/src/styles/reset/variables.css +++ b/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; } } diff --git a/packages/ui/src/styles/themes/acronis/acronis-dark.pcss b/packages/ui/src/styles/themes/acronis/acronis-dark.pcss index 71a9f4c0a..e82aba7e3 100644 --- a/packages/ui/src/styles/themes/acronis/acronis-dark.pcss +++ b/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; } diff --git a/packages/ui/src/styles/themes/acronis/acronis-light.pcss b/packages/ui/src/styles/themes/acronis/acronis-light.pcss index a7ae6eecd..9da7e05d1 100644 --- a/packages/ui/src/styles/themes/acronis/acronis-light.pcss +++ b/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; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1c41f1bab..058e1c8a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -470,9 +470,6 @@ importers: rollup-plugin-visualizer: specifier: 5.12.0 version: 5.12.0(rollup@4.21.2) - sanitize.css: - specifier: 13.0.0 - version: 13.0.0 sass: specifier: 1.77.4 version: 1.77.4 @@ -7192,9 +7189,6 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - sanitize.css@13.0.0: - resolution: {integrity: sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==} - sass@1.77.4: resolution: {integrity: sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==} engines: {node: '>=14.0.0'} @@ -16465,8 +16459,6 @@ snapshots: safer-buffer@2.1.2: {} - sanitize.css@13.0.0: {} - sass@1.77.4: dependencies: chokidar: 3.6.0