From e7de92d484cd2839e4c2cab70c65f719c61b490a Mon Sep 17 00:00:00 2001 From: Deisling Eduard <41228762+edikdeisling@users.noreply.github.com> Date: Fri, 8 Nov 2024 12:34:13 +0200 Subject: [PATCH] feat: global css structure (#151) - refactor global css - introduce dark theme mode --- .../documentation/.vitepress/theme/style.css | 3 +- .../documentation/theming/css-variables.md | 14 +- packages/ui/.storybook/preview.ts | 13 +- packages/ui/cypress/support/component.ts | 2 +- packages/ui/scripts/buildCssPlugin.ts | 13 +- .../elements/borderless.css | 0 .../styles/_deprecated_/elements/index.css | 1 + .../{ => _deprecated_}/elements/link.css | 0 .../{ => _deprecated_}/elements/scrollbar.css | 0 .../{ => _deprecated_}/elements/table.css | 0 .../{ => _deprecated_}/generic/basic.css | 0 .../{ => _deprecated_}/generic/box-sizing.css | 0 .../{ => _deprecated_}/generic/clearfix.css | 0 .../{ => _deprecated_}/generic/inherit.css | 0 .../{ => _deprecated_}/generic/normalize.css | 0 .../{ => _deprecated_}/generic/reset.css | 0 packages/ui/src/styles/_deprecated_/index.css | 7 + .../src/styles/{ => _deprecated_}/layers.css | 0 .../styles/{ => _deprecated_}/layout/grid.css | 0 .../{ => _deprecated_}/layout/inline.css | 0 .../{ => _deprecated_}/layout/stack.css | 0 .../{ => _deprecated_}/public/acronis.css | 0 .../{ => _deprecated_}/public/constructor.css | 0 .../{ => _deprecated_}/public/themes.css | 0 .../{ => _deprecated_}/public/virtuozzo.css | 0 .../{ => _deprecated_}/tokens/acronis.css | 0 .../_deprecated_/tokens/acv/aliases.css | 3 + .../tokens/acv/aliases/link.css | 0 .../tokens/acv/aliases/surfaces.css | 0 .../tokens/acv/aliases/text.css | 0 .../tokens/acv/animation.css | 0 .../{ => _deprecated_}/tokens/acv/aspects.css | 0 .../{ => _deprecated_}/tokens/acv/borders.css | 0 .../tokens/acv/breakpoints.css | 0 .../styles/_deprecated_/tokens/acv/colors.css | 29 +++ .../tokens/acv/colors/color.amber.css | 0 .../tokens/acv/colors/color.blue.css | 0 .../tokens/acv/colors/color.brown.css | 0 .../tokens/acv/colors/color.charts.css | 0 .../tokens/acv/colors/color.cyan.css | 0 .../tokens/acv/colors/color.deep-purple.css | 0 .../tokens/acv/colors/color.dodge-blue.css | 0 .../tokens/acv/colors/color.gray.css | 0 .../tokens/acv/colors/color.green.css | 0 .../tokens/acv/colors/color.indigo.css | 0 .../tokens/acv/colors/color.light-blue.css | 0 .../tokens/acv/colors/color.light-green.css | 0 .../tokens/acv/colors/color.named.css | 0 .../tokens/acv/colors/color.orange.css | 0 .../tokens/acv/colors/color.pink.css | 0 .../tokens/acv/colors/color.primary.css | 0 .../tokens/acv/colors/color.purple.css | 0 .../tokens/acv/colors/color.red.css | 0 .../tokens/acv/colors/color.secondary.css | 0 .../tokens/acv/colors/color.state.css | 0 .../tokens/acv/colors/color.status.css | 0 .../tokens/acv/colors/color.teal.css | 0 .../tokens/acv/colors/color.tertiary.css | 0 .../tokens/acv/colors/color.yellow.css | 0 .../tokens/acv/dimensions.css | 0 .../{ => _deprecated_}/tokens/acv/easing.css | 0 .../{ => _deprecated_}/tokens/acv/font.css | 0 .../tokens/acv/gradients.css | 0 .../{ => _deprecated_}/tokens/acv/icon.css | 0 .../{ => _deprecated_}/tokens/acv/index.css | 0 .../{ => _deprecated_}/tokens/acv/media.css | 0 .../{ => _deprecated_}/tokens/acv/rtl.css | 0 .../{ => _deprecated_}/tokens/acv/schemes.css | 0 .../{ => _deprecated_}/tokens/acv/shadows.css | 0 .../{ => _deprecated_}/tokens/acv/sizes.css | 0 .../{ => _deprecated_}/tokens/acv/spacing.css | 0 .../{ => _deprecated_}/tokens/acv/svg.css | 0 .../tokens/acv/transition.css | 0 .../tokens/acv/typography.css | 0 .../{ => _deprecated_}/tokens/acv/zindex.css | 0 .../styles/{ => _deprecated_}/tokens/base.css | 0 .../{ => _deprecated_}/tokens/constructor.css | 0 .../styles/{ => _deprecated_}/tokens/dark.css | 0 .../{ => _deprecated_}/tokens/virtuozzo.css | 0 .../utilities/animations.css | 0 .../utilities/background-color.css | 0 .../utilities/border-color.css | 0 .../{ => _deprecated_}/utilities/borders.css | 0 .../{ => _deprecated_}/utilities/display.css | 0 .../{ => _deprecated_}/utilities/flex.css | 0 .../{ => _deprecated_}/utilities/grid.css | 0 .../styles/_deprecated_/utilities/icon.css | 9 + .../styles/_deprecated_/utilities/index.css | 16 ++ .../{ => _deprecated_}/utilities/layer.css | 0 .../{ => _deprecated_}/utilities/overflow.css | 0 .../utilities/paragraph.css | 0 .../{ => _deprecated_}/utilities/position.css | 0 .../{ => _deprecated_}/utilities/size.css | 0 .../{ => _deprecated_}/utilities/spacing.css | 0 .../{ => _deprecated_}/utilities/surfaces.css | 0 .../utilities/text-middle-ellipsis.css | 0 .../{ => _deprecated_}/utilities/text.css | 0 .../utilities/transitions.css | 0 .../utilities/vertical-align.css | 0 packages/ui/src/styles/elements/index.css | 1 - packages/ui/src/styles/index.css | 7 - packages/ui/src/styles/reset.css | 234 ++++++++++++++++++ .../styles/themes/acronis/acronis-dark.pcss | 120 +++++++++ .../styles/themes/acronis/acronis-light.pcss | 120 +++++++++ .../ui/src/styles/themes/acronis/acronis.pcss | 28 +++ packages/ui/src/styles/tokens/acv/aliases.css | 3 - packages/ui/src/styles/tokens/acv/colors.css | 29 --- packages/ui/src/styles/tokens/icon.css | 18 ++ packages/ui/src/styles/tokens/sizes.css | 49 ++++ packages/ui/src/styles/utilities/icon.css | 2 +- packages/ui/src/styles/utilities/index.css | 16 -- pnpm-lock.yaml | 18 +- 112 files changed, 669 insertions(+), 86 deletions(-) rename packages/ui/src/styles/{ => _deprecated_}/elements/borderless.css (100%) create mode 100644 packages/ui/src/styles/_deprecated_/elements/index.css rename packages/ui/src/styles/{ => _deprecated_}/elements/link.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/elements/scrollbar.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/elements/table.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/basic.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/box-sizing.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/clearfix.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/inherit.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/normalize.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/generic/reset.css (100%) create mode 100644 packages/ui/src/styles/_deprecated_/index.css rename packages/ui/src/styles/{ => _deprecated_}/layers.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/layout/grid.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/layout/inline.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/layout/stack.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/public/acronis.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/public/constructor.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/public/themes.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/public/virtuozzo.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acronis.css (100%) create mode 100644 packages/ui/src/styles/_deprecated_/tokens/acv/aliases.css rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/aliases/link.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/aliases/surfaces.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/aliases/text.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/animation.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/aspects.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/borders.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/breakpoints.css (100%) create mode 100644 packages/ui/src/styles/_deprecated_/tokens/acv/colors.css rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.amber.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.blue.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.brown.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.charts.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.cyan.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.deep-purple.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.dodge-blue.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.gray.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.green.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.indigo.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.light-blue.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.light-green.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.named.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.orange.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.pink.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.primary.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.purple.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.red.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.secondary.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.state.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.status.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.teal.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.tertiary.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/colors/color.yellow.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/dimensions.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/easing.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/font.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/gradients.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/icon.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/index.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/media.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/rtl.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/schemes.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/shadows.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/sizes.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/spacing.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/svg.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/transition.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/typography.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/acv/zindex.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/base.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/constructor.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/dark.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/tokens/virtuozzo.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/animations.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/background-color.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/border-color.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/borders.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/display.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/flex.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/grid.css (100%) create mode 100644 packages/ui/src/styles/_deprecated_/utilities/icon.css create mode 100644 packages/ui/src/styles/_deprecated_/utilities/index.css rename packages/ui/src/styles/{ => _deprecated_}/utilities/layer.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/overflow.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/paragraph.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/position.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/size.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/spacing.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/surfaces.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/text-middle-ellipsis.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/text.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/transitions.css (100%) rename packages/ui/src/styles/{ => _deprecated_}/utilities/vertical-align.css (100%) delete mode 100644 packages/ui/src/styles/elements/index.css delete mode 100644 packages/ui/src/styles/index.css create mode 100644 packages/ui/src/styles/reset.css create mode 100644 packages/ui/src/styles/themes/acronis/acronis-dark.pcss create mode 100644 packages/ui/src/styles/themes/acronis/acronis-light.pcss create mode 100644 packages/ui/src/styles/themes/acronis/acronis.pcss delete mode 100644 packages/ui/src/styles/tokens/acv/aliases.css delete mode 100644 packages/ui/src/styles/tokens/acv/colors.css create mode 100644 packages/ui/src/styles/tokens/icon.css create mode 100644 packages/ui/src/styles/tokens/sizes.css delete mode 100644 packages/ui/src/styles/utilities/index.css diff --git a/packages/documentation/.vitepress/theme/style.css b/packages/documentation/.vitepress/theme/style.css index 29779f6ea..1a4962843 100644 --- a/packages/documentation/.vitepress/theme/style.css +++ b/packages/documentation/.vitepress/theme/style.css @@ -1,2 +1,3 @@ @import "./vitepress/index.css"; -@import "@/styles/public/themes.css"; +@import "@/styles/reset.css"; +@import "@/styles/themes/acronis/acronis.pcss"; diff --git a/packages/documentation/theming/css-variables.md b/packages/documentation/theming/css-variables.md index 576c18a41..3bf364fa6 100644 --- a/packages/documentation/theming/css-variables.md +++ b/packages/documentation/theming/css-variables.md @@ -14,26 +14,20 @@ and other design tokens according used theme. [List of CSS variables](#list-of-basic-variables) is available at the bottom of this page. ::: -## List of UI-syntax 3.0 css variables +## List of UI-syntax 3.0 global styles Basic variables are used to define the basic design tokens like colors, typography, spacing, etc. Theme variables are used to define the theme-specific design tokens like colors, spacing, components, etc. ::: code-group -<<< ../../ui/src/styles/tokens/base.css [Base tokens] -<<< ../../ui/src/styles/tokens/acronis.css [Acronis theme] -<<< ../../ui/src/styles/tokens/constructor.css [Constructor theme] -<<< ../../ui/src/styles/tokens/virtuozzo.css [Virtuozzo theme] -<<< ../../ui/src/styles/tokens/dark.css [Dark theme] +<<< ../../ui/src/styles/reset.css ::: -## List of basic tokens +## List of UI-syntax 3.0 theme styles ::: code-group -<<< ../../ui/src/styles/tokens/acv/animation.css [Animation tokens] -<<< ../../ui/src/styles/tokens/acv/aspects.css [Aspects tokens] -<<< ../../ui/src/styles/tokens/acv/shadows.css [Shadows tokens] +<<< ../../ui/src/styles/themes/acronis/acronis.pcss [Acronis theme] ::: ## Shadows diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 064a0bcad..d8d749538 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -1,6 +1,7 @@ import type { Decorator, Preview } from '@storybook/vue3'; import { useEffect, useGlobals } from '@storybook/preview-api'; -import '../src/styles/public/themes.css'; +import '../src/styles/reset.css'; +import '../src/styles/themes/acronis/acronis.pcss'; export function withToggleDarkMode(StoryFn) { const [globals] = useGlobals(); @@ -8,14 +9,12 @@ export function withToggleDarkMode(StoryFn) { useEffect(() => { if (darkMode) { - global.document.documentElement.dataset.theme = 'dark'; - global.document.documentElement.classList.add('color-scheme-dark'); - global.document.documentElement.classList.remove('color-scheme-light'); + global.document.documentElement.classList.add('acv-color-scheme-dark'); + global.document.documentElement.classList.remove('acv-color-scheme-light'); } else { - global.document.documentElement.dataset.theme = 'light'; - global.document.documentElement.classList.remove('color-scheme-dark'); - global.document.documentElement.classList.add('color-scheme-light'); + global.document.documentElement.classList.remove('acv-color-scheme-dark'); + global.document.documentElement.classList.add('acv-color-scheme-light'); } }, [darkMode]); diff --git a/packages/ui/cypress/support/component.ts b/packages/ui/cypress/support/component.ts index 00f3ed784..947dddb5b 100644 --- a/packages/ui/cypress/support/component.ts +++ b/packages/ui/cypress/support/component.ts @@ -17,7 +17,7 @@ import { mount } from 'cypress/vue'; // Ensure global styles are loaded -import '../../src/styles/public/acronis.css'; +import '../../src/styles/_deprecated_/public/acronis.css'; // eslint-disable-next-line import/no-extraneous-dependencies import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command'; diff --git a/packages/ui/scripts/buildCssPlugin.ts b/packages/ui/scripts/buildCssPlugin.ts index 502112c58..3d95a6ed9 100644 --- a/packages/ui/scripts/buildCssPlugin.ts +++ b/packages/ui/scripts/buildCssPlugin.ts @@ -3,11 +3,14 @@ import fs from 'node:fs'; import path from 'node:path'; export function buildCssPlugin(): Plugin { - const stylesPath = path.join('src', 'styles', 'public'); - const styles = fs.readdirSync(stylesPath); - const entry = Object.fromEntries(styles.map((style) => { - return [`styles/${style.replace('.css', '')}`, path.join(stylesPath, style)]; - })); + const stylesPath = path.join('src', 'styles', 'themes'); + const themes = fs.readdirSync(stylesPath).map((theme) => { + return [`styles/themes/${theme}`, path.join(stylesPath, theme, `${theme}.pcss`)]; + }); + const entry = { + 'styles/reset': path.join('src', 'styles', 'reset.css'), + ...Object.fromEntries(themes) + }; return { name: 'build-css-plugin', diff --git a/packages/ui/src/styles/elements/borderless.css b/packages/ui/src/styles/_deprecated_/elements/borderless.css similarity index 100% rename from packages/ui/src/styles/elements/borderless.css rename to packages/ui/src/styles/_deprecated_/elements/borderless.css diff --git a/packages/ui/src/styles/_deprecated_/elements/index.css b/packages/ui/src/styles/_deprecated_/elements/index.css new file mode 100644 index 000000000..4b07516f4 --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/elements/index.css @@ -0,0 +1 @@ +@import "scrollbar.css"; diff --git a/packages/ui/src/styles/elements/link.css b/packages/ui/src/styles/_deprecated_/elements/link.css similarity index 100% rename from packages/ui/src/styles/elements/link.css rename to packages/ui/src/styles/_deprecated_/elements/link.css diff --git a/packages/ui/src/styles/elements/scrollbar.css b/packages/ui/src/styles/_deprecated_/elements/scrollbar.css similarity index 100% rename from packages/ui/src/styles/elements/scrollbar.css rename to packages/ui/src/styles/_deprecated_/elements/scrollbar.css diff --git a/packages/ui/src/styles/elements/table.css b/packages/ui/src/styles/_deprecated_/elements/table.css similarity index 100% rename from packages/ui/src/styles/elements/table.css rename to packages/ui/src/styles/_deprecated_/elements/table.css diff --git a/packages/ui/src/styles/generic/basic.css b/packages/ui/src/styles/_deprecated_/generic/basic.css similarity index 100% rename from packages/ui/src/styles/generic/basic.css rename to packages/ui/src/styles/_deprecated_/generic/basic.css diff --git a/packages/ui/src/styles/generic/box-sizing.css b/packages/ui/src/styles/_deprecated_/generic/box-sizing.css similarity index 100% rename from packages/ui/src/styles/generic/box-sizing.css rename to packages/ui/src/styles/_deprecated_/generic/box-sizing.css diff --git a/packages/ui/src/styles/generic/clearfix.css b/packages/ui/src/styles/_deprecated_/generic/clearfix.css similarity index 100% rename from packages/ui/src/styles/generic/clearfix.css rename to packages/ui/src/styles/_deprecated_/generic/clearfix.css diff --git a/packages/ui/src/styles/generic/inherit.css b/packages/ui/src/styles/_deprecated_/generic/inherit.css similarity index 100% rename from packages/ui/src/styles/generic/inherit.css rename to packages/ui/src/styles/_deprecated_/generic/inherit.css diff --git a/packages/ui/src/styles/generic/normalize.css b/packages/ui/src/styles/_deprecated_/generic/normalize.css similarity index 100% rename from packages/ui/src/styles/generic/normalize.css rename to packages/ui/src/styles/_deprecated_/generic/normalize.css diff --git a/packages/ui/src/styles/generic/reset.css b/packages/ui/src/styles/_deprecated_/generic/reset.css similarity index 100% rename from packages/ui/src/styles/generic/reset.css rename to packages/ui/src/styles/_deprecated_/generic/reset.css diff --git a/packages/ui/src/styles/_deprecated_/index.css b/packages/ui/src/styles/_deprecated_/index.css new file mode 100644 index 000000000..7a0c0b88b --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/index.css @@ -0,0 +1,7 @@ +@import "layers.css"; +@import "generic/reset.css"; +@import "generic/normalize.css"; +@import "tokens/base.css" layer(theme); +@import "tokens/acv" layer(tokens); +@import "elements"; +@import "utilities"; diff --git a/packages/ui/src/styles/layers.css b/packages/ui/src/styles/_deprecated_/layers.css similarity index 100% rename from packages/ui/src/styles/layers.css rename to packages/ui/src/styles/_deprecated_/layers.css diff --git a/packages/ui/src/styles/layout/grid.css b/packages/ui/src/styles/_deprecated_/layout/grid.css similarity index 100% rename from packages/ui/src/styles/layout/grid.css rename to packages/ui/src/styles/_deprecated_/layout/grid.css diff --git a/packages/ui/src/styles/layout/inline.css b/packages/ui/src/styles/_deprecated_/layout/inline.css similarity index 100% rename from packages/ui/src/styles/layout/inline.css rename to packages/ui/src/styles/_deprecated_/layout/inline.css diff --git a/packages/ui/src/styles/layout/stack.css b/packages/ui/src/styles/_deprecated_/layout/stack.css similarity index 100% rename from packages/ui/src/styles/layout/stack.css rename to packages/ui/src/styles/_deprecated_/layout/stack.css diff --git a/packages/ui/src/styles/public/acronis.css b/packages/ui/src/styles/_deprecated_/public/acronis.css similarity index 100% rename from packages/ui/src/styles/public/acronis.css rename to packages/ui/src/styles/_deprecated_/public/acronis.css diff --git a/packages/ui/src/styles/public/constructor.css b/packages/ui/src/styles/_deprecated_/public/constructor.css similarity index 100% rename from packages/ui/src/styles/public/constructor.css rename to packages/ui/src/styles/_deprecated_/public/constructor.css diff --git a/packages/ui/src/styles/public/themes.css b/packages/ui/src/styles/_deprecated_/public/themes.css similarity index 100% rename from packages/ui/src/styles/public/themes.css rename to packages/ui/src/styles/_deprecated_/public/themes.css diff --git a/packages/ui/src/styles/public/virtuozzo.css b/packages/ui/src/styles/_deprecated_/public/virtuozzo.css similarity index 100% rename from packages/ui/src/styles/public/virtuozzo.css rename to packages/ui/src/styles/_deprecated_/public/virtuozzo.css diff --git a/packages/ui/src/styles/tokens/acronis.css b/packages/ui/src/styles/_deprecated_/tokens/acronis.css similarity index 100% rename from packages/ui/src/styles/tokens/acronis.css rename to packages/ui/src/styles/_deprecated_/tokens/acronis.css diff --git a/packages/ui/src/styles/_deprecated_/tokens/acv/aliases.css b/packages/ui/src/styles/_deprecated_/tokens/acv/aliases.css new file mode 100644 index 000000000..db635e26a --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/tokens/acv/aliases.css @@ -0,0 +1,3 @@ +@import "aliases/link.css"; +@import "aliases/surfaces.css"; +@import "aliases/text.css"; diff --git a/packages/ui/src/styles/tokens/acv/aliases/link.css b/packages/ui/src/styles/_deprecated_/tokens/acv/aliases/link.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/aliases/link.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/aliases/link.css diff --git a/packages/ui/src/styles/tokens/acv/aliases/surfaces.css b/packages/ui/src/styles/_deprecated_/tokens/acv/aliases/surfaces.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/aliases/surfaces.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/aliases/surfaces.css diff --git a/packages/ui/src/styles/tokens/acv/aliases/text.css b/packages/ui/src/styles/_deprecated_/tokens/acv/aliases/text.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/aliases/text.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/aliases/text.css diff --git a/packages/ui/src/styles/tokens/acv/animation.css b/packages/ui/src/styles/_deprecated_/tokens/acv/animation.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/animation.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/animation.css diff --git a/packages/ui/src/styles/tokens/acv/aspects.css b/packages/ui/src/styles/_deprecated_/tokens/acv/aspects.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/aspects.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/aspects.css diff --git a/packages/ui/src/styles/tokens/acv/borders.css b/packages/ui/src/styles/_deprecated_/tokens/acv/borders.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/borders.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/borders.css diff --git a/packages/ui/src/styles/tokens/acv/breakpoints.css b/packages/ui/src/styles/_deprecated_/tokens/acv/breakpoints.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/breakpoints.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/breakpoints.css diff --git a/packages/ui/src/styles/_deprecated_/tokens/acv/colors.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors.css new file mode 100644 index 000000000..2b8a37b7a --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/tokens/acv/colors.css @@ -0,0 +1,29 @@ +@import "colors/color.amber.css"; +@import "colors/color.blue.css"; +@import "colors/color.brown.css"; +@import "colors/color.charts.css"; +@import "colors/color.cyan.css"; +@import "colors/color.deep-purple.css"; +@import "colors/color.dodge-blue.css"; +@import "colors/color.gray.css"; +@import "colors/color.green.css"; +@import "colors/color.indigo.css"; +@import "colors/color.light-blue.css"; +@import "colors/color.light-green.css"; +@import "colors/color.named.css"; +@import "colors/color.orange.css"; +@import "colors/color.pink.css"; +@import "colors/color.primary.css"; +@import "colors/color.purple.css"; +@import "colors/color.red.css"; +@import "colors/color.secondary.css"; +@import "colors/color.state.css"; +@import "colors/color.status.css"; +@import "colors/color.teal.css"; +@import "colors/color.tertiary.css"; +@import "colors/color.yellow.css"; + +:root { + --acv-color-text-on-primary: var(--acv-color-white); + --acv-color-surface-card: var(--acv-color-white); +} diff --git a/packages/ui/src/styles/tokens/acv/colors/color.amber.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.amber.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.amber.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.amber.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.blue.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.blue.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.blue.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.blue.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.brown.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.brown.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.brown.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.brown.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.charts.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.charts.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.charts.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.charts.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.cyan.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.cyan.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.cyan.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.cyan.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.deep-purple.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.deep-purple.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.deep-purple.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.deep-purple.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.dodge-blue.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.dodge-blue.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.dodge-blue.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.dodge-blue.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.gray.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.gray.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.gray.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.gray.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.green.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.green.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.green.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.green.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.indigo.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.indigo.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.indigo.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.indigo.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.light-blue.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.light-blue.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.light-blue.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.light-blue.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.light-green.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.light-green.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.light-green.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.light-green.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.named.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.named.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.named.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.named.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.orange.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.orange.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.orange.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.orange.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.pink.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.pink.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.pink.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.pink.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.primary.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.primary.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.primary.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.primary.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.purple.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.purple.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.purple.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.purple.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.red.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.red.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.red.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.red.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.secondary.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.secondary.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.secondary.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.secondary.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.state.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.state.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.state.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.state.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.status.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.status.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.status.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.status.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.teal.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.teal.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.teal.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.teal.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.tertiary.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.tertiary.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.tertiary.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.tertiary.css diff --git a/packages/ui/src/styles/tokens/acv/colors/color.yellow.css b/packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.yellow.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/colors/color.yellow.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/colors/color.yellow.css diff --git a/packages/ui/src/styles/tokens/acv/dimensions.css b/packages/ui/src/styles/_deprecated_/tokens/acv/dimensions.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/dimensions.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/dimensions.css diff --git a/packages/ui/src/styles/tokens/acv/easing.css b/packages/ui/src/styles/_deprecated_/tokens/acv/easing.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/easing.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/easing.css diff --git a/packages/ui/src/styles/tokens/acv/font.css b/packages/ui/src/styles/_deprecated_/tokens/acv/font.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/font.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/font.css diff --git a/packages/ui/src/styles/tokens/acv/gradients.css b/packages/ui/src/styles/_deprecated_/tokens/acv/gradients.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/gradients.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/gradients.css diff --git a/packages/ui/src/styles/tokens/acv/icon.css b/packages/ui/src/styles/_deprecated_/tokens/acv/icon.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/icon.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/icon.css diff --git a/packages/ui/src/styles/tokens/acv/index.css b/packages/ui/src/styles/_deprecated_/tokens/acv/index.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/index.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/index.css diff --git a/packages/ui/src/styles/tokens/acv/media.css b/packages/ui/src/styles/_deprecated_/tokens/acv/media.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/media.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/media.css diff --git a/packages/ui/src/styles/tokens/acv/rtl.css b/packages/ui/src/styles/_deprecated_/tokens/acv/rtl.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/rtl.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/rtl.css diff --git a/packages/ui/src/styles/tokens/acv/schemes.css b/packages/ui/src/styles/_deprecated_/tokens/acv/schemes.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/schemes.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/schemes.css diff --git a/packages/ui/src/styles/tokens/acv/shadows.css b/packages/ui/src/styles/_deprecated_/tokens/acv/shadows.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/shadows.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/shadows.css diff --git a/packages/ui/src/styles/tokens/acv/sizes.css b/packages/ui/src/styles/_deprecated_/tokens/acv/sizes.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/sizes.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/sizes.css diff --git a/packages/ui/src/styles/tokens/acv/spacing.css b/packages/ui/src/styles/_deprecated_/tokens/acv/spacing.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/spacing.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/spacing.css diff --git a/packages/ui/src/styles/tokens/acv/svg.css b/packages/ui/src/styles/_deprecated_/tokens/acv/svg.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/svg.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/svg.css diff --git a/packages/ui/src/styles/tokens/acv/transition.css b/packages/ui/src/styles/_deprecated_/tokens/acv/transition.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/transition.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/transition.css diff --git a/packages/ui/src/styles/tokens/acv/typography.css b/packages/ui/src/styles/_deprecated_/tokens/acv/typography.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/typography.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/typography.css diff --git a/packages/ui/src/styles/tokens/acv/zindex.css b/packages/ui/src/styles/_deprecated_/tokens/acv/zindex.css similarity index 100% rename from packages/ui/src/styles/tokens/acv/zindex.css rename to packages/ui/src/styles/_deprecated_/tokens/acv/zindex.css diff --git a/packages/ui/src/styles/tokens/base.css b/packages/ui/src/styles/_deprecated_/tokens/base.css similarity index 100% rename from packages/ui/src/styles/tokens/base.css rename to packages/ui/src/styles/_deprecated_/tokens/base.css diff --git a/packages/ui/src/styles/tokens/constructor.css b/packages/ui/src/styles/_deprecated_/tokens/constructor.css similarity index 100% rename from packages/ui/src/styles/tokens/constructor.css rename to packages/ui/src/styles/_deprecated_/tokens/constructor.css diff --git a/packages/ui/src/styles/tokens/dark.css b/packages/ui/src/styles/_deprecated_/tokens/dark.css similarity index 100% rename from packages/ui/src/styles/tokens/dark.css rename to packages/ui/src/styles/_deprecated_/tokens/dark.css diff --git a/packages/ui/src/styles/tokens/virtuozzo.css b/packages/ui/src/styles/_deprecated_/tokens/virtuozzo.css similarity index 100% rename from packages/ui/src/styles/tokens/virtuozzo.css rename to packages/ui/src/styles/_deprecated_/tokens/virtuozzo.css diff --git a/packages/ui/src/styles/utilities/animations.css b/packages/ui/src/styles/_deprecated_/utilities/animations.css similarity index 100% rename from packages/ui/src/styles/utilities/animations.css rename to packages/ui/src/styles/_deprecated_/utilities/animations.css diff --git a/packages/ui/src/styles/utilities/background-color.css b/packages/ui/src/styles/_deprecated_/utilities/background-color.css similarity index 100% rename from packages/ui/src/styles/utilities/background-color.css rename to packages/ui/src/styles/_deprecated_/utilities/background-color.css diff --git a/packages/ui/src/styles/utilities/border-color.css b/packages/ui/src/styles/_deprecated_/utilities/border-color.css similarity index 100% rename from packages/ui/src/styles/utilities/border-color.css rename to packages/ui/src/styles/_deprecated_/utilities/border-color.css diff --git a/packages/ui/src/styles/utilities/borders.css b/packages/ui/src/styles/_deprecated_/utilities/borders.css similarity index 100% rename from packages/ui/src/styles/utilities/borders.css rename to packages/ui/src/styles/_deprecated_/utilities/borders.css diff --git a/packages/ui/src/styles/utilities/display.css b/packages/ui/src/styles/_deprecated_/utilities/display.css similarity index 100% rename from packages/ui/src/styles/utilities/display.css rename to packages/ui/src/styles/_deprecated_/utilities/display.css diff --git a/packages/ui/src/styles/utilities/flex.css b/packages/ui/src/styles/_deprecated_/utilities/flex.css similarity index 100% rename from packages/ui/src/styles/utilities/flex.css rename to packages/ui/src/styles/_deprecated_/utilities/flex.css diff --git a/packages/ui/src/styles/utilities/grid.css b/packages/ui/src/styles/_deprecated_/utilities/grid.css similarity index 100% rename from packages/ui/src/styles/utilities/grid.css rename to packages/ui/src/styles/_deprecated_/utilities/grid.css diff --git a/packages/ui/src/styles/_deprecated_/utilities/icon.css b/packages/ui/src/styles/_deprecated_/utilities/icon.css new file mode 100644 index 000000000..ec2e60d11 --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/utilities/icon.css @@ -0,0 +1,9 @@ +@layer utilities { + .acv-icon { + width: var(--acv-icon-size); + height: var(--acv-icon-size); + accent-color: var(--acv-icon-color); + display: inline-block; + vertical-align: middle; + } +} diff --git a/packages/ui/src/styles/_deprecated_/utilities/index.css b/packages/ui/src/styles/_deprecated_/utilities/index.css new file mode 100644 index 000000000..8d666b643 --- /dev/null +++ b/packages/ui/src/styles/_deprecated_/utilities/index.css @@ -0,0 +1,16 @@ +@import "background-color.css"; +@import "border-color.css"; +@import "display.css"; +@import "flex.css"; +@import "grid.css"; +@import "icon.css"; +@import "layer.css"; +@import "overflow.css"; +@import "position.css"; +@import "size.css"; +@import "spacing.css"; +@import "surfaces.css"; +@import "text-middle-ellipsis.css"; +@import "text.css"; +@import "transitions.css"; +@import "vertical-align.css"; diff --git a/packages/ui/src/styles/utilities/layer.css b/packages/ui/src/styles/_deprecated_/utilities/layer.css similarity index 100% rename from packages/ui/src/styles/utilities/layer.css rename to packages/ui/src/styles/_deprecated_/utilities/layer.css diff --git a/packages/ui/src/styles/utilities/overflow.css b/packages/ui/src/styles/_deprecated_/utilities/overflow.css similarity index 100% rename from packages/ui/src/styles/utilities/overflow.css rename to packages/ui/src/styles/_deprecated_/utilities/overflow.css diff --git a/packages/ui/src/styles/utilities/paragraph.css b/packages/ui/src/styles/_deprecated_/utilities/paragraph.css similarity index 100% rename from packages/ui/src/styles/utilities/paragraph.css rename to packages/ui/src/styles/_deprecated_/utilities/paragraph.css diff --git a/packages/ui/src/styles/utilities/position.css b/packages/ui/src/styles/_deprecated_/utilities/position.css similarity index 100% rename from packages/ui/src/styles/utilities/position.css rename to packages/ui/src/styles/_deprecated_/utilities/position.css diff --git a/packages/ui/src/styles/utilities/size.css b/packages/ui/src/styles/_deprecated_/utilities/size.css similarity index 100% rename from packages/ui/src/styles/utilities/size.css rename to packages/ui/src/styles/_deprecated_/utilities/size.css diff --git a/packages/ui/src/styles/utilities/spacing.css b/packages/ui/src/styles/_deprecated_/utilities/spacing.css similarity index 100% rename from packages/ui/src/styles/utilities/spacing.css rename to packages/ui/src/styles/_deprecated_/utilities/spacing.css diff --git a/packages/ui/src/styles/utilities/surfaces.css b/packages/ui/src/styles/_deprecated_/utilities/surfaces.css similarity index 100% rename from packages/ui/src/styles/utilities/surfaces.css rename to packages/ui/src/styles/_deprecated_/utilities/surfaces.css diff --git a/packages/ui/src/styles/utilities/text-middle-ellipsis.css b/packages/ui/src/styles/_deprecated_/utilities/text-middle-ellipsis.css similarity index 100% rename from packages/ui/src/styles/utilities/text-middle-ellipsis.css rename to packages/ui/src/styles/_deprecated_/utilities/text-middle-ellipsis.css diff --git a/packages/ui/src/styles/utilities/text.css b/packages/ui/src/styles/_deprecated_/utilities/text.css similarity index 100% rename from packages/ui/src/styles/utilities/text.css rename to packages/ui/src/styles/_deprecated_/utilities/text.css diff --git a/packages/ui/src/styles/utilities/transitions.css b/packages/ui/src/styles/_deprecated_/utilities/transitions.css similarity index 100% rename from packages/ui/src/styles/utilities/transitions.css rename to packages/ui/src/styles/_deprecated_/utilities/transitions.css diff --git a/packages/ui/src/styles/utilities/vertical-align.css b/packages/ui/src/styles/_deprecated_/utilities/vertical-align.css similarity index 100% rename from packages/ui/src/styles/utilities/vertical-align.css rename to packages/ui/src/styles/_deprecated_/utilities/vertical-align.css diff --git a/packages/ui/src/styles/elements/index.css b/packages/ui/src/styles/elements/index.css deleted file mode 100644 index 2effd423e..000000000 --- a/packages/ui/src/styles/elements/index.css +++ /dev/null @@ -1 +0,0 @@ -@import "./scrollbar.css"; diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css deleted file mode 100644 index 39a745d98..000000000 --- a/packages/ui/src/styles/index.css +++ /dev/null @@ -1,7 +0,0 @@ -@import "./layers.css"; -@import "./generic/reset.css"; -@import "./generic/normalize.css"; -@import "./tokens/base.css" layer(theme); -@import "./tokens/acv" layer(tokens); -@import "./elements"; -@import "./utilities"; diff --git a/packages/ui/src/styles/reset.css b/packages/ui/src/styles/reset.css new file mode 100644 index 000000000..506967517 --- /dev/null +++ b/packages/ui/src/styles/reset.css @@ -0,0 +1,234 @@ +/* + - acv-reset - reset default browser styling for HTML elements (lowest priority) + - acv-theme - css for specific theme + */ +@layer acv-reset, acv-theme, acv-utilities; +@import "./tokens/sizes.css"; +@import "./tokens/icon.css"; +@import "./utilities/icon.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; + 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; + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + font-size: 1em; + overflow: auto; + } + + small { + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + font-size: 80%; + } + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */ + 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; + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + 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; + } + + /* stylelint-disable-next-line selector-pseudo-element-no-unknown */ + ::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 { + appearance: button; + border: 0; + background: none; + text-align: inherit; + } + + a { + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + 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/themes/acronis/acronis-dark.pcss b/packages/ui/src/styles/themes/acronis/acronis-dark.pcss new file mode 100644 index 000000000..d8fde8712 --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis-dark.pcss @@ -0,0 +1,120 @@ +@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) sans-serif; + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + 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 new file mode 100644 index 000000000..a9f87068d --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis-light.pcss @@ -0,0 +1,120 @@ +@define-mixin acv-theme-acronis-light { + --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) sans-serif; + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + color-scheme: light; +} diff --git a/packages/ui/src/styles/themes/acronis/acronis.pcss b/packages/ui/src/styles/themes/acronis/acronis.pcss new file mode 100644 index 000000000..1d45bfc6c --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis.pcss @@ -0,0 +1,28 @@ +@import "./acronis-light.pcss"; +@import "./acronis-dark.pcss"; + +@layer acv-theme { + @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) { + @mixin acv-theme-acronis-light; + } + + /* dark theme with color scheme override */ + :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis).acv-color-scheme-dark { + @mixin acv-theme-acronis-dark; + } + } + + @media (prefers-color-scheme: dark) { + /* light theme without color scheme override */ + :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis).acv-color-scheme-light { + @mixin acv-theme-acronis-light; + } + + /* dark theme without color scheme override */ + :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis):not(.acv-color-scheme-light) { + @mixin acv-theme-acronis-dark; + } + } +} diff --git a/packages/ui/src/styles/tokens/acv/aliases.css b/packages/ui/src/styles/tokens/acv/aliases.css deleted file mode 100644 index e09a31a84..000000000 --- a/packages/ui/src/styles/tokens/acv/aliases.css +++ /dev/null @@ -1,3 +0,0 @@ -@import "./aliases/link.css"; -@import "./aliases/surfaces.css"; -@import "./aliases/text.css"; diff --git a/packages/ui/src/styles/tokens/acv/colors.css b/packages/ui/src/styles/tokens/acv/colors.css deleted file mode 100644 index 4287e7016..000000000 --- a/packages/ui/src/styles/tokens/acv/colors.css +++ /dev/null @@ -1,29 +0,0 @@ -@import "./colors/color.amber.css"; -@import "./colors/color.blue.css"; -@import "./colors/color.brown.css"; -@import "./colors/color.charts.css"; -@import "./colors/color.cyan.css"; -@import "./colors/color.deep-purple.css"; -@import "./colors/color.dodge-blue.css"; -@import "./colors/color.gray.css"; -@import "./colors/color.green.css"; -@import "./colors/color.indigo.css"; -@import "./colors/color.light-blue.css"; -@import "./colors/color.light-green.css"; -@import "./colors/color.named.css"; -@import "./colors/color.orange.css"; -@import "./colors/color.pink.css"; -@import "./colors/color.primary.css"; -@import "./colors/color.purple.css"; -@import "./colors/color.red.css"; -@import "./colors/color.secondary.css"; -@import "./colors/color.state.css"; -@import "./colors/color.status.css"; -@import "./colors/color.teal.css"; -@import "./colors/color.tertiary.css"; -@import "./colors/color.yellow.css"; - -:root { - --acv-color-text-on-primary: var(--acv-color-white); - --acv-color-surface-card: var(--acv-color-white); -} diff --git a/packages/ui/src/styles/tokens/icon.css b/packages/ui/src/styles/tokens/icon.css new file mode 100644 index 000000000..e54fb6b09 --- /dev/null +++ b/packages/ui/src/styles/tokens/icon.css @@ -0,0 +1,18 @@ +@layer acv-reset { + :root { + --acv-icon-color: currentColor; + --acv-icon-size: var(--acv-icon-size-x-small); + --acv-icon-size-xxx-small: 8px; + --acv-icon-size-xx-small: 12px; + --acv-icon-size-x-small: 16px; + --acv-icon-size-small: 20px; + --acv-icon-size-medium: 24px; + --acv-icon-size-large: 32px; + --acv-icon-size-x-large: 48px; + --acv-icon-size-xx-large: 72px; + --acv-icon-size-xxx-large: 96px; + --acv-base-icon-size: var(--acv-icon-size-medium); + --acv-icon-size-height: var(--acv-icon-size); + --acv-icon-size-width: var(--acv-icon-size); + } +} diff --git a/packages/ui/src/styles/tokens/sizes.css b/packages/ui/src/styles/tokens/sizes.css new file mode 100644 index 000000000..3758dff3f --- /dev/null +++ b/packages/ui/src/styles/tokens/sizes.css @@ -0,0 +1,49 @@ +@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/utilities/icon.css b/packages/ui/src/styles/utilities/icon.css index ec2e60d11..048029521 100644 --- a/packages/ui/src/styles/utilities/icon.css +++ b/packages/ui/src/styles/utilities/icon.css @@ -1,4 +1,4 @@ -@layer utilities { +@layer acv-utilities { .acv-icon { width: var(--acv-icon-size); height: var(--acv-icon-size); diff --git a/packages/ui/src/styles/utilities/index.css b/packages/ui/src/styles/utilities/index.css deleted file mode 100644 index 2056a712f..000000000 --- a/packages/ui/src/styles/utilities/index.css +++ /dev/null @@ -1,16 +0,0 @@ -@import "./background-color.css"; -@import "./border-color.css"; -@import "./display.css"; -@import "./flex.css"; -@import "./grid.css"; -@import "./icon.css"; -@import "./layer.css"; -@import "./overflow.css"; -@import "./position.css"; -@import "./size.css"; -@import "./spacing.css"; -@import "./surfaces.css"; -@import "./text-middle-ellipsis.css"; -@import "./text.css"; -@import "./transitions.css"; -@import "./vertical-align.css"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8829a3c1e..058e1c8a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8267,8 +8267,8 @@ packages: vue-component-type-helpers@2.0.29: resolution: {integrity: sha512-58i+ZhUAUpwQ+9h5Hck0D+jr1qbYl4voRt5KffBx8qzELViQ4XdT/Tuo+mzq8u63teAG8K0lLaOiL5ofqW38rg==} - vue-component-type-helpers@2.1.6: - resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==} + vue-component-type-helpers@2.1.10: + resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==} vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} @@ -11241,7 +11241,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.5.6(typescript@5.5.3) - vue-component-type-helpers: 2.1.6 + vue-component-type-helpers: 2.1.10 '@stylistic/eslint-plugin@2.9.0(eslint@9.3.0)(typescript@5.5.3)': dependencies: @@ -11629,6 +11629,14 @@ snapshots: chai: 5.1.1 tinyrainbow: 1.2.0 + '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)))': + dependencies: + '@vitest/spy': 2.1.2 + estree-walker: 3.0.3 + magic-string: 0.30.11 + optionalDependencies: + vite: 5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)) + '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.47)))': dependencies: '@vitest/spy': 2.1.2 @@ -17563,7 +17571,7 @@ snapshots: vitest@2.1.2(@types/node@20.11.30)(@vitest/ui@2.1.2)(jsdom@24.0.0)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)): dependencies: '@vitest/expect': 2.1.2 - '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.47))) + '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38))) '@vitest/pretty-format': 2.1.2 '@vitest/runner': 2.1.2 '@vitest/snapshot': 2.1.2 @@ -17762,7 +17770,7 @@ snapshots: vue-component-type-helpers@2.0.29: {} - vue-component-type-helpers@2.1.6: {} + vue-component-type-helpers@2.1.10: {} vue-demi@0.14.10(vue@3.5.6(typescript@5.5.3)): dependencies: