diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 064a0bca..41f85da6 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.css'; 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-theme-dark-acronis'); + global.document.documentElement.classList.remove('acv-theme-light-acronis'); } 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-theme-dark-acronis'); + global.document.documentElement.classList.add('acv-theme-light-acronis'); } }, [darkMode]); diff --git a/packages/ui/cypress/support/component.ts b/packages/ui/cypress/support/component.ts index 00f3ed78..947dddb5 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/package.json b/packages/ui/package.json index a352621f..3c6fd161 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -119,6 +119,7 @@ "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/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 00000000..4b07516f --- /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 00000000..7a0c0b88 --- /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 00000000..db635e26 --- /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 00000000..2b8a37b7 --- /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/utilities/icon.css b/packages/ui/src/styles/_deprecated_/utilities/icon.css similarity index 100% rename from packages/ui/src/styles/utilities/icon.css rename to packages/ui/src/styles/_deprecated_/utilities/icon.css 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 00000000..8d666b64 --- /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 2effd423..00000000 --- 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 39a745d9..00000000 --- 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 00000000..dafd2af7 --- /dev/null +++ b/packages/ui/src/styles/reset.css @@ -0,0 +1,9 @@ +/* + - acv-reset - reset default browser styling for HTML elements (lowest priority) + - acv-theme - css for specific theme + */ +@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 new file mode 100644 index 00000000..5a6751de --- /dev/null +++ b/packages/ui/src/styles/reset/normalize.css @@ -0,0 +1,42 @@ +@layer acv-reset { + :where(:root) { + block-size: 100%; + color-scheme: var(--acv-color-scheme); + } + + :where(body) { + background-color: var(--acv-color-surface-primary); + 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; + } + + :where(h1), + :where(h2), + :where(h3), + :where(h4) { + margin: 0; + } + + :where(button) { + padding: 0; + border: 0; + background: none; + color: inherit; + font: inherit; + text-align: inherit; + } + + :where(a) { + color: currentcolor; + cursor: pointer; + text-decoration: none; + } + + :where(: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 new file mode 100644 index 00000000..27f0ae4b --- /dev/null +++ b/packages/ui/src/styles/reset/variables.css @@ -0,0 +1,49 @@ +@layer acv-reset { + :where(: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); + } +} diff --git a/packages/ui/src/styles/themes/acronis/acronis-dark.css b/packages/ui/src/styles/themes/acronis/acronis-dark.css new file mode 100644 index 00000000..e79f52e0 --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis-dark.css @@ -0,0 +1,121 @@ +@layer acv-theme { + .acv-theme-dark-acronis { + --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, Inter sans-serif); + color-scheme: dark; + } +} diff --git a/packages/ui/src/styles/themes/acronis/acronis-light.css b/packages/ui/src/styles/themes/acronis/acronis-light.css new file mode 100644 index 00000000..7c067dcf --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis-light.css @@ -0,0 +1,121 @@ +@layer acv-theme { + .acv-theme-light-acronis { + --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, Inter sans-serif); + color-scheme: light; + } +} diff --git a/packages/ui/src/styles/themes/acronis/acronis.css b/packages/ui/src/styles/themes/acronis/acronis.css new file mode 100644 index 00000000..93430474 --- /dev/null +++ b/packages/ui/src/styles/themes/acronis/acronis.css @@ -0,0 +1,2 @@ +@import "./acronis-light.css"; +@import "./acronis-dark.css"; 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 e09a31a8..00000000 --- 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 4287e701..00000000 --- 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/utilities/index.css b/packages/ui/src/styles/utilities/index.css deleted file mode 100644 index 2056a712..00000000 --- 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 8829a3c1..1c41f1ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -470,6 +470,9 @@ 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 @@ -7189,6 +7192,9 @@ 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'} @@ -8267,8 +8273,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 +11247,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 +11635,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 @@ -16451,6 +16465,8 @@ snapshots: safer-buffer@2.1.2: {} + sanitize.css@13.0.0: {} + sass@1.77.4: dependencies: chokidar: 3.6.0 @@ -17563,7 +17579,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 +17778,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: