From 703723facb32e89c593f08560d52895974edd2c9 Mon Sep 17 00:00:00 2001 From: benmusson Date: Thu, 29 Aug 2024 20:59:00 -0400 Subject: [PATCH] docs(changeset): BREAKING CHANGE(pyro-mui-joy): prefix all css variables with '--joy' BREAKING CHANGE(pyro-mui-joy): prefix all css variables with '--joy' --- .changeset/odd-steaks-film.md | 5 + .../pyro-mui-joy/src/classes/background.css | 18 +- .../pyro-mui-joy/src/classes/buttongroup.css | 74 +- packages/pyro-mui-joy/src/classes/card.css | 189 ++-- packages/pyro-mui-joy/src/classes/chip.css | 166 +-- packages/pyro-mui-joy/src/classes/divider.css | 50 +- packages/pyro-mui-joy/src/classes/dock.css | 4 +- packages/pyro-mui-joy/src/classes/sheet.css | 13 +- packages/pyro-mui-joy/src/colors/dark.css | 971 ++++++++++------- packages/pyro-mui-joy/src/colors/light.css | 980 +++++++++++------- packages/pyro-mui-joy/src/common/fonts.css | 62 +- packages/pyro-mui-joy/src/common/global.css | 8 +- packages/pyro-mui-joy/src/common/mixins.css | 68 +- packages/pyro-mui-joy/src/common/palettes.css | 36 +- packages/pyro-mui-joy/src/common/radius.css | 12 +- .../pyro-mui-joy/src/common/scrollbar.css | 6 +- packages/pyro-mui-joy/src/common/shadow.css | 67 +- .../pyro-mui-joy/src/common/typography.css | 153 +-- packages/pyro-mui-joy/src/common/variants.css | 53 +- .../pyro-mui-joy/src/components/buttons.css | 72 +- .../pyro-mui-joy/src/components/canvas.css | 38 +- .../pyro-mui-joy/src/components/dropdown.css | 307 +++--- .../src/components/numeric-entry.css | 203 ++-- .../pyro-mui-joy/src/components/pager.css | 65 +- .../pyro-mui-joy/src/components/popup.css | 6 +- .../pyro-mui-joy/src/components/slider.css | 123 +-- .../pyro-mui-joy/src/components/table.css | 89 +- .../pyro-mui-joy/src/components/text-area.css | 90 +- .../src/components/text-field.css | 97 +- .../pyro-mui-joy/src/components/toggle.css | 133 +-- .../pyro-mui-joy/src/designer/selection.css | 2 +- 31 files changed, 2333 insertions(+), 1827 deletions(-) create mode 100644 .changeset/odd-steaks-film.md diff --git a/.changeset/odd-steaks-film.md b/.changeset/odd-steaks-film.md new file mode 100644 index 0000000..e749078 --- /dev/null +++ b/.changeset/odd-steaks-film.md @@ -0,0 +1,5 @@ +--- +'@mussonindustrial/pyro-mui-joy': minor +--- + +BREAKING CHANGE(pyro-mui-joy): prefix all css variables with '--joy' diff --git a/packages/pyro-mui-joy/src/classes/background.css b/packages/pyro-mui-joy/src/classes/background.css index afa72ef..4bc6689 100644 --- a/packages/pyro-mui-joy/src/classes/background.css +++ b/packages/pyro-mui-joy/src/classes/background.css @@ -1,32 +1,32 @@ [psc='Joy/Background/body'] { - background-color: var(--palette-background-body); + background-color: var(--joy-palette-background-body); } [psc='Joy/Background/surface'] { - background-color: var(--palette-background-surface); + background-color: var(--joy-palette-background-surface); } [psc='Joy/Background/popup'] { - background-color: var(--palette-background-popup); + background-color: var(--joy-palette-background-popup); } [psc='Joy/Background/level1'] { - background-color: var(--palette-background-level1); + background-color: var(--joy-palette-background-level1); } [psc='Joy/Background/level2'] { - background-color: var(--palette-background-level2); + background-color: var(--joy-palette-background-level2); } [psc='Joy/Background/level3'] { - background-color: var(--palette-background-level3); + background-color: var(--joy-palette-background-level3); } [psc='Joy/Background/backdrop'] { - background-color: var(--palette-background-backdrop); + background-color: var(--joy-palette-background-backdrop); } [psc='Joy/Background/highlight'] { - background-color: var(--palette-background-highlight); - background-image: var(--palette-background-highlight-image); + background-color: var(--joy-palette-background-highlight); + background-image: var(--joy-palette-background-highlight-image); } diff --git a/packages/pyro-mui-joy/src/classes/buttongroup.css b/packages/pyro-mui-joy/src/classes/buttongroup.css index d3091e6..bb1b58d 100644 --- a/packages/pyro-mui-joy/src/classes/buttongroup.css +++ b/packages/pyro-mui-joy/src/classes/buttongroup.css @@ -19,55 +19,59 @@ $gaps: (5px, 10px); } */ [psc='Joy/Container/buttongroup-connected'] { - --ButtonGroup-separatorSize: 1px; - --ButtonGroup-separatorColor: var( - --variant-outlinedBorder, + --joy-ButtonGroup-separatorSize: 1px; + --joy-ButtonGroup-separatorColor: var( + --joy-variant-outlinedBorder, var( - --palette-neutral-outlinedBorder, - var(--palette-neutral-300, #cdd7e1) + --joy-palette-neutral-outlinedBorder, + var(--joy-palette-neutral-300, #cdd7e1) ) ); - --ButtonGroup-radius: var(--radius-sm); - --Divider-inset: 0.5rem; - --unstable_childRadius: calc( - (1 - var(--ButtonGroup-connected)) * var(--ButtonGroup-radius) - - var(--variant-borderWidth, 0px) + --joy-ButtonGroup-radius: var(--joy-radius-sm); + --joy-Divider-inset: 0.5rem; + --joy-unstable_childRadius: calc( + (1 - var(--joy-ButtonGroup-connected)) * var(--joy-ButtonGroup-radius) - + var(--joy-variant-borderWidth, 0px) ); - --ButtonGroup-connected: 1; + --joy-ButtonGroup-connected: 1; gap: 0px; - border-radius: var(--ButtonGroup-radius); + border-radius: var(--joy-ButtonGroup-radius); & > :first-child { - --Button-radius: var(--ButtonGroup-radius) var(--unstable_childRadius) - var(--unstable_childRadius) var(--ButtonGroup-radius); - --IconButton-radius: var(--ButtonGroup-radius) - var(--unstable_childRadius) var(--unstable_childRadius) - var(--ButtonGroup-radius); - border-right: var(--ButtonGroup-separatorSize) solid - var(--ButtonGroup-separatorColor); + --joy-Button-radius: var(--joy-ButtonGroup-radius) + var(--joy-unstable_childRadius) var(--joy-unstable_childRadius) + var(--joy-ButtonGroup-radius); + --joy-IconButton-radius: var(--joy-ButtonGroup-radius) + var(--joy-unstable_childRadius) var(--joy-unstable_childRadius) + var(--joy-ButtonGroup-radius); + border-right: var(--joy-ButtonGroup-separatorSize) solid + var(--joy-ButtonGroup-separatorColor); } & > :last-child { - --Button-radius: var(--unstable_childRadius) var(--ButtonGroup-radius) - var(--ButtonGroup-radius) var(--unstable_childRadius); - --IconButton-radius: var(--unstable_childRadius) - var(--ButtonGroup-radius) var(--ButtonGroup-radius) - var(--unstable_childRadius); - border-left: var(--ButtonGroup-separatorSize) solid - var(--ButtonGroup-separatorColor); + --joy-Button-radius: var(--joy-unstable_childRadius) + var(--joy-ButtonGroup-radius) var(--joy-ButtonGroup-radius) + var(--joy-unstable_childRadius); + --joy-IconButton-radius: var(--joy-unstable_childRadius) + var(--joy-ButtonGroup-radius) var(--joy-ButtonGroup-radius) + var(--joy-unstable_childRadius); + border-left: var(--joy-ButtonGroup-separatorSize) solid + var(--joy-ButtonGroup-separatorColor); } & > :not(:first-child):not(:only-child) { - --Button-margin: 0 0 0 calc(var(--ButtonGroup-separatorSize) * -1); - --IconButton-margin: 0 0 0 calc(var(--ButtonGroup-separatorSize) * -1); + --joy-Button-margin: 0 0 0 + calc(var(--joy-ButtonGroup-separatorSize) * -1); + --joy-IconButton-margin: 0 0 0 + calc(var(--joy-ButtonGroup-separatorSize) * -1); } & > :not(:first-child):not(:last-child):not(:only-child) { - --Button-radius: var(--unstable_childRadius); - --IconButton-radius: var(--unstable_childRadius); - border-radius: var(--unstable_childRadius); - border-left: var(--ButtonGroup-separatorSize) solid - var(--ButtonGroup-separatorColor); - border-right: var(--ButtonGroup-separatorSize) solid - var(--ButtonGroup-separatorColor); + --joy-Button-radius: var(--joy-unstable_childRadius); + --joy-IconButton-radius: var(--joy-unstable_childRadius); + border-radius: var(--joy-unstable_childRadius); + border-left: var(--joy-ButtonGroup-separatorSize) solid + var(--joy-ButtonGroup-separatorColor); + border-right: var(--joy-ButtonGroup-separatorSize) solid + var(--joy-ButtonGroup-separatorColor); } } diff --git a/packages/pyro-mui-joy/src/classes/card.css b/packages/pyro-mui-joy/src/classes/card.css index 423d008..6feb565 100644 --- a/packages/pyro-mui-joy/src/classes/card.css +++ b/packages/pyro-mui-joy/src/classes/card.css @@ -7,45 +7,45 @@ @include palette-default(Card, neutral); /* Calculations */ - --Card-childRadius: max( - (var(--Card-radius) - var(--variant-borderWidth, 0px)) - - var(--Card-padding), + --joy-Card-childRadius: max( + (var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)) - + var(--joy-Card-padding), min( - var(--Card-padding) / 2, - (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2 + var(--joy-Card-padding) / 2, + (var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)) / 2 ) ); - --AspectRatio-radius: var(--Card-childRadius); - --unstable_actionMargin: calc(-1 * var(--variant-borderWidth, 0px)); - --unstable_actionRadius: var(--Card-radius); - --CardCover-radius: calc( - var(--Card-radius) - var(--variant-borderWidth, 0px) + --joy-AspectRatio-radius: var(--joy-Card-childRadius); + --joy-unstable_actionMargin: calc(-1 * var(--joy-variant-borderWidth, 0px)); + --joy-unstable_actionRadius: var(--joy-Card-radius); + --joy-CardCover-radius: calc( + var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px) ); - --CardOverflow-offset: calc(-1 * var(--Card-padding)); - --CardOverflow-radius: calc( - var(--Card-radius) - var(--variant-borderWidth, 0px) + --joy-CardOverflow-offset: calc(-1 * var(--joy-Card-padding)); + --joy-CardOverflow-radius: calc( + var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px) ); - --Divider-inset: calc(-1 * var(--Card-padding)); + --joy-Divider-inset: calc(-1 * var(--joy-Card-padding)); /* Default to medium size */ - --Card-radius: var(--radius-md); - --Card-padding: 1rem; + --joy-Card-radius: var(--joy-radius-md); + --joy-Card-padding: 1rem; - padding: var(--Card-padding); - border-radius: var(--Card-radius); - /* box-shadow: var(--shadow-sm); */ - font-family: var(--fontFamily-body); + padding: var(--joy-Card-padding); + border-radius: var(--joy-Card-radius); + /* box-shadow: var(--joy-shadow-sm); */ + font-family: var(--joy-fontFamily-body); position: relative; /* Defaults */ border-style: none; /* Variant */ - color: var(--Card-Color); - background-color: var(--Card-Bg, var(--palette-background-surface)); - border-color: var(--Card-Border); - border-width: var(--Card-borderWidth); - border-style: var(--Card-borderStyle); + color: var(--joy-Card-Color); + background-color: var(--joy-Card-Bg, var(--joy-palette-background-surface)); + border-color: var(--joy-Card-Border); + border-width: var(--joy-Card-borderWidth); + border-style: var(--joy-Card-borderStyle); } [psc='Joy/Size/sm'] [psc='Joy/Container/card'], @@ -54,8 +54,8 @@ [psc='Joy/Size/sm'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'], [psc='Joy/Size/sm'] [psc='Joy/Container/card-vertical'], [psc='Joy/Size/sm'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] { - --Card-radius: var(--radius-sm); - --Card-padding: 0.5rem; + --joy-Card-radius: var(--joy-radius-sm); + --joy-Card-padding: 0.5rem; } [psc='Joy/Size/md'] [psc='Joy/Container/card'], @@ -64,8 +64,8 @@ [psc='Joy/Size/md'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'], [psc='Joy/Size/md'] [psc='Joy/Container/card-vertical'], [psc='Joy/Size/md'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] { - --Card-radius: var(--radius-md); - --Card-padding: 1rem; + --joy-Card-radius: var(--joy-radius-md); + --joy-Card-padding: 1rem; } [psc='Joy/Size/lg'] [psc='Joy/Container/card'], @@ -74,20 +74,20 @@ [psc='Joy/Size/lg'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'], [psc='Joy/Size/lg'] [psc='Joy/Container/card-vertical'], [psc='Joy/Size/lg'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] { - --Card-radius: var(--radius-lg); - --Card-padding: 1.5rem; - font-size: var(--fontSize-md); + --joy-Card-radius: var(--joy-radius-lg); + --joy-Card-padding: 1.5rem; + font-size: var(--joy-fontSize-md); } [psc='Joy/Container/card-overflow'] { align-self: stretch; position: relative; display: flex; - flex-direction: var(--_CardOverflow-flexDirection); - margin: var(--_CardOverflow-margin); - border-radius: var(--_CardOverflow-radius); - padding: var(--_CardOverflow-padding); - --variant-borderWidth: 0px; + flex-direction: var(--joy-_CardOverflow-flexDirection); + margin: var(--joy-_CardOverflow-margin); + border-radius: var(--joy-_CardOverflow-radius); + padding: var(--joy-_CardOverflow-padding); + --joy-variant-borderWidth: 0px; } [psc='Joy/Container/card-cover'] { @@ -99,80 +99,101 @@ top: 0px; bottom: 0px; z-index: 0; - /* flex-direction: var(--_CardOverflow-flexDirection); */ - /* margin: var(--_CardOverflow-margin); */ - border-radius: var(--CardCover-radius); - /* --variant-borderWidth: 0px; */ + /* flex-direction: var(--joy-_CardOverflow-flexDirection); */ + /* margin: var(--joy-_CardOverflow-margin); */ + border-radius: var(--joy-CardCover-radius); + /* --joy-variant-borderWidth: 0px; */ } [psc='Joy/Container/card-vertical'] { - --_CardOverflow-flexDirection: column; - --AspectRatio-margin: 0 calc(-1 * var(--Card-padding)); - --_CardOverflow-margin: 0 var(--CardOverflow-offset); - --_CardOverflow-padding: 0 var(--Card-padding); + --joy-_CardOverflow-flexDirection: column; + --joy-AspectRatio-margin: 0 calc(-1 * var(--joy-Card-padding)); + --joy-_CardOverflow-margin: 0 var(--joy-CardOverflow-offset); + --joy-_CardOverflow-padding: 0 var(--joy-Card-padding); - flex-direction: var(--_CardOverflow-flexDirection) !important; + flex-direction: var(--joy-_CardOverflow-flexDirection) !important; > [psc='Joy/Container/card-overflow']:first-child { - --AspectRatio-radius: calc( - var(--CardOverflow-radius) - var(--variant-borderWidth, 0px) + --joy-AspectRatio-radius: calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) ) - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)) 0 - 0; - --_CardOverflow-radius: var(--CardOverflow-radius) - var(--CardOverflow-radius) 0 0; - --_CardOverflow-margin: var(--CardOverflow-offset) - var(--CardOverflow-offset) 0; + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ) + 0 0; + --joy-_CardOverflow-radius: var(--joy-CardOverflow-radius) + var(--joy-CardOverflow-radius) 0 0; + --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) + var(--joy-CardOverflow-offset) 0; } > [psc='Joy/Container/card-overflow'] { - --_CardOverflow-margin: var(--CardOverflow-offset) - var(--CardOverflow-offset) 0 0; + --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) + var(--joy-CardOverflow-offset) 0 0; } > [psc='Joy/Container/card-overflow']:last-child { - --AspectRatio-radius: 0 0 - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)) - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)); - --_CardOverflow-radius: 0 0 var(--CardOverflow-radius) - var(--CardOverflow-radius); - --_CardOverflow-margin: 0 var(--CardOverflow-offset) - var(--CardOverflow-offset); + --joy-AspectRatio-radius: 0 0 + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ) + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ); + --joy-_CardOverflow-radius: 0 0 var(--joy-CardOverflow-radius) + var(--joy-CardOverflow-radius); + --joy-_CardOverflow-margin: 0 var(--joy-CardOverflow-offset) + var(--joy-CardOverflow-offset); } } [psc='Joy/Container/card-horizontal'] { - --_CardOverflow-flexDirection: row; - --AspectRatio-margin: 0 calc(-1 * var(--Card-padding)); - --_CardOverflow-margin: var(--CardOverflow-offset) 0; - --_CardOverflow-padding: var(--Card-padding) 0; + --joy-_CardOverflow-flexDirection: row; + --joy-AspectRatio-margin: 0 calc(-1 * var(--joy-Card-padding)); + --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) 0; + --joy-_CardOverflow-padding: var(--joy-Card-padding) 0; - flex-direction: var(--_CardOverflow-flexDirection) !important; + flex-direction: var(--joy-_CardOverflow-flexDirection) !important; > [psc='Joy/Container/card-overflow']:first-child { - --AspectRatio-radius: calc( - var(--CardOverflow-radius) - var(--variant-borderWidth, 0px) + --joy-AspectRatio-radius: calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) ) 0 0 - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)); - --_CardOverflow-radius: var(--CardOverflow-radius) 0 0 - var(--CardOverflow-radius); - --_CardOverflow-margin: var(--CardOverflow-offset) 0px - var(--CardOverflow-offset) var(--CardOverflow-offset); + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ); + --joy-_CardOverflow-radius: var(--joy-CardOverflow-radius) 0 0 + var(--joy-CardOverflow-radius); + --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) 0px + var(--joy-CardOverflow-offset) var(--joy-CardOverflow-offset); } > [psc='Joy/Container/card-overflow'] { - --_CardOverflow-margin: 0px 0px var(--CardOverflow-offset) - var(--CardOverflow-offset); + --joy-_CardOverflow-margin: 0px 0px var(--joy-CardOverflow-offset) + var(--joy-CardOverflow-offset); } > [psc='Joy/Container/card-overflow']:last-child { - --AspectRatio-radius: 0 - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)) - calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px)) 0; - --_CardOverflow-radius: 0 var(--CardOverflow-radius) - var(--CardOverflow-radius) 0; - --_CardOverflow-margin: var(--CardOverflow-offset) - var(--CardOverflow-offset) var(--CardOverflow-offset) 0px; + --joy-AspectRatio-radius: 0 + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ) + calc( + var(--joy-CardOverflow-radius) - + var(--joy-variant-borderWidth, 0px) + ) + 0; + --joy-_CardOverflow-radius: 0 var(--joy-CardOverflow-radius) + var(--joy-CardOverflow-radius) 0; + --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) + var(--joy-CardOverflow-offset) var(--joy-CardOverflow-offset) 0px; } } diff --git a/packages/pyro-mui-joy/src/classes/chip.css b/packages/pyro-mui-joy/src/classes/chip.css index dd08b3d..67be316 100644 --- a/packages/pyro-mui-joy/src/classes/chip.css +++ b/packages/pyro-mui-joy/src/classes/chip.css @@ -4,50 +4,53 @@ @include variant-default(Chip, outlined); @include palette-default(Chip, neutral); - --Chip-decoratorChildOffset: min( + --joy-Chip-decoratorChildOffset: min( calc( - var(--Chip-paddingInline) - + var(--joy-Chip-paddingInline) - ( - var(--_Chip-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Chip-decoratorChildHeight) + var(--joy-_Chip-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Chip-decoratorChildHeight) ) / 2 ), - var(--Chip-paddingInline) + var(--joy-Chip-paddingInline) ); - --Chip-decoratorChildRadius: max( - var(--_Chip-radius) - var(--variant-borderWidth, 0px) - - var(--_Chip-paddingBlock), + --joy-Chip-decoratorChildRadius: max( + var(--joy-_Chip-radius) - var(--joy-variant-borderWidth, 0px) - + var(--joy-_Chip-paddingBlock), min( - var(--_Chip-paddingBlock) + var(--variant-borderWidth, 0px), - var(--_Chip-radius) / 2 + var(--joy-_Chip-paddingBlock) + var(--joy-variant-borderWidth, 0px), + var(--joy-_Chip-radius) / 2 ) ); - --Chip-deleteRadius: var(--Chip-decoratorChildRadius); - --Chip-deleteSize: var(--Chip-decoratorChildHeight); - --Avatar-radius: var(--Chip-decoratorChildRadius); - --Avatar-size: var(--Chip-decoratorChildHeight); - --Icon-margin: initial; - --Icon-color: currentColor; - --unstable_actionRadius: var(--_Chip-radius); - --_Chip-radius: var(--Chip-radius, 1.5rem); - --_Chip-paddingBlock: max( + --joy-Chip-deleteRadius: var(--joy-Chip-decoratorChildRadius); + --joy-Chip-deleteSize: var(--joy-Chip-decoratorChildHeight); + --joy-Avatar-radius: var(--joy-Chip-decoratorChildRadius); + --joy-Avatar-size: var(--joy-Chip-decoratorChildHeight); + --joy-Icon-margin: initial; + --joy-Icon-color: currentColor; + --joy-unstable_actionRadius: var(--joy-_Chip-radius); + --joy-_Chip-radius: var(--joy-Chip-radius, 1.5rem); + --joy-_Chip-paddingBlock: max( ( - var(--_Chip-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Chip-decoratorChildHeight) + var(--joy-_Chip-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Chip-decoratorChildHeight) ) / 2, 0px ); - --Chip-deleteMargin: 0 calc(var(--Chip-decoratorChildOffset) * -1) 0 0; + --joy-Chip-deleteMargin: 0 calc(var(--joy-Chip-decoratorChildOffset) * -1) 0 + 0; - min-height: var(--_Chip-minHeight); + min-height: var(--joy-_Chip-minHeight); max-width: max-content; - padding-inline: var(--Chip-paddingInline); - border-radius: var(--_Chip-radius); - gap: var(--Chip-gap); - line-height: var(--lineHeight-md); - font-weight: var(--fontWeight-md); - font-family: var(--fontFamily-body); + padding-inline: var(--joy-Chip-paddingInline); + border-radius: var(--joy-_Chip-radius); + gap: var(--joy-Chip-gap); + line-height: var(--joy-lineHeight-md); + font-weight: var(--joy-fontWeight-md); + font-family: var(--joy-fontFamily-body); display: inline-flex; white-space: nowrap; @@ -61,68 +64,72 @@ justify-content: center !important; /* Default to medium size */ - --Chip-gap: 0.25rem; - --Chip-paddingInline: 0.5rem; - --Chip-decoratorChildHeight: calc( - var(--_Chip-minHeight) - 0.25rem - 2 * var(--variant-borderWidth) + --joy-Chip-gap: 0.25rem; + --joy-Chip-paddingInline: 0.5rem; + --joy-Chip-decoratorChildHeight: calc( + var(--joy-_Chip-minHeight) - 0.25rem - 2 * + var(--joy-variant-borderWidth) ); - --Icon-fontSize: var(--fontSize-md); - --_Chip-minHeight: var(--Chip-minHeight, 1.5rem); - font-size: var(--fontSize-sm); + --joy-Icon-fontSize: var(--joy-fontSize-md); + --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.5rem); + font-size: var(--joy-fontSize-sm); /* Defaults */ border-style: none; /* Variant */ - color: var(--Chip-Color); - background-color: var(--Chip-Bg); - border-color: var(--Chip-Border); - border-width: var(--Chip-borderWidth); - border-style: var(--Chip-borderStyle); + color: var(--joy-Chip-Color); + background-color: var(--joy-Chip-Bg); + border-color: var(--joy-Chip-Border); + border-width: var(--joy-Chip-borderWidth); + border-style: var(--joy-Chip-borderStyle); &[psc='Joy/Size/sm'] { - --Chip-gap: 0.125rem; - --Chip-paddingInline: 0.375rem; - --Chip-decoratorChildHeight: calc( - var(--_Chip-minHeight) - 2 * var(--variant-borderWidth) + --joy-Chip-gap: 0.125rem; + --joy-Chip-paddingInline: 0.375rem; + --joy-Chip-decoratorChildHeight: calc( + var(--joy-_Chip-minHeight) - 2 * var(--joy-variant-borderWidth) ); - --Icon-fontSize: var(--fontSize-sm); - --_Chip-minHeight: var(--Chip-minHeight, 1.25rem); - font-size: var(--fontSize-xs); + --joy-Icon-fontSize: var(--joy-fontSize-sm); + --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.25rem); + font-size: var(--joy-fontSize-xs); } &[psc='Joy/Size/md'] { - --Chip-gap: 0.25rem; - --Chip-paddingInline: 0.5rem; - --Chip-decoratorChildHeight: calc( - var(--_Chip-minHeight) - 0.25rem - 2 * var(--variant-borderWidth) + --joy-Chip-gap: 0.25rem; + --joy-Chip-paddingInline: 0.5rem; + --joy-Chip-decoratorChildHeight: calc( + var(--joy-_Chip-minHeight) - 0.25rem - 2 * + var(--joy-variant-borderWidth) ); - --Icon-fontSize: var(--fontSize-md); - --_Chip-minHeight: var(--Chip-minHeight, 1.5rem); - font-size: var(--fontSize-sm); + --joy-Icon-fontSize: var(--joy-fontSize-md); + --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.5rem); + font-size: var(--joy-fontSize-sm); } &[psc='Joy/Size/lg'] { - --Chip-gap: 0.375rem; - --Chip-paddingInline: 0.75rem; - --Chip-decoratorChildHeight: calc( - var(--_Chip-minHeight) - 0.375rem - 2 * var(--variant-borderWidth) + --joy-Chip-gap: 0.375rem; + --joy-Chip-paddingInline: 0.75rem; + --joy-Chip-decoratorChildHeight: calc( + var(--joy-_Chip-minHeight) - 0.375rem - 2 * + var(--joy-variant-borderWidth) ); - --Icon-fontSize: var(--fontSize-lg); - --_Chip-minHeight: var(--Chip-minHeight, 1.75rem); - font-size: var(--fontSize-md); + --joy-Icon-fontSize: var(--joy-fontSize-lg); + --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.75rem); + font-size: var(--joy-fontSize-md); } > *:last-child { - --IconButton-margin: 0 calc(var(--Chip-decoratorChildOffset) * -1) 0 - calc(-1 * var(--Chip-paddingInline) / 3); - --Icon-margin: 0 calc(var(--Chip-paddingInline) / -4) 0 0; + --joy-IconButton-margin: 0 + calc(var(--joy-Chip-decoratorChildOffset) * -1) 0 + calc(-1 * var(--joy-Chip-paddingInline) / 3); + --joy-Icon-margin: 0 calc(var(--joy-Chip-paddingInline) / -4) 0 0; } > *:first-child { - --IconButton-margin: 0 calc(-1 * var(--Chip-paddingInline) / 3) 0 - calc(var(--Chip-decoratorChildOffset) * -1); - --Icon-margin: 0 0 0 calc(var(--Chip-paddingInline) / -4); + --joy-IconButton-margin: 0 calc(-1 * var(--joy-Chip-paddingInline) / 3) + 0 calc(var(--joy-Chip-decoratorChildOffset) * -1); + --joy-Icon-margin: 0 0 0 calc(var(--joy-Chip-paddingInline) / -4); } svg { @@ -133,11 +140,14 @@ fill: currentColor; flex: 0 0 auto !important; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - margin: var(--Icon-margin); - font-size: var(--Icon-fontSize, var(--fontSize-xl2)); + margin: var(--joy-Icon-margin); + font-size: var(--joy-Icon-fontSize, var(--joy-fontSize-xl2)); color: var( - --Icon-color, - var(--palette-text-icon, var(--palette-neutral-500, #636b74)) + --joy-Icon-color, + var( + --joy-palette-text-icon, + var(--joy-palette-neutral-500, #636b74) + ) ); } } @@ -166,11 +176,11 @@ [psc='Joy/Container/chip-delete'][data-component='ia.input.button'], [psc='Joy/Container/chip-button'] [psc='Joy/Container/chip-delete'][data-component='ia.input.button'] { - --IconButton-size: var(--Chip-deleteSize, 2rem); - border-radius: var(--Chip-deleteRadius); - min-width: var(--IconButton-size, 2rem); - min-height: var(--IconButton-size, 2rem); - margin: var(--IconButton-margin); + --joy-IconButton-size: var(--joy-Chip-deleteSize, 2rem); + border-radius: var(--joy-Chip-deleteRadius); + min-width: var(--joy-IconButton-size, 2rem); + min-height: var(--joy-IconButton-size, 2rem); + margin: var(--joy-IconButton-margin); padding: 0px; } @@ -178,6 +188,6 @@ .responsive-container > [psc='Joy/Container/chip'], .responsive-container > [psc='Joy/Container/chip-button'] { - min-height: var(--_Chip-minHeight); + min-height: var(--joy-_Chip-minHeight); max-width: max-content; } diff --git a/packages/pyro-mui-joy/src/classes/divider.css b/packages/pyro-mui-joy/src/classes/divider.css index 57aecd4..10bdcd0 100644 --- a/packages/pyro-mui-joy/src/classes/divider.css +++ b/packages/pyro-mui-joy/src/classes/divider.css @@ -1,18 +1,18 @@ /* A divider is a thin line that groups content in lists and layouts. */ [psc='Joy/Container/divider-horizontal'], [psc='Joy/Container/divider-vertical'] { - --Divider-thickness: 1px; - --Divider-lineColor: var(--palette-divider); - --Divider-gap: 8px; - --Divider-childPosition: 50%; + --joy-Divider-thickness: 1px; + --joy-Divider-lineColor: var(--joy-palette-divider); + --joy-Divider-gap: 8px; + --joy-Divider-childPosition: 50%; white-space: nowrap; border: 0px; - font-family: var(--joy-fontFamily-body); - font-size: var(--joy-fontSize-sm); + font-family: var(--joy-joy-fontFamily-body); + font-size: var(--joy-joy-fontSize-sm); padding: 0px !important; &:empty { - background-color: var(--Divider-lineColor); + background-color: var(--joy-Divider-lineColor); &:before, &:after { @@ -23,50 +23,50 @@ &:before, &:after { position: relative; - background-color: var(--Divider-lineColor); + background-color: var(--joy-Divider-lineColor); content: ''; } &:before { - flex-basis: var(--Divider-childPosition); + flex-basis: var(--joy-Divider-childPosition); } &:after { - flex-basis: calc(100% - var(--Divider-childPosition)); + flex-basis: calc(100% - var(--joy-Divider-childPosition)); } &[psc='Joy/Container/card-overflow'] { - --_Divider-inset: var(--Divider-inset, 0px); + --joy-_Divider-inset: var(--joy-Divider-inset, 0px); } } [psc='Joy/Container/divider-horizontal'] { - margin-inline: var(--_Divider-inset); + margin-inline: var(--joy-_Divider-inset); margin-block: initial; &:empty { inline-size: initial; - block-size: var(--Divider-thickness); + block-size: var(--joy-Divider-thickness); } &:before, &:after { inline-size: initial; - block-size: var(--Divider-thickness); + block-size: var(--joy-Divider-thickness); } &:before { margin-inline-end: min( - var(--Divider-childPosition) * 999, - var(--Divider-gap) + var(--joy-Divider-childPosition) * 999, + var(--joy-Divider-gap) ); margin-block-end: initial; } &:after { margin-inline-start: min( - (100% - var(--Divider-childPosition)) * 999, - var(--Divider-gap) + (100% - var(--joy-Divider-childPosition)) * 999, + var(--joy-Divider-gap) ); margin-block-start: initial; } @@ -74,32 +74,32 @@ [psc='Joy/Container/divider-vertical'] { margin-inline: initial; - margin-block: var(--_Divider-inset); + margin-block: var(--joy-_Divider-inset); &:empty { - inline-size: var(--Divider-thickness); + inline-size: var(--joy-Divider-thickness); block-size: initial; } &:before, &:after { - inline-size: var(--Divider-thickness); + inline-size: var(--joy-Divider-thickness); block-size: initial; } &:before { margin-inline-end: initial; margin-block-end: min( - var(--Divider-childPosition) * 999, - var(--Divider-gap) + var(--joy-Divider-childPosition) * 999, + var(--joy-Divider-gap) ); } &:after { margin-inline-start: initial; margin-block-start: min( - (100% - var(--Divider-childPosition)) * 999, - var(--Divider-gap) + (100% - var(--joy-Divider-childPosition)) * 999, + var(--joy-Divider-gap) ); } } diff --git a/packages/pyro-mui-joy/src/classes/dock.css b/packages/pyro-mui-joy/src/classes/dock.css index ddbbc28..8db9448 100644 --- a/packages/pyro-mui-joy/src/classes/dock.css +++ b/packages/pyro-mui-joy/src/classes/dock.css @@ -6,7 +6,7 @@ z-index: -10; background-color: color-mix( in srgb, - var(--palette-background-popup) 85%, + var(--joy-palette-background-popup) 85%, transparent ); backdrop-filter: blur(10px); @@ -16,5 +16,5 @@ .docked-view.dock-cover-shadow-right, .docked-view.dock-cover-shadow-top, .docked-view.dock-cover-shadow-bottom { - box-shadow: var(--shadow-xl); + box-shadow: var(--joy-shadow-xl); } diff --git a/packages/pyro-mui-joy/src/classes/sheet.css b/packages/pyro-mui-joy/src/classes/sheet.css index e35e676..e51b79d 100644 --- a/packages/pyro-mui-joy/src/classes/sheet.css +++ b/packages/pyro-mui-joy/src/classes/sheet.css @@ -5,9 +5,12 @@ @include palette-default(Sheet, neutral); /* Variant */ - color: var(--Sheet-Color); - background-color: var(--Sheet-Bg, var(--joy-palette-background-surface)); - border-color: var(--Sheet-Border); - border-width: var(--Sheet-borderWidth); - border-style: var(--Sheet-borderStyle); + color: var(--joy-Sheet-Color); + background-color: var( + --joy-Sheet-Bg, + var(--joy-joy-palette-background-surface) + ); + border-color: var(--joy-Sheet-Border); + border-width: var(--joy-Sheet-borderWidth); + border-style: var(--joy-Sheet-borderStyle); } diff --git a/packages/pyro-mui-joy/src/colors/dark.css b/packages/pyro-mui-joy/src/colors/dark.css index 7bf87ca..64989b2 100644 --- a/packages/pyro-mui-joy/src/colors/dark.css +++ b/packages/pyro-mui-joy/src/colors/dark.css @@ -1,277 +1,466 @@ :root { /* Dark Theme */ - /* --background-color: rgb(0, 30, 60); */ - --background-color: rgb(16, 20, 24); - --palette-primary-50: #edf5fd; - --palette-primary-100: #e3effb; - --palette-primary-200: #c7dff7; - --palette-primary-300: #97c3f0; - --palette-primary-400: #4393e4; - --palette-primary-500: #0b6bcb; - --palette-primary-600: #185ea5; - --palette-primary-700: #12467b; - --palette-primary-800: #0a2744; - --palette-primary-900: #051423; - --palette-primary-plainColor: var(--palette-primary-300, #97c3f0); - --palette-primary-plainHoverBg: var(--palette-primary-800, #0a2744); - --palette-primary-plainActiveBg: var(--palette-primary-700, #12467b); - --palette-primary-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-primary-outlinedColor: var(--palette-primary-200, #c7dff7); - --palette-primary-outlinedBorder: var(--palette-primary-700, #12467b); - --palette-primary-outlinedHoverBg: var(--palette-primary-800, #0a2744); - --palette-primary-outlinedActiveBg: var(--palette-primary-700, #12467b); - --palette-primary-outlinedDisabledColor: var( - --palette-neutral-500, + /* --joy-background-color: rgb(0, 30, 60); */ + --joy-background-color: rgb(16, 20, 24); + --joy-palette-primary-50: #edf5fd; + --joy-palette-primary-100: #e3effb; + --joy-palette-primary-200: #c7dff7; + --joy-palette-primary-300: #97c3f0; + --joy-palette-primary-400: #4393e4; + --joy-palette-primary-500: #0b6bcb; + --joy-palette-primary-600: #185ea5; + --joy-palette-primary-700: #12467b; + --joy-palette-primary-800: #0a2744; + --joy-palette-primary-900: #051423; + --joy-palette-primary-plainColor: var(--joy-palette-primary-300, #97c3f0); + --joy-palette-primary-plainHoverBg: var(--joy-palette-primary-800, #0a2744); + --joy-palette-primary-plainActiveBg: var( + --joy-palette-primary-700, + #12467b + ); + --joy-palette-primary-plainDisabledColor: var( + --joy-palette-neutral-500, #636b74 ); - --palette-primary-outlinedDisabledBorder: var( - --palette-neutral-800, + --joy-palette-primary-outlinedColor: var( + --joy-palette-primary-200, + #c7dff7 + ); + --joy-palette-primary-outlinedBorder: var( + --joy-palette-primary-700, + #12467b + ); + --joy-palette-primary-outlinedHoverBg: var( + --joy-palette-primary-800, + #0a2744 + ); + --joy-palette-primary-outlinedActiveBg: var( + --joy-palette-primary-700, + #12467b + ); + --joy-palette-primary-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-primary-outlinedDisabledBorder: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-primary-softColor: var(--joy-palette-primary-200, #c7dff7); + --joy-palette-primary-softBg: var(--joy-palette-primary-800, #0a2744); + --joy-palette-primary-softHoverBg: var(--joy-palette-primary-700, #12467b); + --joy-palette-primary-softActiveColor: var( + --joy-palette-primary-100, + #e3effb + ); + --joy-palette-primary-softActiveBg: var(--joy-palette-primary-600, #185ea5); + --joy-palette-primary-softDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-primary-softDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-primary-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-primary-solidBg: var(--joy-palette-primary-500, #0b6bcb); + --joy-palette-primary-solidHoverBg: var(--joy-palette-primary-600, #185ea5); + --joy-palette-primary-solidActiveBg: var( + --joy-palette-primary-700, + #12467b + ); + --joy-palette-primary-solidDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-primary-solidDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-primary-mainChannel: 67 147 228; + --joy-palette-primary-lightChannel: 199 223 247; + --joy-palette-primary-darkChannel: 18 70 123; + --joy-palette-neutral-50: #fbfcfe; + --joy-palette-neutral-100: #f0f4f8; + --joy-palette-neutral-200: #dde7ee; + --joy-palette-neutral-300: #cdd7e1; + --joy-palette-neutral-400: #9fa6ad; + --joy-palette-neutral-500: #636b74; + --joy-palette-neutral-600: #555e68; + --joy-palette-neutral-700: #32383e; + --joy-palette-neutral-800: #171a1c; + --joy-palette-neutral-900: #0b0d0e; + --joy-palette-neutral-plainColor: var(--joy-palette-neutral-300, #cdd7e1); + --joy-palette-neutral-plainHoverBg: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-neutral-plainActiveBg: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-plainDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-neutral-outlinedColor: var( + --joy-palette-neutral-200, + #dde7ee + ); + --joy-palette-neutral-outlinedBorder: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-outlinedHoverBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-neutral-outlinedActiveBg: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-neutral-outlinedDisabledBorder: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-neutral-softColor: var(--joy-palette-neutral-200, #dde7ee); + --joy-palette-neutral-softBg: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-neutral-softHoverBg: var(--joy-palette-neutral-700, #32383e); + --joy-palette-neutral-softActiveColor: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-neutral-softActiveBg: var(--joy-palette-neutral-600, #555e68); + --joy-palette-neutral-softDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-neutral-softDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-neutral-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-neutral-solidBg: var(--joy-palette-neutral-500, #636b74); + --joy-palette-neutral-solidHoverBg: var(--joy-palette-neutral-600, #555e68); + --joy-palette-neutral-solidActiveBg: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-solidDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-neutral-solidDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-neutral-plainHoverColor: var( + --joy-palette-neutral-300, + #cdd7e1 + ); + --joy-palette-neutral-mainChannel: 159 166 173; + --joy-palette-neutral-lightChannel: 221 231 238; + --joy-palette-neutral-darkChannel: 50 56 62; + --joy-palette-danger-50: #fef6f6; + --joy-palette-danger-100: #fce4e4; + --joy-palette-danger-200: #f7c5c5; + --joy-palette-danger-300: #f09898; + --joy-palette-danger-400: #e47474; + --joy-palette-danger-500: #c41c1c; + --joy-palette-danger-600: #a51818; + --joy-palette-danger-700: #7d1212; + --joy-palette-danger-800: #430a0a; + --joy-palette-danger-900: #240505; + --joy-palette-danger-plainColor: var(--joy-palette-danger-300, #f09898); + --joy-palette-danger-plainHoverBg: var(--joy-palette-danger-800, #430a0a); + --joy-palette-danger-plainActiveBg: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-plainDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-danger-outlinedColor: var(--joy-palette-danger-200, #f7c5c5); + --joy-palette-danger-outlinedBorder: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-outlinedHoverBg: var( + --joy-palette-danger-800, + #430a0a + ); + --joy-palette-danger-outlinedActiveBg: var( + --joy-palette-danger-700, + #7d1212 + ); + --joy-palette-danger-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-danger-outlinedDisabledBorder: var( + --joy-palette-neutral-800, #171a1c ); - --palette-primary-softColor: var(--palette-primary-200, #c7dff7); - --palette-primary-softBg: var(--palette-primary-800, #0a2744); - --palette-primary-softHoverBg: var(--palette-primary-700, #12467b); - --palette-primary-softActiveColor: var(--palette-primary-100, #e3effb); - --palette-primary-softActiveBg: var(--palette-primary-600, #185ea5); - --palette-primary-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-primary-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-primary-solidColor: var(--palette-common-white, #fff); - --palette-primary-solidBg: var(--palette-primary-500, #0b6bcb); - --palette-primary-solidHoverBg: var(--palette-primary-600, #185ea5); - --palette-primary-solidActiveBg: var(--palette-primary-700, #12467b); - --palette-primary-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-primary-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-primary-mainChannel: 67 147 228; - --palette-primary-lightChannel: 199 223 247; - --palette-primary-darkChannel: 18 70 123; - --palette-neutral-50: #fbfcfe; - --palette-neutral-100: #f0f4f8; - --palette-neutral-200: #dde7ee; - --palette-neutral-300: #cdd7e1; - --palette-neutral-400: #9fa6ad; - --palette-neutral-500: #636b74; - --palette-neutral-600: #555e68; - --palette-neutral-700: #32383e; - --palette-neutral-800: #171a1c; - --palette-neutral-900: #0b0d0e; - --palette-neutral-plainColor: var(--palette-neutral-300, #cdd7e1); - --palette-neutral-plainHoverBg: var(--palette-neutral-800, #171a1c); - --palette-neutral-plainActiveBg: var(--palette-neutral-700, #32383e); - --palette-neutral-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-neutral-outlinedColor: var(--palette-neutral-200, #dde7ee); - --palette-neutral-outlinedBorder: var(--palette-neutral-700, #32383e); - --palette-neutral-outlinedHoverBg: var(--palette-neutral-800, #171a1c); - --palette-neutral-outlinedActiveBg: var(--palette-neutral-700, #32383e); - --palette-neutral-outlinedDisabledColor: var( - --palette-neutral-500, + --joy-palette-danger-softColor: var(--joy-palette-danger-200, #f7c5c5); + --joy-palette-danger-softBg: var(--joy-palette-danger-800, #430a0a); + --joy-palette-danger-softHoverBg: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-softActiveColor: var( + --joy-palette-danger-100, + #fce4e4 + ); + --joy-palette-danger-softActiveBg: var(--joy-palette-danger-600, #a51818); + --joy-palette-danger-softDisabledColor: var( + --joy-palette-neutral-500, #636b74 ); - --palette-neutral-outlinedDisabledBorder: var( - --palette-neutral-800, + --joy-palette-danger-softDisabledBg: var( + --joy-palette-neutral-800, #171a1c ); - --palette-neutral-softColor: var(--palette-neutral-200, #dde7ee); - --palette-neutral-softBg: var(--palette-neutral-800, #171a1c); - --palette-neutral-softHoverBg: var(--palette-neutral-700, #32383e); - --palette-neutral-softActiveColor: var(--palette-neutral-100, #f0f4f8); - --palette-neutral-softActiveBg: var(--palette-neutral-600, #555e68); - --palette-neutral-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-neutral-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-neutral-solidColor: var(--palette-common-white, #fff); - --palette-neutral-solidBg: var(--palette-neutral-500, #636b74); - --palette-neutral-solidHoverBg: var(--palette-neutral-600, #555e68); - --palette-neutral-solidActiveBg: var(--palette-neutral-700, #32383e); - --palette-neutral-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-neutral-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-neutral-plainHoverColor: var(--palette-neutral-300, #cdd7e1); - --palette-neutral-mainChannel: 159 166 173; - --palette-neutral-lightChannel: 221 231 238; - --palette-neutral-darkChannel: 50 56 62; - --palette-danger-50: #fef6f6; - --palette-danger-100: #fce4e4; - --palette-danger-200: #f7c5c5; - --palette-danger-300: #f09898; - --palette-danger-400: #e47474; - --palette-danger-500: #c41c1c; - --palette-danger-600: #a51818; - --palette-danger-700: #7d1212; - --palette-danger-800: #430a0a; - --palette-danger-900: #240505; - --palette-danger-plainColor: var(--palette-danger-300, #f09898); - --palette-danger-plainHoverBg: var(--palette-danger-800, #430a0a); - --palette-danger-plainActiveBg: var(--palette-danger-700, #7d1212); - --palette-danger-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-danger-outlinedColor: var(--palette-danger-200, #f7c5c5); - --palette-danger-outlinedBorder: var(--palette-danger-700, #7d1212); - --palette-danger-outlinedHoverBg: var(--palette-danger-800, #430a0a); - --palette-danger-outlinedActiveBg: var(--palette-danger-700, #7d1212); - --palette-danger-outlinedDisabledColor: var(--palette-neutral-500, #636b74); - --palette-danger-outlinedDisabledBorder: var( - --palette-neutral-800, + --joy-palette-danger-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-danger-solidBg: var(--joy-palette-danger-500, #c41c1c); + --joy-palette-danger-solidHoverBg: var(--joy-palette-danger-600, #a51818); + --joy-palette-danger-solidActiveBg: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-solidDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-danger-solidDisabledBg: var( + --joy-palette-neutral-800, #171a1c ); - --palette-danger-softColor: var(--palette-danger-200, #f7c5c5); - --palette-danger-softBg: var(--palette-danger-800, #430a0a); - --palette-danger-softHoverBg: var(--palette-danger-700, #7d1212); - --palette-danger-softActiveColor: var(--palette-danger-100, #fce4e4); - --palette-danger-softActiveBg: var(--palette-danger-600, #a51818); - --palette-danger-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-danger-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-danger-solidColor: var(--palette-common-white, #fff); - --palette-danger-solidBg: var(--palette-danger-500, #c41c1c); - --palette-danger-solidHoverBg: var(--palette-danger-600, #a51818); - --palette-danger-solidActiveBg: var(--palette-danger-700, #7d1212); - --palette-danger-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-danger-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-danger-mainChannel: 228 116 116; - --palette-danger-lightChannel: 247 197 197; - --palette-danger-darkChannel: 125 18 18; - --palette-info-50: #fdf7ff; - --palette-info-100: #f4eaff; - --palette-info-200: #e1cbff; - --palette-info-300: #c69eff; - --palette-info-400: #a374f9; - --palette-info-500: #814dde; - --palette-info-600: #5f35ae; - --palette-info-700: #452382; - --palette-info-800: #301761; - --palette-info-900: #1d0a42; - --palette-info-plainColor: var(--palette-info-300, #97c3f0); - --palette-info-plainHoverBg: var(--palette-info-800, #0a2744); - --palette-info-plainActiveBg: var(--palette-info-700, #12467b); - --palette-info-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-info-outlinedColor: var(--palette-info-200, #c7dff7); - --palette-info-outlinedBorder: var(--palette-info-700, #12467b); - --palette-info-outlinedHoverBg: var(--palette-info-800, #0a2744); - --palette-info-outlinedActiveBg: var(--palette-info-700, #12467b); - --palette-info-outlinedDisabledColor: var(--palette-neutral-500, #636b74); - --palette-info-outlinedDisabledBorder: var(--palette-neutral-800, #171a1c); - --palette-info-softColor: var(--palette-info-200, #c7dff7); - --palette-info-softBg: var(--palette-info-800, #0a2744); - --palette-info-softHoverBg: var(--palette-info-700, #12467b); - --palette-info-softActiveColor: var(--palette-info-100, #e3effb); - --palette-info-softActiveBg: var(--palette-info-600, #185ea5); - --palette-info-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-info-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-info-solidColor: var(--palette-common-white, #fff); - --palette-info-solidBg: var(--palette-info-500, #0b6bcb); - --palette-info-solidHoverBg: var(--palette-info-600, #185ea5); - --palette-info-solidActiveBg: var(--palette-info-700, #12467b); - --palette-info-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-info-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-info-mainChannel: 163 116 249; - --palette-info-lightChannel: 225 203 255; - --palette-info-darkChannel: 48 23 97; - --palette-success-50: #f6fef6; - --palette-success-100: #e3fbe3; - --palette-success-200: #c7f7c7; - --palette-success-300: #a1e8a1; - --palette-success-400: #51bc51; - --palette-success-500: #1f7a1f; - --palette-success-600: #136c13; - --palette-success-700: #0a470a; - --palette-success-800: #042f04; - --palette-success-900: #021d02; - --palette-success-plainColor: var(--palette-success-300, #a1e8a1); - --palette-success-plainHoverBg: var(--palette-success-800, #042f04); - --palette-success-plainActiveBg: var(--palette-success-700, #0a470a); - --palette-success-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-success-outlinedColor: var(--palette-success-200, #c7f7c7); - --palette-success-outlinedBorder: var(--palette-success-700, #0a470a); - --palette-success-outlinedHoverBg: var(--palette-success-800, #042f04); - --palette-success-outlinedActiveBg: var(--palette-success-700, #0a470a); - --palette-success-outlinedDisabledColor: var( - --palette-neutral-500, + --joy-palette-danger-mainChannel: 228 116 116; + --joy-palette-danger-lightChannel: 247 197 197; + --joy-palette-danger-darkChannel: 125 18 18; + --joy-palette-info-50: #fdf7ff; + --joy-palette-info-100: #f4eaff; + --joy-palette-info-200: #e1cbff; + --joy-palette-info-300: #c69eff; + --joy-palette-info-400: #a374f9; + --joy-palette-info-500: #814dde; + --joy-palette-info-600: #5f35ae; + --joy-palette-info-700: #452382; + --joy-palette-info-800: #301761; + --joy-palette-info-900: #1d0a42; + --joy-palette-info-plainColor: var(--joy-palette-info-300, #97c3f0); + --joy-palette-info-plainHoverBg: var(--joy-palette-info-800, #0a2744); + --joy-palette-info-plainActiveBg: var(--joy-palette-info-700, #12467b); + --joy-palette-info-plainDisabledColor: var( + --joy-palette-neutral-500, #636b74 ); - --palette-success-outlinedDisabledBorder: var( - --palette-neutral-800, + --joy-palette-info-outlinedColor: var(--joy-palette-info-200, #c7dff7); + --joy-palette-info-outlinedBorder: var(--joy-palette-info-700, #12467b); + --joy-palette-info-outlinedHoverBg: var(--joy-palette-info-800, #0a2744); + --joy-palette-info-outlinedActiveBg: var(--joy-palette-info-700, #12467b); + --joy-palette-info-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-info-outlinedDisabledBorder: var( + --joy-palette-neutral-800, #171a1c ); - --palette-success-softColor: var(--palette-success-200, #c7f7c7); - --palette-success-softBg: var(--palette-success-800, #042f04); - --palette-success-softHoverBg: var(--palette-success-700, #0a470a); - --palette-success-softActiveColor: var(--palette-success-100, #e3fbe3); - --palette-success-softActiveBg: var(--palette-success-600, #136c13); - --palette-success-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-success-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-success-solidColor: var(--palette-common-white, #fff); - --palette-success-solidBg: var(--palette-success-500, #1f7a1f); - --palette-success-solidHoverBg: var(--palette-success-600, #136c13); - --palette-success-solidActiveBg: var(--palette-success-700, #0a470a); - --palette-success-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-success-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-success-mainChannel: 81 188 81; - --palette-success-lightChannel: 199 247 199; - --palette-success-darkChannel: 10 71 10; - --palette-warning-50: #fefaf6; - --palette-warning-100: #fdf0e1; - --palette-warning-200: #fce1c2; - --palette-warning-300: #f3c896; - --palette-warning-400: #ea9a3e; - --palette-warning-500: #9a5b13; - --palette-warning-600: #72430d; - --palette-warning-700: #492b08; - --palette-warning-800: #2e1b05; - --palette-warning-900: #1d1002; - --palette-warning-plainColor: var(--palette-warning-300, #f3c896); - --palette-warning-plainHoverBg: var(--palette-warning-800, #2e1b05); - --palette-warning-plainActiveBg: var(--palette-warning-700, #492b08); - --palette-warning-plainDisabledColor: var(--palette-neutral-500, #636b74); - --palette-warning-outlinedColor: var(--palette-warning-200, #fce1c2); - --palette-warning-outlinedBorder: var(--palette-warning-700, #492b08); - --palette-warning-outlinedHoverBg: var(--palette-warning-800, #2e1b05); - --palette-warning-outlinedActiveBg: var(--palette-warning-700, #492b08); - --palette-warning-outlinedDisabledColor: var( - --palette-neutral-500, + --joy-palette-info-softColor: var(--joy-palette-info-200, #c7dff7); + --joy-palette-info-softBg: var(--joy-palette-info-800, #0a2744); + --joy-palette-info-softHoverBg: var(--joy-palette-info-700, #12467b); + --joy-palette-info-softActiveColor: var(--joy-palette-info-100, #e3effb); + --joy-palette-info-softActiveBg: var(--joy-palette-info-600, #185ea5); + --joy-palette-info-softDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-info-softDisabledBg: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-info-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-info-solidBg: var(--joy-palette-info-500, #0b6bcb); + --joy-palette-info-solidHoverBg: var(--joy-palette-info-600, #185ea5); + --joy-palette-info-solidActiveBg: var(--joy-palette-info-700, #12467b); + --joy-palette-info-solidDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-info-solidDisabledBg: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-info-mainChannel: 163 116 249; + --joy-palette-info-lightChannel: 225 203 255; + --joy-palette-info-darkChannel: 48 23 97; + --joy-palette-success-50: #f6fef6; + --joy-palette-success-100: #e3fbe3; + --joy-palette-success-200: #c7f7c7; + --joy-palette-success-300: #a1e8a1; + --joy-palette-success-400: #51bc51; + --joy-palette-success-500: #1f7a1f; + --joy-palette-success-600: #136c13; + --joy-palette-success-700: #0a470a; + --joy-palette-success-800: #042f04; + --joy-palette-success-900: #021d02; + --joy-palette-success-plainColor: var(--joy-palette-success-300, #a1e8a1); + --joy-palette-success-plainHoverBg: var(--joy-palette-success-800, #042f04); + --joy-palette-success-plainActiveBg: var( + --joy-palette-success-700, + #0a470a + ); + --joy-palette-success-plainDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-success-outlinedColor: var( + --joy-palette-success-200, + #c7f7c7 + ); + --joy-palette-success-outlinedBorder: var( + --joy-palette-success-700, + #0a470a + ); + --joy-palette-success-outlinedHoverBg: var( + --joy-palette-success-800, + #042f04 + ); + --joy-palette-success-outlinedActiveBg: var( + --joy-palette-success-700, + #0a470a + ); + --joy-palette-success-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-success-outlinedDisabledBorder: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-success-softColor: var(--joy-palette-success-200, #c7f7c7); + --joy-palette-success-softBg: var(--joy-palette-success-800, #042f04); + --joy-palette-success-softHoverBg: var(--joy-palette-success-700, #0a470a); + --joy-palette-success-softActiveColor: var( + --joy-palette-success-100, + #e3fbe3 + ); + --joy-palette-success-softActiveBg: var(--joy-palette-success-600, #136c13); + --joy-palette-success-softDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-success-softDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-success-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-success-solidBg: var(--joy-palette-success-500, #1f7a1f); + --joy-palette-success-solidHoverBg: var(--joy-palette-success-600, #136c13); + --joy-palette-success-solidActiveBg: var( + --joy-palette-success-700, + #0a470a + ); + --joy-palette-success-solidDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-success-solidDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-success-mainChannel: 81 188 81; + --joy-palette-success-lightChannel: 199 247 199; + --joy-palette-success-darkChannel: 10 71 10; + --joy-palette-warning-50: #fefaf6; + --joy-palette-warning-100: #fdf0e1; + --joy-palette-warning-200: #fce1c2; + --joy-palette-warning-300: #f3c896; + --joy-palette-warning-400: #ea9a3e; + --joy-palette-warning-500: #9a5b13; + --joy-palette-warning-600: #72430d; + --joy-palette-warning-700: #492b08; + --joy-palette-warning-800: #2e1b05; + --joy-palette-warning-900: #1d1002; + --joy-palette-warning-plainColor: var(--joy-palette-warning-300, #f3c896); + --joy-palette-warning-plainHoverBg: var(--joy-palette-warning-800, #2e1b05); + --joy-palette-warning-plainActiveBg: var( + --joy-palette-warning-700, + #492b08 + ); + --joy-palette-warning-plainDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-warning-outlinedColor: var( + --joy-palette-warning-200, + #fce1c2 + ); + --joy-palette-warning-outlinedBorder: var( + --joy-palette-warning-700, + #492b08 + ); + --joy-palette-warning-outlinedHoverBg: var( + --joy-palette-warning-800, + #2e1b05 + ); + --joy-palette-warning-outlinedActiveBg: var( + --joy-palette-warning-700, + #492b08 + ); + --joy-palette-warning-outlinedDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-warning-outlinedDisabledBorder: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-warning-softColor: var(--joy-palette-warning-200, #fce1c2); + --joy-palette-warning-softBg: var(--joy-palette-warning-800, #2e1b05); + --joy-palette-warning-softHoverBg: var(--joy-palette-warning-700, #492b08); + --joy-palette-warning-softActiveColor: var( + --joy-palette-warning-100, + #fdf0e1 + ); + --joy-palette-warning-softActiveBg: var(--joy-palette-warning-600, #72430d); + --joy-palette-warning-softDisabledColor: var( + --joy-palette-neutral-500, + #636b74 + ); + --joy-palette-warning-softDisabledBg: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-warning-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-warning-solidBg: var(--joy-palette-warning-500, #9a5b13); + --joy-palette-warning-solidHoverBg: var(--joy-palette-warning-600, #72430d); + --joy-palette-warning-solidActiveBg: var( + --joy-palette-warning-700, + #492b08 + ); + --joy-palette-warning-solidDisabledColor: var( + --joy-palette-neutral-500, #636b74 ); - --palette-warning-outlinedDisabledBorder: var( - --palette-neutral-800, + --joy-palette-warning-solidDisabledBg: var( + --joy-palette-neutral-800, #171a1c ); - --palette-warning-softColor: var(--palette-warning-200, #fce1c2); - --palette-warning-softBg: var(--palette-warning-800, #2e1b05); - --palette-warning-softHoverBg: var(--palette-warning-700, #492b08); - --palette-warning-softActiveColor: var(--palette-warning-100, #fdf0e1); - --palette-warning-softActiveBg: var(--palette-warning-600, #72430d); - --palette-warning-softDisabledColor: var(--palette-neutral-500, #636b74); - --palette-warning-softDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-warning-solidColor: var(--palette-common-white, #fff); - --palette-warning-solidBg: var(--palette-warning-500, #9a5b13); - --palette-warning-solidHoverBg: var(--palette-warning-600, #72430d); - --palette-warning-solidActiveBg: var(--palette-warning-700, #492b08); - --palette-warning-solidDisabledColor: var(--palette-neutral-500, #636b74); - --palette-warning-solidDisabledBg: var(--palette-neutral-800, #171a1c); - --palette-warning-mainChannel: 234 154 62; - --palette-warning-lightChannel: 252 225 194; - --palette-warning-darkChannel: 73 43 8; - --palette-common-white: #fff; - --palette-common-black: #000; - --palette-text-primary: var(--palette-neutral-100, #f0f4f8); - --palette-text-secondary: var(--palette-neutral-300, #cdd7e1); - --palette-text-tertiary: var(--palette-neutral-400, #9fa6ad); - --palette-text-icon: var(--palette-neutral-400, #9fa6ad); - --palette-background-body: var(--palette-common-black, #000); - --palette-background-surface: var(--palette-neutral-900, #0b0d0e); - --palette-background-popup: var(--palette-common-black, #000); - --palette-background-level1: var(--palette-neutral-800, #171a1c); - --palette-background-level2: var(--palette-neutral-700, #32383e); - --palette-background-level3: var(--palette-neutral-600, #555e68); - --palette-background-tooltip: var(--palette-neutral-600, #555e68); - --palette-background-backdrop: rgba( - var(--palette-neutral-darkChannel, 251 252 254) / 0.25 - ); - --palette-divider: rgba( - var(--palette-neutral-mainChannel, 99 107 116) / 0.16 - ); - --palette-focusVisible: var(--palette-primary-500, #0b6bcb); - --shadowRing: 0 0 #000; - --shadowChannel: 0 0 0; - --shadowOpacity: 0.6; + --joy-palette-warning-mainChannel: 234 154 62; + --joy-palette-warning-lightChannel: 252 225 194; + --joy-palette-warning-darkChannel: 73 43 8; + --joy-palette-common-white: #fff; + --joy-palette-common-black: #000; + --joy-palette-text-primary: var(--joy-palette-neutral-100, #f0f4f8); + --joy-palette-text-secondary: var(--joy-palette-neutral-300, #cdd7e1); + --joy-palette-text-tertiary: var(--joy-palette-neutral-400, #9fa6ad); + --joy-palette-text-icon: var(--joy-palette-neutral-400, #9fa6ad); + --joy-palette-background-body: var(--joy-palette-common-black, #000); + --joy-palette-background-surface: var(--joy-palette-neutral-900, #0b0d0e); + --joy-palette-background-popup: var(--joy-palette-common-black, #000); + --joy-palette-background-level1: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-background-level2: var(--joy-palette-neutral-700, #32383e); + --joy-palette-background-level3: var(--joy-palette-neutral-600, #555e68); + --joy-palette-background-tooltip: var(--joy-palette-neutral-600, #555e68); + --joy-palette-background-backdrop: rgba( + var(--joy-palette-neutral-darkChannel, 251 252 254) / 0.25 + ); + --joy-palette-divider: rgba( + var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.16 + ); + --joy-palette-focusVisible: var(--joy-palette-primary-500, #0b6bcb); + --joy-shadowRing: 0 0 #000; + --joy-shadowChannel: 0 0 0; + --joy-shadowOpacity: 0.6; - --palette-background-highlight: rgba(0, 58, 117, 0.1); - --palette-background-highlight-image: radial-gradient( + --joy-palette-background-highlight: rgba(0, 58, 117, 0.1); + --joy-palette-background-highlight-image: radial-gradient( at 51% 52%, rgba(31, 38, 46, 0.5) 0px, transparent 50% @@ -281,31 +470,31 @@ radial-gradient(at 0% 5%, rgba(0, 58, 117, 0.5) 0px, transparent 35%), radial-gradient(at 93% 85%, rgba(0, 58, 117, 0.3) 0px, transparent 50%); - color: var(--palette-common-white); + color: var(--joy-palette-common-white); @include perspective-symbol( joy-dark, running, - var(--palette-neutral-500), - var(--palette-neutral-200) + var(--joy-palette-neutral-500), + var(--joy-palette-neutral-200) ); @include perspective-symbol( joy-dark, stopped, - var(--palette-neutral-800), - var(--palette-neutral-700) + var(--joy-palette-neutral-800), + var(--joy-palette-neutral-700) ); @include perspective-symbol( joy-dark, default, - var(--palette-neutral-800), - var(--palette-neutral-700) + var(--joy-palette-neutral-800), + var(--joy-palette-neutral-700) ); @include perspective-symbol( joy-dark, faulted, - var(--palette-danger-500), - var(--palette-danger-700) + var(--joy-palette-danger-500), + var(--joy-palette-danger-700) ); } @@ -323,85 +512,85 @@ @each $attribute in $attributes { @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute)); + --joy-palette-$(variant)$(state)$(attribute): var(--joy-palette-$(variant)$(attribute)); } } } - --palette-focusVisible: var(--palette-300, #f3c896); - --palette-background-body: rgba( - var(--palette-mainChannel, 234 154 62) / 0.1 + --joy-palette-focusVisible: var(--joy-palette-300, #f3c896); + --joy-palette-background-body: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.1 ); - --palette-background-surface: rgba( - var(--palette-mainChannel, 234 154 62) / 0.08 + --joy-palette-background-surface: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.08 ); - --palette-background-level1: rgba( - var(--palette-mainChannel, 234 154 62) / 0.2 + --joy-palette-background-level1: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.2 ); - --palette-background-level2: rgba( - var(--palette-mainChannel, 234 154 62) / 0.4 + --joy-palette-background-level2: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.4 ); - --palette-background-level3: rgba( - var(--palette-mainChannel, 234 154 62) / 0.6 + --joy-palette-background-level3: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.6 ); - --palette-text-primary: var(--palette-100, #fdf0e1); - --palette-text-secondary: rgba( - var(--palette-lightChannel, 252 225 194) / 0.72 + --joy-palette-text-primary: var(--joy-palette-100, #fdf0e1); + --joy-palette-text-secondary: rgba( + var(--joy-palette-lightChannel, 252 225 194) / 0.72 ); - --palette-text-tertiary: rgba( - var(--palette-lightChannel, 252 225 194) / 0.6 + --joy-palette-text-tertiary: rgba( + var(--joy-palette-lightChannel, 252 225 194) / 0.6 ); - --palette-text-icon: rgba(var(--palette-lightChannel, 252 225 194) / 0.6); - --palette-divider: rgba(var(--palette-lightChannel, 252 225 194) / 0.2); - --palette-plainColor: rgba(var(--palette-lightChannel, 252 225 194) / 1); - --palette-plainHoverColor: var(--palette-50, #fefaf6); - --palette-plainHoverBg: rgba(var(--palette-mainChannel, 234 154 62) / 0.16); - --palette-plainActiveBg: rgba( - var(--palette-mainChannel, 234 154 62) / 0.32 + --joy-palette-text-icon: rgba(var(--joy-palette-lightChannel, 252 225 194) / 0.6); + --joy-palette-divider: rgba(var(--joy-palette-lightChannel, 252 225 194) / 0.2); + --joy-palette-plainColor: rgba(var(--joy-palette-lightChannel, 252 225 194) / 1); + --joy-palette-plainHoverColor: var(--joy-palette-50, #fefaf6); + --joy-palette-plainHoverBg: rgba(var(--joy-palette-mainChannel, 234 154 62) / 0.16); + --joy-palette-plainActiveBg: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.32 ); - --palette-plainDisabledColor: rgba( - var(--palette-mainChannel, 234 154 62) / 0.72 + --joy-palette-plainDisabledColor: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.72 ); - --palette-outlinedColor: rgba(var(--palette-lightChannel, 252 225 194) / 1); - --palette-outlinedHoverColor: var(--palette-50, #fefaf6); - --palette-outlinedBg: initial; - --palette-outlinedBorder: rgba( - var(--palette-mainChannel, 234 154 62) / 0.4 + --joy-palette-outlinedColor: rgba(var(--joy-palette-lightChannel, 252 225 194) / 1); + --joy-palette-outlinedHoverColor: var(--joy-palette-50, #fefaf6); + --joy-palette-outlinedBg: initial; + --joy-palette-outlinedBorder: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.4 ); - --palette-outlinedHoverBorder: var(--palette-600, #72430d); - --palette-outlinedHoverBg: rgba( - var(--palette-mainChannel, 234 154 62) / 0.16 + --joy-palette-outlinedHoverBorder: var(--joy-palette-600, #72430d); + --joy-palette-outlinedHoverBg: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.16 ); - --palette-outlinedActiveBg: rgba( - var(--palette-mainChannel, 234 154 62) / 0.32 + --joy-palette-outlinedActiveBg: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.32 ); - --palette-outlinedDisabledColor: rgba( - var(--palette-mainChannel, 234 154 62) / 0.72 + --joy-palette-outlinedDisabledColor: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.72 ); - --palette-outlinedDisabledBorder: rgba( - var(--palette-mainChannel, 234 154 62) / 0.2 + --joy-palette-outlinedDisabledBorder: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.2 ); - --palette-softColor: var(--palette-200, #fce1c2); - --palette-softBg: rgba(var(--palette-mainChannel, 234 154 62) / 0.24); - --palette-softHoverColor: #fff; - --palette-softHoverBg: rgba(var(--palette-mainChannel, 234 154 62) / 0.32); - --palette-softActiveBg: rgba(var(--palette-mainChannel, 234 154 62) / 0.48); - --palette-softDisabledColor: rgba( - var(--palette-mainChannel, 234 154 62) / 0.72 + --joy-palette-softColor: var(--joy-palette-200, #fce1c2); + --joy-palette-softBg: rgba(var(--joy-palette-mainChannel, 234 154 62) / 0.24); + --joy-palette-softHoverColor: #fff; + --joy-palette-softHoverBg: rgba(var(--joy-palette-mainChannel, 234 154 62) / 0.32); + --joy-palette-softActiveBg: rgba(var(--joy-palette-mainChannel, 234 154 62) / 0.48); + --joy-palette-softDisabledColor: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.72 ); - --palette-softDisabledBg: rgba( - var(--palette-mainChannel, 234 154 62) / 0.12 + --joy-palette-softDisabledBg: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.12 ); - --palette-solidColor: #fff; - --palette-solidBg: var(--palette-500, #9a5b13); - --palette-solidHoverColor: #fff; - --palette-solidHoverBg: var(--palette-600, #72430d); - --palette-solidActiveBg: var(--palette-600, #72430d); - --palette-solidDisabledColor: rgba( - var(--palette-mainChannel, 234 154 62) / 0.72 + --joy-palette-solidColor: #fff; + --joy-palette-solidBg: var(--joy-palette-500, #9a5b13); + --joy-palette-solidHoverColor: #fff; + --joy-palette-solidHoverBg: var(--joy-palette-600, #72430d); + --joy-palette-solidActiveBg: var(--joy-palette-600, #72430d); + --joy-palette-solidDisabledColor: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.72 ); - --palette-solidDisabledBg: rgba( - var(--palette-mainChannel, 234 154 62) / 0.12 + --joy-palette-solidDisabledBg: rgba( + var(--joy-palette-mainChannel, 234 154 62) / 0.12 ); } @@ -415,80 +604,80 @@ @each $attribute in $attributes { @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute)); + --joy-palette-$(variant)$(state)$(attribute): var(--joy-palette-$(variant)$(attribute)); } } } - --palette-focusVisible: var(--palette-200, #dde7ee); - --palette-background-body: rgba(0 0 0 / 0.1); - --palette-background-surface: rgba(0 0 0 / 0.06); - --palette-background-popup: var(--palette-700, #32383e); - --palette-background-level1: rgba( - var(--palette-darkChannel, 50 56 62) / 0.2 - ); - --palette-background-level2: rgba( - var(--palette-darkChannel, 50 56 62) / 0.36 - ); - --palette-background-level3: rgba( - var(--palette-darkChannel, 50 56 62) / 0.6 - ); - --palette-text-primary: var(--palette-common-white, #fff); - --palette-text-secondary: var(--palette-200, #dde7ee); - --palette-text-tertiary: var(--palette-300, #cdd7e1); - --palette-text-icon: var(--palette-200, #dde7ee); - --palette-divider: rgba(var(--palette-lightChannel, 221 231 238) / 0.32); - --palette-plainColor: var(--palette-50, #fbfcfe); - --palette-plainHoverColor: #fff; - --palette-plainHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.12 - ); - --palette-plainActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.32 - ); - --palette-plainDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-outlinedColor: var(--palette-50, #fbfcfe); - --palette-outlinedBorder: rgba( - var(--palette-lightChannel, 221 231 238) / 0.5 - ); - --palette-outlinedHoverColor: #fff; - --palette-outlinedHoverBorder: var(--palette-300, #cdd7e1); - --palette-outlinedHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.12 - ); - --palette-outlinedActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.32 - ); - --palette-outlinedDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-outlinedDisabledBorder: rgba(255 255 255 / 0.2); - --palette-softColor: var(--palette-common-white, #fff); - --palette-softHoverColor: var(--palette-common-white, #fff); - --palette-softBg: rgba(var(--palette-lightChannel, 221 231 238) / 0.24); - --palette-softHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.36 - ); - --palette-softActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.16 - ); - --palette-softActiveColor: #fff; - --palette-softDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-softDisabledBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.1 - ); - --palette-solidColor: var(--palette-600, #555e68); - --palette-solidBg: var(--palette-common-white, #fff); - --palette-solidHoverBg: var(--palette-common-white, #fff); - --palette-solidActiveBg: var(--palette-100, #f0f4f8); - --palette-solidDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-solidDisabledBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.1 + --joy-palette-focusVisible: var(--joy-palette-200, #dde7ee); + --joy-palette-background-body: rgba(0 0 0 / 0.1); + --joy-palette-background-surface: rgba(0 0 0 / 0.06); + --joy-palette-background-popup: var(--joy-palette-700, #32383e); + --joy-palette-background-level1: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.2 + ); + --joy-palette-background-level2: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.36 + ); + --joy-palette-background-level3: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.6 + ); + --joy-palette-text-primary: var(--joy-palette-common-white, #fff); + --joy-palette-text-secondary: var(--joy-palette-200, #dde7ee); + --joy-palette-text-tertiary: var(--joy-palette-300, #cdd7e1); + --joy-palette-text-icon: var(--joy-palette-200, #dde7ee); + --joy-palette-divider: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.32); + --joy-palette-plainColor: var(--joy-palette-50, #fbfcfe); + --joy-palette-plainHoverColor: #fff; + --joy-palette-plainHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.12 + ); + --joy-palette-plainActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.32 + ); + --joy-palette-plainDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-outlinedColor: var(--joy-palette-50, #fbfcfe); + --joy-palette-outlinedBorder: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.5 + ); + --joy-palette-outlinedHoverColor: #fff; + --joy-palette-outlinedHoverBorder: var(--joy-palette-300, #cdd7e1); + --joy-palette-outlinedHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.12 + ); + --joy-palette-outlinedActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.32 + ); + --joy-palette-outlinedDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-outlinedDisabledBorder: rgba(255 255 255 / 0.2); + --joy-palette-softColor: var(--joy-palette-common-white, #fff); + --joy-palette-softHoverColor: var(--joy-palette-common-white, #fff); + --joy-palette-softBg: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.24); + --joy-palette-softHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.36 + ); + --joy-palette-softActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.16 + ); + --joy-palette-softActiveColor: #fff; + --joy-palette-softDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-softDisabledBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.1 + ); + --joy-palette-solidColor: var(--joy-palette-600, #555e68); + --joy-palette-solidBg: var(--joy-palette-common-white, #fff); + --joy-palette-solidHoverBg: var(--joy-palette-common-white, #fff); + --joy-palette-solidActiveBg: var(--joy-palette-100, #f0f4f8); + --joy-palette-solidDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-solidDisabledBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.1 ); } diff --git a/packages/pyro-mui-joy/src/colors/light.css b/packages/pyro-mui-joy/src/colors/light.css index 2cd4e65..c637ead 100644 --- a/packages/pyro-mui-joy/src/colors/light.css +++ b/packages/pyro-mui-joy/src/colors/light.css @@ -1,276 +1,462 @@ :root { /* Light Theme */ - --background-color: rgb(255, 255, 255); - --palette-primary-50: #edf5fd; - --palette-primary-100: #e3effb; - --palette-primary-200: #c7dff7; - --palette-primary-300: #97c3f0; - --palette-primary-400: #4393e4; - --palette-primary-500: #0b6bcb; - --palette-primary-600: #185ea5; - --palette-primary-700: #12467b; - --palette-primary-800: #0a2744; - --palette-primary-900: #051423; - --palette-primary-plainColor: var(--palette-primary-500, #0b6bcb); - --palette-primary-plainHoverBg: var(--palette-primary-100, #e3effb); - --palette-primary-plainActiveBg: var(--palette-primary-200, #c7dff7); - --palette-primary-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-primary-outlinedColor: var(--palette-primary-500, #0b6bcb); - --palette-primary-outlinedBorder: var(--palette-primary-300, #97c3f0); - --palette-primary-outlinedHoverBg: var(--palette-primary-100, #e3effb); - --palette-primary-outlinedActiveBg: var(--palette-primary-200, #c7dff7); - --palette-primary-outlinedDisabledColor: var( - --palette-neutral-400, + --joy-background-color: rgb(255, 255, 255); + --joy-palette-primary-50: #edf5fd; + --joy-palette-primary-100: #e3effb; + --joy-palette-primary-200: #c7dff7; + --joy-palette-primary-300: #97c3f0; + --joy-palette-primary-400: #4393e4; + --joy-palette-primary-500: #0b6bcb; + --joy-palette-primary-600: #185ea5; + --joy-palette-primary-700: #12467b; + --joy-palette-primary-800: #0a2744; + --joy-palette-primary-900: #051423; + --joy-palette-primary-plainColor: var(--joy-palette-primary-500, #0b6bcb); + --joy-palette-primary-plainHoverBg: var(--joy-palette-primary-100, #e3effb); + --joy-palette-primary-plainActiveBg: var( + --joy-palette-primary-200, + #c7dff7 + ); + --joy-palette-primary-plainDisabledColor: var( + --joy-palette-neutral-400, #9fa6ad ); - --palette-primary-outlinedDisabledBorder: var( - --palette-neutral-200, + --joy-palette-primary-outlinedColor: var( + --joy-palette-primary-500, + #0b6bcb + ); + --joy-palette-primary-outlinedBorder: var( + --joy-palette-primary-300, + #97c3f0 + ); + --joy-palette-primary-outlinedHoverBg: var( + --joy-palette-primary-100, + #e3effb + ); + --joy-palette-primary-outlinedActiveBg: var( + --joy-palette-primary-200, + #c7dff7 + ); + --joy-palette-primary-outlinedDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-primary-outlinedDisabledBorder: var( + --joy-palette-neutral-200, + #dde7ee + ); + --joy-palette-primary-softColor: var(--joy-palette-primary-700, #12467b); + --joy-palette-primary-softBg: var(--joy-palette-primary-100, #e3effb); + --joy-palette-primary-softHoverBg: var(--joy-palette-primary-200, #c7dff7); + --joy-palette-primary-softActiveColor: var( + --joy-palette-primary-800, + #0a2744 + ); + --joy-palette-primary-softActiveBg: var(--joy-palette-primary-300, #97c3f0); + --joy-palette-primary-softDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-primary-softDisabledBg: var( + --joy-palette-neutral-50, + #fbfcfe + ); + --joy-palette-primary-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-primary-solidBg: var(--joy-palette-primary-500, #0b6bcb); + --joy-palette-primary-solidHoverBg: var(--joy-palette-primary-600, #185ea5); + --joy-palette-primary-solidActiveBg: var( + --joy-palette-primary-700, + #12467b + ); + --joy-palette-primary-solidDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-primary-solidDisabledBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-primary-mainChannel: 11 107 203; + --joy-palette-primary-lightChannel: 199 223 247; + --joy-palette-primary-darkChannel: 18 70 123; + --joy-palette-neutral-50: #fbfcfe; + --joy-palette-neutral-100: #f0f4f8; + --joy-palette-neutral-200: #dde7ee; + --joy-palette-neutral-300: #cdd7e1; + --joy-palette-neutral-400: #9fa6ad; + --joy-palette-neutral-500: #636b74; + --joy-palette-neutral-600: #555e68; + --joy-palette-neutral-700: #32383e; + --joy-palette-neutral-800: #171a1c; + --joy-palette-neutral-900: #0b0d0e; + --joy-palette-neutral-plainColor: var(--joy-palette-neutral-700, #32383e); + --joy-palette-neutral-plainHoverBg: var(--joy-palette-neutral-100, #f0f4f8); + --joy-palette-neutral-plainActiveBg: var( + --joy-palette-neutral-200, + #dde7ee + ); + --joy-palette-neutral-plainDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-neutral-outlinedColor: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-outlinedBorder: var( + --joy-palette-neutral-300, + #cdd7e1 + ); + --joy-palette-neutral-outlinedHoverBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-neutral-outlinedActiveBg: var( + --joy-palette-neutral-200, #dde7ee ); - --palette-primary-softColor: var(--palette-primary-700, #12467b); - --palette-primary-softBg: var(--palette-primary-100, #e3effb); - --palette-primary-softHoverBg: var(--palette-primary-200, #c7dff7); - --palette-primary-softActiveColor: var(--palette-primary-800, #0a2744); - --palette-primary-softActiveBg: var(--palette-primary-300, #97c3f0); - --palette-primary-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-primary-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-primary-solidColor: var(--palette-common-white, #fff); - --palette-primary-solidBg: var(--palette-primary-500, #0b6bcb); - --palette-primary-solidHoverBg: var(--palette-primary-600, #185ea5); - --palette-primary-solidActiveBg: var(--palette-primary-700, #12467b); - --palette-primary-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-primary-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-primary-mainChannel: 11 107 203; - --palette-primary-lightChannel: 199 223 247; - --palette-primary-darkChannel: 18 70 123; - --palette-neutral-50: #fbfcfe; - --palette-neutral-100: #f0f4f8; - --palette-neutral-200: #dde7ee; - --palette-neutral-300: #cdd7e1; - --palette-neutral-400: #9fa6ad; - --palette-neutral-500: #636b74; - --palette-neutral-600: #555e68; - --palette-neutral-700: #32383e; - --palette-neutral-800: #171a1c; - --palette-neutral-900: #0b0d0e; - --palette-neutral-plainColor: var(--palette-neutral-700, #32383e); - --palette-neutral-plainHoverBg: var(--palette-neutral-100, #f0f4f8); - --palette-neutral-plainActiveBg: var(--palette-neutral-200, #dde7ee); - --palette-neutral-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-neutral-outlinedColor: var(--palette-neutral-700, #32383e); - --palette-neutral-outlinedBorder: var(--palette-neutral-300, #cdd7e1); - --palette-neutral-outlinedHoverBg: var(--palette-neutral-100, #f0f4f8); - --palette-neutral-outlinedActiveBg: var(--palette-neutral-200, #dde7ee); - --palette-neutral-outlinedDisabledColor: var( - --palette-neutral-400, + --joy-palette-neutral-outlinedDisabledColor: var( + --joy-palette-neutral-400, #9fa6ad ); - --palette-neutral-outlinedDisabledBorder: var( - --palette-neutral-200, + --joy-palette-neutral-outlinedDisabledBorder: var( + --joy-palette-neutral-200, #dde7ee ); - --palette-neutral-softColor: var(--palette-neutral-700, #32383e); - --palette-neutral-softBg: var(--palette-neutral-100, #f0f4f8); - --palette-neutral-softHoverBg: var(--palette-neutral-200, #dde7ee); - --palette-neutral-softActiveColor: var(--palette-neutral-800, #171a1c); - --palette-neutral-softActiveBg: var(--palette-neutral-300, #cdd7e1); - --palette-neutral-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-neutral-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-neutral-solidColor: var(--palette-common-white, #fff); - --palette-neutral-solidBg: var(--palette-neutral-500, #636b74); - --palette-neutral-solidHoverBg: var(--palette-neutral-600, #555e68); - --palette-neutral-solidActiveBg: var(--palette-neutral-700, #32383e); - --palette-neutral-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-neutral-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-neutral-plainHoverColor: var(--palette-neutral-900, #0b0d0e); - --palette-neutral-mainChannel: 99 107 116; - --palette-neutral-lightChannel: 221 231 238; - --palette-neutral-darkChannel: 50 56 62; - --palette-danger-50: #fef6f6; - --palette-danger-100: #fce4e4; - --palette-danger-200: #f7c5c5; - --palette-danger-300: #f09898; - --palette-danger-400: #e47474; - --palette-danger-500: #c41c1c; - --palette-danger-600: #a51818; - --palette-danger-700: #7d1212; - --palette-danger-800: #430a0a; - --palette-danger-900: #240505; - --palette-danger-plainColor: var(--palette-danger-500, #c41c1c); - --palette-danger-plainHoverBg: var(--palette-danger-100, #fce4e4); - --palette-danger-plainActiveBg: var(--palette-danger-200, #f7c5c5); - --palette-danger-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-danger-outlinedColor: var(--palette-danger-500, #c41c1c); - --palette-danger-outlinedBorder: var(--palette-danger-300, #f09898); - --palette-danger-outlinedHoverBg: var(--palette-danger-100, #fce4e4); - --palette-danger-outlinedActiveBg: var(--palette-danger-200, #f7c5c5); - --palette-danger-outlinedDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-danger-outlinedDisabledBorder: var( - --palette-neutral-200, + --joy-palette-neutral-softColor: var(--joy-palette-neutral-700, #32383e); + --joy-palette-neutral-softBg: var(--joy-palette-neutral-100, #f0f4f8); + --joy-palette-neutral-softHoverBg: var(--joy-palette-neutral-200, #dde7ee); + --joy-palette-neutral-softActiveColor: var( + --joy-palette-neutral-800, + #171a1c + ); + --joy-palette-neutral-softActiveBg: var(--joy-palette-neutral-300, #cdd7e1); + --joy-palette-neutral-softDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-neutral-softDisabledBg: var( + --joy-palette-neutral-50, + #fbfcfe + ); + --joy-palette-neutral-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-neutral-solidBg: var(--joy-palette-neutral-500, #636b74); + --joy-palette-neutral-solidHoverBg: var(--joy-palette-neutral-600, #555e68); + --joy-palette-neutral-solidActiveBg: var( + --joy-palette-neutral-700, + #32383e + ); + --joy-palette-neutral-solidDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-neutral-solidDisabledBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-neutral-plainHoverColor: var( + --joy-palette-neutral-900, + #0b0d0e + ); + --joy-palette-neutral-mainChannel: 99 107 116; + --joy-palette-neutral-lightChannel: 221 231 238; + --joy-palette-neutral-darkChannel: 50 56 62; + --joy-palette-danger-50: #fef6f6; + --joy-palette-danger-100: #fce4e4; + --joy-palette-danger-200: #f7c5c5; + --joy-palette-danger-300: #f09898; + --joy-palette-danger-400: #e47474; + --joy-palette-danger-500: #c41c1c; + --joy-palette-danger-600: #a51818; + --joy-palette-danger-700: #7d1212; + --joy-palette-danger-800: #430a0a; + --joy-palette-danger-900: #240505; + --joy-palette-danger-plainColor: var(--joy-palette-danger-500, #c41c1c); + --joy-palette-danger-plainHoverBg: var(--joy-palette-danger-100, #fce4e4); + --joy-palette-danger-plainActiveBg: var(--joy-palette-danger-200, #f7c5c5); + --joy-palette-danger-plainDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-danger-outlinedColor: var(--joy-palette-danger-500, #c41c1c); + --joy-palette-danger-outlinedBorder: var(--joy-palette-danger-300, #f09898); + --joy-palette-danger-outlinedHoverBg: var( + --joy-palette-danger-100, + #fce4e4 + ); + --joy-palette-danger-outlinedActiveBg: var( + --joy-palette-danger-200, + #f7c5c5 + ); + --joy-palette-danger-outlinedDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-danger-outlinedDisabledBorder: var( + --joy-palette-neutral-200, + #dde7ee + ); + --joy-palette-danger-softColor: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-softBg: var(--joy-palette-danger-100, #fce4e4); + --joy-palette-danger-softHoverBg: var(--joy-palette-danger-200, #f7c5c5); + --joy-palette-danger-softActiveColor: var( + --joy-palette-danger-800, + #430a0a + ); + --joy-palette-danger-softActiveBg: var(--joy-palette-danger-300, #f09898); + --joy-palette-danger-softDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-danger-softDisabledBg: var(--joy-palette-neutral-50, #fbfcfe); + --joy-palette-danger-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-danger-solidBg: var(--joy-palette-danger-500, #c41c1c); + --joy-palette-danger-solidHoverBg: var(--joy-palette-danger-600, #a51818); + --joy-palette-danger-solidActiveBg: var(--joy-palette-danger-700, #7d1212); + --joy-palette-danger-solidDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-danger-solidDisabledBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-danger-mainChannel: 196 28 28; + --joy-palette-danger-lightChannel: 247 197 197; + --joy-palette-danger-darkChannel: 125 18 18; + --joy-palette-info-50: #fdf7ff; + --joy-palette-info-100: #f4eaff; + --joy-palette-info-200: #e1cbff; + --joy-palette-info-300: #c69eff; + --joy-palette-info-400: #a374f9; + --joy-palette-info-500: #814dde; + --joy-palette-info-600: #5f35ae; + --joy-palette-info-700: #452382; + --joy-palette-info-800: #301761; + --joy-palette-info-900: #1d0a42; + --joy-palette-info-plainColor: var(--joy-palette-info-500, #0b6bcb); + --joy-palette-info-plainHoverBg: var(--joy-palette-info-100, #e3effb); + --joy-palette-info-plainActiveBg: var(--joy-palette-info-200, #c7dff7); + --joy-palette-info-plainDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-info-outlinedColor: var(--joy-palette-info-500, #0b6bcb); + --joy-palette-info-outlinedBorder: var(--joy-palette-info-300, #97c3f0); + --joy-palette-info-outlinedHoverBg: var(--joy-palette-info-100, #e3effb); + --joy-palette-info-outlinedActiveBg: var(--joy-palette-info-200, #c7dff7); + --joy-palette-info-outlinedDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-info-outlinedDisabledBorder: var( + --joy-palette-neutral-200, #dde7ee ); - --palette-danger-softColor: var(--palette-danger-700, #7d1212); - --palette-danger-softBg: var(--palette-danger-100, #fce4e4); - --palette-danger-softHoverBg: var(--palette-danger-200, #f7c5c5); - --palette-danger-softActiveColor: var(--palette-danger-800, #430a0a); - --palette-danger-softActiveBg: var(--palette-danger-300, #f09898); - --palette-danger-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-danger-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-danger-solidColor: var(--palette-common-white, #fff); - --palette-danger-solidBg: var(--palette-danger-500, #c41c1c); - --palette-danger-solidHoverBg: var(--palette-danger-600, #a51818); - --palette-danger-solidActiveBg: var(--palette-danger-700, #7d1212); - --palette-danger-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-danger-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-danger-mainChannel: 196 28 28; - --palette-danger-lightChannel: 247 197 197; - --palette-danger-darkChannel: 125 18 18; - --palette-info-50: #fdf7ff; - --palette-info-100: #f4eaff; - --palette-info-200: #e1cbff; - --palette-info-300: #c69eff; - --palette-info-400: #a374f9; - --palette-info-500: #814dde; - --palette-info-600: #5f35ae; - --palette-info-700: #452382; - --palette-info-800: #301761; - --palette-info-900: #1d0a42; - --palette-info-plainColor: var(--palette-info-500, #0b6bcb); - --palette-info-plainHoverBg: var(--palette-info-100, #e3effb); - --palette-info-plainActiveBg: var(--palette-info-200, #c7dff7); - --palette-info-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-info-outlinedColor: var(--palette-info-500, #0b6bcb); - --palette-info-outlinedBorder: var(--palette-info-300, #97c3f0); - --palette-info-outlinedHoverBg: var(--palette-info-100, #e3effb); - --palette-info-outlinedActiveBg: var(--palette-info-200, #c7dff7); - --palette-info-outlinedDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-info-outlinedDisabledBorder: var(--palette-neutral-200, #dde7ee); - --palette-info-softColor: var(--palette-info-700, #12467b); - --palette-info-softBg: var(--palette-info-100, #e3effb); - --palette-info-softHoverBg: var(--palette-info-200, #c7dff7); - --palette-info-softActiveColor: var(--palette-info-800, #0a2744); - --palette-info-softActiveBg: var(--palette-info-300, #97c3f0); - --palette-info-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-info-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-info-solidColor: var(--palette-common-white, #fff); - --palette-info-solidBg: var(--palette-info-500, #0b6bcb); - --palette-info-solidHoverBg: var(--palette-info-600, #185ea5); - --palette-info-solidActiveBg: var(--palette-info-700, #12467b); - --palette-info-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-info-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-info-mainChannel: 129 77 222; - --palette-info-lightChannel: 225 203 255; - --palette-info-darkChannel: 48 23 97; - --palette-success-50: #f6fef6; - --palette-success-100: #e3fbe3; - --palette-success-200: #c7f7c7; - --palette-success-300: #a1e8a1; - --palette-success-400: #51bc51; - --palette-success-500: #1f7a1f; - --palette-success-600: #136c13; - --palette-success-700: #0a470a; - --palette-success-800: #042f04; - --palette-success-900: #021d02; - --palette-success-plainColor: var(--palette-success-500, #1f7a1f); - --palette-success-plainHoverBg: var(--palette-success-100, #e3fbe3); - --palette-success-plainActiveBg: var(--palette-success-200, #c7f7c7); - --palette-success-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-success-outlinedColor: var(--palette-success-500, #1f7a1f); - --palette-success-outlinedBorder: var(--palette-success-300, #a1e8a1); - --palette-success-outlinedHoverBg: var(--palette-success-100, #e3fbe3); - --palette-success-outlinedActiveBg: var(--palette-success-200, #c7f7c7); - --palette-success-outlinedDisabledColor: var( - --palette-neutral-400, + --joy-palette-info-softColor: var(--joy-palette-info-700, #12467b); + --joy-palette-info-softBg: var(--joy-palette-info-100, #e3effb); + --joy-palette-info-softHoverBg: var(--joy-palette-info-200, #c7dff7); + --joy-palette-info-softActiveColor: var(--joy-palette-info-800, #0a2744); + --joy-palette-info-softActiveBg: var(--joy-palette-info-300, #97c3f0); + --joy-palette-info-softDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-info-softDisabledBg: var(--joy-palette-neutral-50, #fbfcfe); + --joy-palette-info-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-info-solidBg: var(--joy-palette-info-500, #0b6bcb); + --joy-palette-info-solidHoverBg: var(--joy-palette-info-600, #185ea5); + --joy-palette-info-solidActiveBg: var(--joy-palette-info-700, #12467b); + --joy-palette-info-solidDisabledColor: var( + --joy-palette-neutral-400, #9fa6ad ); - --palette-success-outlinedDisabledBorder: var( - --palette-neutral-200, + --joy-palette-info-solidDisabledBg: var(--joy-palette-neutral-100, #f0f4f8); + --joy-palette-info-mainChannel: 129 77 222; + --joy-palette-info-lightChannel: 225 203 255; + --joy-palette-info-darkChannel: 48 23 97; + --joy-palette-success-50: #f6fef6; + --joy-palette-success-100: #e3fbe3; + --joy-palette-success-200: #c7f7c7; + --joy-palette-success-300: #a1e8a1; + --joy-palette-success-400: #51bc51; + --joy-palette-success-500: #1f7a1f; + --joy-palette-success-600: #136c13; + --joy-palette-success-700: #0a470a; + --joy-palette-success-800: #042f04; + --joy-palette-success-900: #021d02; + --joy-palette-success-plainColor: var(--joy-palette-success-500, #1f7a1f); + --joy-palette-success-plainHoverBg: var(--joy-palette-success-100, #e3fbe3); + --joy-palette-success-plainActiveBg: var( + --joy-palette-success-200, + #c7f7c7 + ); + --joy-palette-success-plainDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-success-outlinedColor: var( + --joy-palette-success-500, + #1f7a1f + ); + --joy-palette-success-outlinedBorder: var( + --joy-palette-success-300, + #a1e8a1 + ); + --joy-palette-success-outlinedHoverBg: var( + --joy-palette-success-100, + #e3fbe3 + ); + --joy-palette-success-outlinedActiveBg: var( + --joy-palette-success-200, + #c7f7c7 + ); + --joy-palette-success-outlinedDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-success-outlinedDisabledBorder: var( + --joy-palette-neutral-200, #dde7ee ); - --palette-success-softColor: var(--palette-success-700, #0a470a); - --palette-success-softBg: var(--palette-success-100, #e3fbe3); - --palette-success-softHoverBg: var(--palette-success-200, #c7f7c7); - --palette-success-softActiveColor: var(--palette-success-800, #042f04); - --palette-success-softActiveBg: var(--palette-success-300, #a1e8a1); - --palette-success-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-success-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-success-solidColor: var(--palette-common-white, #fff); - --palette-success-solidBg: var(--palette-success-500, #1f7a1f); - --palette-success-solidHoverBg: var(--palette-success-600, #136c13); - --palette-success-solidActiveBg: var(--palette-success-700, #0a470a); - --palette-success-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-success-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-success-mainChannel: 31 122 31; - --palette-success-lightChannel: 199 247 199; - --palette-success-darkChannel: 10 71 10; - --palette-warning-50: #fefaf6; - --palette-warning-100: #fdf0e1; - --palette-warning-200: #fce1c2; - --palette-warning-300: #f3c896; - --palette-warning-400: #ea9a3e; - --palette-warning-500: #9a5b13; - --palette-warning-600: #72430d; - --palette-warning-700: #492b08; - --palette-warning-800: #2e1b05; - --palette-warning-900: #1d1002; - --palette-warning-plainColor: var(--palette-warning-500, #9a5b13); - --palette-warning-plainHoverBg: var(--palette-warning-100, #fdf0e1); - --palette-warning-plainActiveBg: var(--palette-warning-200, #fce1c2); - --palette-warning-plainDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-warning-outlinedColor: var(--palette-warning-500, #9a5b13); - --palette-warning-outlinedBorder: var(--palette-warning-300, #f3c896); - --palette-warning-outlinedHoverBg: var(--palette-warning-100, #fdf0e1); - --palette-warning-outlinedActiveBg: var(--palette-warning-200, #fce1c2); - --palette-warning-outlinedDisabledColor: var( - --palette-neutral-400, + --joy-palette-success-softColor: var(--joy-palette-success-700, #0a470a); + --joy-palette-success-softBg: var(--joy-palette-success-100, #e3fbe3); + --joy-palette-success-softHoverBg: var(--joy-palette-success-200, #c7f7c7); + --joy-palette-success-softActiveColor: var( + --joy-palette-success-800, + #042f04 + ); + --joy-palette-success-softActiveBg: var(--joy-palette-success-300, #a1e8a1); + --joy-palette-success-softDisabledColor: var( + --joy-palette-neutral-400, #9fa6ad ); - --palette-warning-outlinedDisabledBorder: var( - --palette-neutral-200, + --joy-palette-success-softDisabledBg: var( + --joy-palette-neutral-50, + #fbfcfe + ); + --joy-palette-success-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-success-solidBg: var(--joy-palette-success-500, #1f7a1f); + --joy-palette-success-solidHoverBg: var(--joy-palette-success-600, #136c13); + --joy-palette-success-solidActiveBg: var( + --joy-palette-success-700, + #0a470a + ); + --joy-palette-success-solidDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-success-solidDisabledBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-success-mainChannel: 31 122 31; + --joy-palette-success-lightChannel: 199 247 199; + --joy-palette-success-darkChannel: 10 71 10; + --joy-palette-warning-50: #fefaf6; + --joy-palette-warning-100: #fdf0e1; + --joy-palette-warning-200: #fce1c2; + --joy-palette-warning-300: #f3c896; + --joy-palette-warning-400: #ea9a3e; + --joy-palette-warning-500: #9a5b13; + --joy-palette-warning-600: #72430d; + --joy-palette-warning-700: #492b08; + --joy-palette-warning-800: #2e1b05; + --joy-palette-warning-900: #1d1002; + --joy-palette-warning-plainColor: var(--joy-palette-warning-500, #9a5b13); + --joy-palette-warning-plainHoverBg: var(--joy-palette-warning-100, #fdf0e1); + --joy-palette-warning-plainActiveBg: var( + --joy-palette-warning-200, + #fce1c2 + ); + --joy-palette-warning-plainDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-warning-outlinedColor: var( + --joy-palette-warning-500, + #9a5b13 + ); + --joy-palette-warning-outlinedBorder: var( + --joy-palette-warning-300, + #f3c896 + ); + --joy-palette-warning-outlinedHoverBg: var( + --joy-palette-warning-100, + #fdf0e1 + ); + --joy-palette-warning-outlinedActiveBg: var( + --joy-palette-warning-200, + #fce1c2 + ); + --joy-palette-warning-outlinedDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-warning-outlinedDisabledBorder: var( + --joy-palette-neutral-200, #dde7ee ); - --palette-warning-softColor: var(--palette-warning-700, #492b08); - --palette-warning-softBg: var(--palette-warning-100, #fdf0e1); - --palette-warning-softHoverBg: var(--palette-warning-200, #fce1c2); - --palette-warning-softActiveColor: var(--palette-warning-800, #2e1b05); - --palette-warning-softActiveBg: var(--palette-warning-300, #f3c896); - --palette-warning-softDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-warning-softDisabledBg: var(--palette-neutral-50, #fbfcfe); - --palette-warning-solidColor: var(--palette-common-white, #fff); - --palette-warning-solidBg: var(--palette-warning-500, #9a5b13); - --palette-warning-solidHoverBg: var(--palette-warning-600, #72430d); - --palette-warning-solidActiveBg: var(--palette-warning-700, #492b08); - --palette-warning-solidDisabledColor: var(--palette-neutral-400, #9fa6ad); - --palette-warning-solidDisabledBg: var(--palette-neutral-100, #f0f4f8); - --palette-warning-mainChannel: 154 91 19; - --palette-warning-lightChannel: 252 225 194; - --palette-warning-darkChannel: 73 43 8; - --palette-common-white: #fff; - --palette-common-black: #000; - --palette-text-primary: var(--palette-neutral-800, #171a1c); - --palette-text-secondary: var(--palette-neutral-700, #32383e); - --palette-text-tertiary: var(--palette-neutral-600, #555e68); - --palette-text-icon: var(--palette-neutral-500, #636b74); - --palette-background-body: var(--palette-common-white, #fff); - --palette-background-surface: var(--palette-neutral-50, #fbfcfe); - --palette-background-popup: var(--palette-common-white, #fff); - --palette-background-level1: var(--palette-neutral-100, #f0f4f8); - --palette-background-level2: var(--palette-neutral-200, #dde7ee); - --palette-background-level3: var(--palette-neutral-300, #cdd7e1); - --palette-background-tooltip: var(--palette-neutral-500, #636b74); - --palette-background-backdrop: rgba( - var(--palette-neutral-darkChannel, 11 13 14) / 0.25 - ); - --palette-divider: rgba( - var(--palette-neutral-mainChannel, 99 107 116) / 0.2 - ); - --palette-focusVisible: var(--palette-primary-500, #0b6bcb); - --shadowRing: 0 0 #000; - --shadowChannel: 21 21 21; - --shadowOpacity: 0.08; + --joy-palette-warning-softColor: var(--joy-palette-warning-700, #492b08); + --joy-palette-warning-softBg: var(--joy-palette-warning-100, #fdf0e1); + --joy-palette-warning-softHoverBg: var(--joy-palette-warning-200, #fce1c2); + --joy-palette-warning-softActiveColor: var( + --joy-palette-warning-800, + #2e1b05 + ); + --joy-palette-warning-softActiveBg: var(--joy-palette-warning-300, #f3c896); + --joy-palette-warning-softDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-warning-softDisabledBg: var( + --joy-palette-neutral-50, + #fbfcfe + ); + --joy-palette-warning-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-warning-solidBg: var(--joy-palette-warning-500, #9a5b13); + --joy-palette-warning-solidHoverBg: var(--joy-palette-warning-600, #72430d); + --joy-palette-warning-solidActiveBg: var( + --joy-palette-warning-700, + #492b08 + ); + --joy-palette-warning-solidDisabledColor: var( + --joy-palette-neutral-400, + #9fa6ad + ); + --joy-palette-warning-solidDisabledBg: var( + --joy-palette-neutral-100, + #f0f4f8 + ); + --joy-palette-warning-mainChannel: 154 91 19; + --joy-palette-warning-lightChannel: 252 225 194; + --joy-palette-warning-darkChannel: 73 43 8; + --joy-palette-common-white: #fff; + --joy-palette-common-black: #000; + --joy-palette-text-primary: var(--joy-palette-neutral-800, #171a1c); + --joy-palette-text-secondary: var(--joy-palette-neutral-700, #32383e); + --joy-palette-text-tertiary: var(--joy-palette-neutral-600, #555e68); + --joy-palette-text-icon: var(--joy-palette-neutral-500, #636b74); + --joy-palette-background-body: var(--joy-palette-common-white, #fff); + --joy-palette-background-surface: var(--joy-palette-neutral-50, #fbfcfe); + --joy-palette-background-popup: var(--joy-palette-common-white, #fff); + --joy-palette-background-level1: var(--joy-palette-neutral-100, #f0f4f8); + --joy-palette-background-level2: var(--joy-palette-neutral-200, #dde7ee); + --joy-palette-background-level3: var(--joy-palette-neutral-300, #cdd7e1); + --joy-palette-background-tooltip: var(--joy-palette-neutral-500, #636b74); + --joy-palette-background-backdrop: rgba( + var(--joy-palette-neutral-darkChannel, 11 13 14) / 0.25 + ); + --joy-palette-divider: rgba( + var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.2 + ); + --joy-palette-focusVisible: var(--joy-palette-primary-500, #0b6bcb); + --joy-shadowRing: 0 0 #000; + --joy-shadowChannel: 21 21 21; + --joy-shadowOpacity: 0.08; - --palette-background-highlight: rgba(240, 247, 255, 0.5); - --palette-background-highlight-image: radial-gradient( + --joy-palette-background-highlight: rgba(240, 247, 255, 0.5); + --joy-palette-background-highlight-image: radial-gradient( at 51% 52%, rgba(240, 247, 255, 0.5) 0px, transparent 50% @@ -287,26 +473,26 @@ @include perspective-symbol( joy-light, running, - var(--palette-common-white), - var(--palette-neutral-700) + var(--joy-palette-common-white), + var(--joy-palette-neutral-700) ); @include perspective-symbol( joy-light, stopped, - var(--palette-neutral-400), - var(--palette-neutral-700) + var(--joy-palette-neutral-400), + var(--joy-palette-neutral-700) ); @include perspective-symbol( joy-light, default, - var(--palette-neutral-400), - var(--palette-neutral-700) + var(--joy-palette-neutral-400), + var(--joy-palette-neutral-700) ); @include perspective-symbol( joy-light, faulted, - var(--palette-danger-500), - var(--palette-danger-700) + var(--joy-palette-danger-500), + var(--joy-palette-danger-700) ); } @@ -324,76 +510,76 @@ @each $attribute in $attributes { @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute)); + --joy-palette-$(variant)$(state)$(attribute): var(--joy-palette-$(variant)$(attribute)); } } } - --palette-focusVisible: var(--palette-500, #9a5b13); - --palette-background-body: rgba( - var(--palette-mainChannel, 154 91 19) / 0.1 - ); - --palette-background-surface: rgba( - var(--palette-mainChannel, 154 91 19) / 0.08 - ); - --palette-background-level1: rgba( - var(--palette-mainChannel, 154 91 19) / 0.2 - ); - --palette-background-level2: rgba( - var(--palette-mainChannel, 154 91 19) / 0.32 - ); - --palette-background-level3: rgba( - var(--palette-mainChannel, 154 91 19) / 0.48 - ); - --palette-text-primary: var(--palette-700, #492b08); - --palette-text-secondary: rgba(var(--palette-darkChannel, 73 43 8) / 0.8); - --palette-text-tertiary: rgba(var(--palette-darkChannel, 73 43 8) / 0.68); - --palette-text-icon: var(--palette-500, #9a5b13); - --palette-divider: rgba(var(--palette-mainChannel, 154 91 19) / 0.32); - --palette-plainColor: rgba(var(--palette-darkChannel, 73 43 8) / 0.8); - --palette-plainHoverColor: rgba(var(--palette-darkChannel, 73 43 8) / 1); - --palette-plainHoverBg: rgba(var(--palette-mainChannel, 154 91 19) / 0.12); - --palette-plainActiveBg: rgba(var(--palette-mainChannel, 154 91 19) / 0.24); - --palette-plainDisabledColor: rgba( - var(--palette-mainChannel, 154 91 19) / 0.6 - ); - --palette-outlinedColor: rgba(var(--palette-mainChannel, 154 91 19) / 1); - --palette-outlinedBorder: rgba(var(--palette-mainChannel, 154 91 19) / 0.4); - --palette-outlinedHoverColor: var(--palette-600, #72430d); - --palette-outlinedHoverBorder: var(--palette-300, #f3c896); - --palette-outlinedHoverBg: rgba( - var(--palette-mainChannel, 154 91 19) / 0.12 - ); - --palette-outlinedActiveBg: rgba( - var(--palette-mainChannel, 154 91 19) / 0.24 - ); - --palette-outlinedDisabledColor: rgba( - var(--palette-mainChannel, 154 91 19) / 0.6 - ); - --palette-outlinedDisabledBorder: rgba( - var(--palette-mainChannel, 154 91 19) / 0.12 - ); - --palette-softColor: var(--palette-600, #72430d); - --palette-softBg: rgba(var(--palette-lightChannel, 252 225 194) / 0.8); - --palette-softHoverColor: var(--palette-700, #492b08); - --palette-softHoverBg: var(--palette-200, #fce1c2); - --palette-softActiveBg: var(--palette-300, #f3c896); - --palette-softDisabledColor: rgba( - var(--palette-mainChannel, 154 91 19) / 0.6 - ); - --palette-softDisabledBg: rgba( - var(--palette-mainChannel, 154 91 19) / 0.08 - ); - --palette-solidColor: var(--palette-common-white, #fff); - --palette-solidBg: var(--palette-500, #9a5b13); - --palette-solidHoverColor: var(--palette-common-white, #fff); - --palette-solidHoverBg: var(--palette-600, #72430d); - --palette-solidActiveBg: var(--palette-600, #72430d); - --palette-solidDisabledColor: rgba( - var(--palette-mainChannel, 154 91 19) / 0.6 - ); - --palette-solidDisabledBg: rgba( - var(--palette-mainChannel, 154 91 19) / 0.08 + --joy-palette-focusVisible: var(--joy-palette-500, #9a5b13); + --joy-palette-background-body: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.1 + ); + --joy-palette-background-surface: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.08 + ); + --joy-palette-background-level1: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.2 + ); + --joy-palette-background-level2: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.32 + ); + --joy-palette-background-level3: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.48 + ); + --joy-palette-text-primary: var(--joy-palette-700, #492b08); + --joy-palette-text-secondary: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.8); + --joy-palette-text-tertiary: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.68); + --joy-palette-text-icon: var(--joy-palette-500, #9a5b13); + --joy-palette-divider: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.32); + --joy-palette-plainColor: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.8); + --joy-palette-plainHoverColor: rgba(var(--joy-palette-darkChannel, 73 43 8) / 1); + --joy-palette-plainHoverBg: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.12); + --joy-palette-plainActiveBg: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.24); + --joy-palette-plainDisabledColor: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.6 + ); + --joy-palette-outlinedColor: rgba(var(--joy-palette-mainChannel, 154 91 19) / 1); + --joy-palette-outlinedBorder: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.4); + --joy-palette-outlinedHoverColor: var(--joy-palette-600, #72430d); + --joy-palette-outlinedHoverBorder: var(--joy-palette-300, #f3c896); + --joy-palette-outlinedHoverBg: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.12 + ); + --joy-palette-outlinedActiveBg: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.24 + ); + --joy-palette-outlinedDisabledColor: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.6 + ); + --joy-palette-outlinedDisabledBorder: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.12 + ); + --joy-palette-softColor: var(--joy-palette-600, #72430d); + --joy-palette-softBg: rgba(var(--joy-palette-lightChannel, 252 225 194) / 0.8); + --joy-palette-softHoverColor: var(--joy-palette-700, #492b08); + --joy-palette-softHoverBg: var(--joy-palette-200, #fce1c2); + --joy-palette-softActiveBg: var(--joy-palette-300, #f3c896); + --joy-palette-softDisabledColor: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.6 + ); + --joy-palette-softDisabledBg: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.08 + ); + --joy-palette-solidColor: var(--joy-palette-common-white, #fff); + --joy-palette-solidBg: var(--joy-palette-500, #9a5b13); + --joy-palette-solidHoverColor: var(--joy-palette-common-white, #fff); + --joy-palette-solidHoverBg: var(--joy-palette-600, #72430d); + --joy-palette-solidActiveBg: var(--joy-palette-600, #72430d); + --joy-palette-solidDisabledColor: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.6 + ); + --joy-palette-solidDisabledBg: rgba( + var(--joy-palette-mainChannel, 154 91 19) / 0.08 ); } @@ -407,80 +593,80 @@ @each $attribute in $attributes { @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute)); + --joy-palette-$(variant)$(state)$(attribute): var(--joy-palette-$(variant)$(attribute)); } } } - --palette-focusVisible: var(--palette-200, #dde7ee); - --palette-background-body: rgba(0 0 0 / 0.1); - --palette-background-surface: rgba(0 0 0 / 0.06); - --palette-background-popup: var(--palette-700, #32383e); - --palette-background-level1: rgba( - var(--palette-darkChannel, 50 56 62) / 0.2 - ); - --palette-background-level2: rgba( - var(--palette-darkChannel, 50 56 62) / 0.36 - ); - --palette-background-level3: rgba( - var(--palette-darkChannel, 50 56 62) / 0.6 - ); - --palette-text-primary: var(--palette-common-white, #fff); - --palette-text-secondary: var(--palette-200, #dde7ee); - --palette-text-tertiary: var(--palette-300, #cdd7e1); - --palette-text-icon: var(--palette-200, #dde7ee); - --palette-divider: rgba(var(--palette-lightChannel, 221 231 238) / 0.32); - --palette-plainColor: var(--palette-50, #fbfcfe); - --palette-plainHoverColor: #fff; - --palette-plainHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.12 - ); - --palette-plainActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.32 - ); - --palette-plainDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-outlinedColor: var(--palette-50, #fbfcfe); - --palette-outlinedBorder: rgba( - var(--palette-lightChannel, 221 231 238) / 0.5 - ); - --palette-outlinedHoverColor: #fff; - --palette-outlinedHoverBorder: var(--palette-300, #cdd7e1); - --palette-outlinedHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.12 - ); - --palette-outlinedActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.32 - ); - --palette-outlinedDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-outlinedDisabledBorder: rgba(255 255 255 / 0.2); - --palette-softColor: var(--palette-common-white, #fff); - --palette-softHoverColor: var(--palette-common-white, #fff); - --palette-softBg: rgba(var(--palette-lightChannel, 221 231 238) / 0.24); - --palette-softHoverBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.36 - ); - --palette-softActiveBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.16 - ); - --palette-softActiveColor: #fff; - --palette-softDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-softDisabledBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.1 - ); - --palette-solidColor: var(--palette-600, #555e68); - --palette-solidBg: var(--palette-common-white, #fff); - --palette-solidHoverBg: var(--palette-common-white, #fff); - --palette-solidActiveBg: var(--palette-100, #f0f4f8); - --palette-solidDisabledColor: rgba( - var(--palette-lightChannel, 221 231 238) / 0.72 - ); - --palette-solidDisabledBg: rgba( - var(--palette-lightChannel, 221 231 238) / 0.1 + --joy-palette-focusVisible: var(--joy-palette-200, #dde7ee); + --joy-palette-background-body: rgba(0 0 0 / 0.1); + --joy-palette-background-surface: rgba(0 0 0 / 0.06); + --joy-palette-background-popup: var(--joy-palette-700, #32383e); + --joy-palette-background-level1: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.2 + ); + --joy-palette-background-level2: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.36 + ); + --joy-palette-background-level3: rgba( + var(--joy-palette-darkChannel, 50 56 62) / 0.6 + ); + --joy-palette-text-primary: var(--joy-palette-common-white, #fff); + --joy-palette-text-secondary: var(--joy-palette-200, #dde7ee); + --joy-palette-text-tertiary: var(--joy-palette-300, #cdd7e1); + --joy-palette-text-icon: var(--joy-palette-200, #dde7ee); + --joy-palette-divider: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.32); + --joy-palette-plainColor: var(--joy-palette-50, #fbfcfe); + --joy-palette-plainHoverColor: #fff; + --joy-palette-plainHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.12 + ); + --joy-palette-plainActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.32 + ); + --joy-palette-plainDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-outlinedColor: var(--joy-palette-50, #fbfcfe); + --joy-palette-outlinedBorder: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.5 + ); + --joy-palette-outlinedHoverColor: #fff; + --joy-palette-outlinedHoverBorder: var(--joy-palette-300, #cdd7e1); + --joy-palette-outlinedHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.12 + ); + --joy-palette-outlinedActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.32 + ); + --joy-palette-outlinedDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-outlinedDisabledBorder: rgba(255 255 255 / 0.2); + --joy-palette-softColor: var(--joy-palette-common-white, #fff); + --joy-palette-softHoverColor: var(--joy-palette-common-white, #fff); + --joy-palette-softBg: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.24); + --joy-palette-softHoverBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.36 + ); + --joy-palette-softActiveBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.16 + ); + --joy-palette-softActiveColor: #fff; + --joy-palette-softDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-softDisabledBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.1 + ); + --joy-palette-solidColor: var(--joy-palette-600, #555e68); + --joy-palette-solidBg: var(--joy-palette-common-white, #fff); + --joy-palette-solidHoverBg: var(--joy-palette-common-white, #fff); + --joy-palette-solidActiveBg: var(--joy-palette-100, #f0f4f8); + --joy-palette-solidDisabledColor: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.72 + ); + --joy-palette-solidDisabledBg: rgba( + var(--joy-palette-lightChannel, 221 231 238) / 0.1 ); } diff --git a/packages/pyro-mui-joy/src/common/fonts.css b/packages/pyro-mui-joy/src/common/fonts.css index 881ebed..a1d4ae5 100644 --- a/packages/pyro-mui-joy/src/common/fonts.css +++ b/packages/pyro-mui-joy/src/common/fonts.css @@ -17,9 +17,9 @@ font-named-instance: 'Italic'; } - --fontFamily-body: 'Inter var', + --joy-fontFamily-body: 'Inter var', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -31,9 +31,9 @@ 'Segoe UI Emoji', 'Segoe UI Symbol' ); - --fontFamily-display: 'Inter var', + --joy-fontFamily-display: 'Inter var', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -45,38 +45,38 @@ 'Segoe UI Emoji', 'Segoe UI Symbol' ); - --fontFamily-code: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, + --joy-fontFamily-code: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; - --fontFamily-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol'; + --joy-fontFamily-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; - --fontSize-xs: 0.75rem; - --fontSize-sm: 0.875rem; - --fontSize-md: 1rem; - --fontSize-lg: 1.125rem; - --fontSize-xl: 1.25rem; - --fontSize-xl2: 1.5rem; - --fontSize-xl3: 1.875rem; - --fontSize-xl4: 2.25rem; + --joy-fontSize-xs: 0.75rem; + --joy-fontSize-sm: 0.875rem; + --joy-fontSize-md: 1rem; + --joy-fontSize-lg: 1.125rem; + --joy-fontSize-xl: 1.25rem; + --joy-fontSize-xl2: 1.5rem; + --joy-fontSize-xl3: 1.875rem; + --joy-fontSize-xl4: 2.25rem; - --fontWeight-sm: 300; - --fontWeight-md: 500; - --fontWeight-lg: 600; - --fontWeight-xl: 700; - --focus-thickness: 2px; + --joy-fontWeight-sm: 300; + --joy-fontWeight-md: 500; + --joy-fontWeight-lg: 600; + --joy-fontWeight-xl: 700; + --joy-focus-thickness: 2px; - --lineHeight-xs: 1.33334; - --lineHeight-sm: 1.42858; - --lineHeight-md: 1.5; - --lineHeight-lg: 1.55556; - --lineHeight-xl: 1.66667; + --joy-lineHeight-xs: 1.33334; + --joy-lineHeight-sm: 1.42858; + --joy-lineHeight-md: 1.5; + --joy-lineHeight-lg: 1.55556; + --joy-lineHeight-xl: 1.66667; - --letterSpacing-sm: -0.01em; - --letterSpacing-md: 0.083em; - --letterSpacing-lg: 0.125em; + --joy-letterSpacing-sm: -0.01em; + --joy-letterSpacing-md: 0.083em; + --joy-letterSpacing-lg: 0.125em; - font-family: var(--fontFamily-body); + font-family: var(--joy-fontFamily-body); font-weight: 400; - font-size: var(--fontSize-md); + font-size: var(--joy-fontSize-md); } diff --git a/packages/pyro-mui-joy/src/common/global.css b/packages/pyro-mui-joy/src/common/global.css index 037a192..c0c70c0 100644 --- a/packages/pyro-mui-joy/src/common/global.css +++ b/packages/pyro-mui-joy/src/common/global.css @@ -8,7 +8,7 @@ html { body { margin: 0px; - color: var(--palette-text-primary); + color: var(--joy-palette-text-primary); font-size: 1rem; line-height: 1.5; letter-spacing: 0px; @@ -16,9 +16,9 @@ body { Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-weight: 400; - background-color: var(--background-color); + background-color: var(--joy-background-color); } -.ia_container--root { - background-color: var(--background-color); +.ia_container--joy-root { + background-color: var(--joy-background-color); } diff --git a/packages/pyro-mui-joy/src/common/mixins.css b/packages/pyro-mui-joy/src/common/mixins.css index 9b91e6f..05fc452 100644 --- a/packages/pyro-mui-joy/src/common/mixins.css +++ b/packages/pyro-mui-joy/src/common/mixins.css @@ -12,9 +12,9 @@ $staticProperties: (borderWidth, borderStyle); @mixin component-state($component, $state) { @each $property in $drivenProperties { /* prettier-ignore */ - --$(component)-$(property): var( - --variant-$(state)$(property), - var(--variant-default$(state)$(property)) + --joy-$(component)-$(property): var( + --joy-variant-$(state)$(property), + var(--joy-variant-default$(state)$(property)) ); } } @@ -22,25 +22,25 @@ $staticProperties: (borderWidth, borderStyle); @mixin component-state-forced($component, $variant, $state) { @each $property in $drivenProperties { /* prettier-ignore */ - --$(component)-$(property): var( - --variant-$(variant)$(state)$(property), - var(--variant-default$(state)$(property)) + --joy-$(component)-$(property): var( + --joy-variant-$(variant)$(state)$(property), + var(--joy-variant-default$(state)$(property)) ); } } @mixin variant-support($component) { @each $property in $staticProperties { - --$(component)-$(property): var( - --variant-$(property), - var(--variant-default-$(property)) + --joy-$(component)-$(property): var( + --joy-variant-$(property), + var(--joy-variant-default-$(property)) ); } @each $property in $drivenProperties { - --$(component)-$(property): var( - --variant-$(property), - var(--variant-default$(property)) + --joy-$(component)-$(property): var( + --joy-variant-$(property), + var(--joy-variant-default$(property)) ); } } @@ -48,40 +48,40 @@ $staticProperties: (borderWidth, borderStyle); @mixin variant-forced($component, $variant) { @each $property in $drivenProperties { /* prettier-ignore */ - --variant-$(property): var(--palette-$(variant)$(property)); + --joy-variant-$(property): var(--joy-palette-$(variant)$(property)); @each $state in $states { /* prettier-ignore */ - --variant-$(state)$(property): var( - --palette-$(variant)$(state)$(property), - var(--palette-$(variant)$(property)) + --joy-variant-$(state)$(property): var( + --joy-palette-$(variant)$(state)$(property), + var(--joy-palette-$(variant)$(property)) ); } } @each $property in $staticProperties { - --variant-$(property): var(--variant-$(variant)-$(property)); + --joy-variant-$(property): var(--joy-variant-$(variant)-$(property)); } } @mixin palette-forced($component, $palette) { @each $step in $steps { /* prettier-ignore */ - --palette-$(step): var(--palette-$(palette)-$(step)); + --joy-palette-$(step): var(--joy-palette-$(palette)-$(step)); } @each $variant in $variants { @each $attribute in $attributes { /* prettier-ignore */ - --palette-$(variant)$(attribute): var( - --palette-$(palette)-$(variant)$(attribute) + --joy-palette-$(variant)$(attribute): var( + --joy-palette-$(palette)-$(variant)$(attribute) ); @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var( - --palette-$(palette)-$(variant)$(state)$(attribute), - var(--palette-$(palette)-$(variant)$(attribute)) + --joy-palette-$(variant)$(state)$(attribute): var( + --joy-palette-$(palette)-$(variant)$(state)$(attribute), + var(--joy-palette-$(palette)-$(variant)$(attribute)) ); } } @@ -91,31 +91,33 @@ $staticProperties: (borderWidth, borderStyle); @mixin style-forced($component, $variant, $palette) { @each $property in $drivenProperties { /* prettier-ignore */ - --$(component)-$(property): var( - --palette-$(palette)-$(variant)$(property) + --joy-$(component)-$(property): var( + --joy-palette-$(palette)-$(variant)$(property) ); @each $state in $states { /* prettier-ignore */ - --$(component)-$(state)$(property): var( - --palette-$(palette)-$(variant)$(state)$(property), - var(--palette-$(palette)-$(variant)$(property)) + --joy-$(component)-$(state)$(property): var( + --joy-palette-$(palette)-$(variant)$(state)$(property), + var(--joy-palette-$(palette)-$(variant)$(property)) ); } } @each $property in $staticProperties { - --$(component)-$(property): var(--variant-$(variant)-$(property)); + --joy-$(component)-$(property): var( + --joy-variant-$(variant)-$(property) + ); } } @mixin perspective-symbol($theme, $state, $fill, $stroke) { - --symbolFill--$(state): var( - --$(theme)-symbolFill--$(state), + --joy-symbolFill--joy-$(state): var( + --joy-$(theme)-symbolFill--joy-$(state), $(fill) ) !important; - --symbolStroke--$(state): var( - --$(theme)-symbolStroke--$(state), + --joy-symbolStroke--joy-$(state): var( + --joy-$(theme)-symbolStroke--joy-$(state), $(stroke) ) !important; } diff --git a/packages/pyro-mui-joy/src/common/palettes.css b/packages/pyro-mui-joy/src/common/palettes.css index 2db6ec9..cd31cfb 100644 --- a/packages/pyro-mui-joy/src/common/palettes.css +++ b/packages/pyro-mui-joy/src/common/palettes.css @@ -6,28 +6,30 @@ $steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900); @each $palette in $palettes { [psc='Joy/Palette/$(palette)'] { - --palette-mainChannel: var(--palette-$(palette)-mainChannel); - --palette-lightChannel: var(--palette-$(palette)-lightChannel); - --palette-darkChannel: var(--palette-$(palette)-darkChannel); - --palette-focusedHighlight: var(--palette-$(palette)-focusedHighlight); + --joy-palette-mainChannel: var(--joy-palette-$(palette)-mainChannel); + --joy-palette-lightChannel: var(--joy-palette-$(palette)-lightChannel); + --joy-palette-darkChannel: var(--joy-palette-$(palette)-darkChannel); + --joy-palette-focusedHighlight: var( + --joy-palette-$(palette)-focusedHighlight + ); @each $step in $steps { /* prettier-ignore */ - --palette-$(step): var(--palette-$(palette)-$(step)); + --joy-palette-$(step): var(--joy-palette-$(palette)-$(step)); } @each $variant in $variants { @each $attribute in $attributes { /* prettier-ignore */ - --palette-$(variant)$(attribute): var( - --palette-$(palette)-$(variant)$(attribute) + --joy-palette-$(variant)$(attribute): var( + --joy-palette-$(palette)-$(variant)$(attribute) ); @each $state in $states { /* prettier-ignore */ - --palette-$(variant)$(state)$(attribute): var( - --palette-$(palette)-$(variant)$(state)$(attribute), - var(--palette-$(variant)$(attribute)) + --joy-palette-$(variant)$(state)$(attribute): var( + --joy-palette-$(palette)-$(variant)$(state)$(attribute), + var(--joy-palette-$(variant)$(attribute)) ); } } @@ -49,22 +51,22 @@ $steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900); @each $variant in $variants { @each $property in $drivenProperties { /* prettier-ignore */ - --$(component)-default-$(variant)$(property): var( - --palette-$(palette)-$(variant)$(property) + --joy-$(component)-default-$(variant)$(property): var( + --joy-palette-$(palette)-$(variant)$(property) ); @each $state in $states { /* prettier-ignore */ - --$(component)-default-$(variant)$(state)$(property): var( - --palette-$(palette)-$(variant)$(state)$(property), - var(--palette-$(palette)-$(variant)$(property)) + --joy-$(component)-default-$(variant)$(state)$(property): var( + --joy-palette-$(palette)-$(variant)$(state)$(property), + var(--joy-palette-$(palette)-$(variant)$(property)) ); } } @each $property in $staticProperties { - --$(component)-default-$(variant)-$(property): var( - --variant-$(variant)-$(property) + --joy-$(component)-default-$(variant)-$(property): var( + --joy-variant-$(variant)-$(property) ); } } diff --git a/packages/pyro-mui-joy/src/common/radius.css b/packages/pyro-mui-joy/src/common/radius.css index e6a55bd..f1dc3c6 100644 --- a/packages/pyro-mui-joy/src/common/radius.css +++ b/packages/pyro-mui-joy/src/common/radius.css @@ -1,13 +1,13 @@ :root { - --radius-xs: 4px; - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 20px; + --joy-radius-xs: 4px; + --joy-radius-sm: 8px; + --joy-radius-md: 12px; + --joy-radius-lg: 16px; + --joy-radius-xl: 20px; } @each $size in (xs, sm, md, lg, xl) { [psc='Joy/Radius/$size'] { - border-radius: var(--radius-$(size)); + border-radius: var(--joy-radius-$(size)); } } diff --git a/packages/pyro-mui-joy/src/common/scrollbar.css b/packages/pyro-mui-joy/src/common/scrollbar.css index 6b104c4..b6bf899 100644 --- a/packages/pyro-mui-joy/src/common/scrollbar.css +++ b/packages/pyro-mui-joy/src/common/scrollbar.css @@ -12,13 +12,13 @@ } ::-webkit-scrollbar-thumb { - background-color: var(--palette-neutral-200); - border-radius: var(--radius-md); + background-color: var(--joy-palette-neutral-200); + border-radius: var(--joy-radius-md); border: 6px solid transparent; background-clip: content-box; &:hover { - background-color: var(--palette-neutral-400); + background-color: var(--joy-palette-neutral-400); } } ::-webkit-scrollbar-corner { diff --git a/packages/pyro-mui-joy/src/common/shadow.css b/packages/pyro-mui-joy/src/common/shadow.css index 3533ba3..84fb821 100644 --- a/packages/pyro-mui-joy/src/common/shadow.css +++ b/packages/pyro-mui-joy/src/common/shadow.css @@ -1,35 +1,48 @@ :root { - --shadow-xs: var(--shadowRing, 0 0 #000), - 0 1px 2px 0 rgba(var(--shadowChannel, 187 187 187) / 0.12); - --shadow-sm: var(--shadowRing, 0 0 #000), - 0.3px 0.8px 1.1px rgba(var(--shadowChannel, 187 187 187) / 0.11), - 0.5px 1.3px 1.8px -0.6px rgba(var(--shadowChannel, 187 187 187) / 0.18), - 1.1px 2.7px 3.8px -1.2px rgba(var(--shadowChannel, 187 187 187) / 0.26); - --shadow-md: var(--shadowRing, 0 0 #000), - 0.3px 0.8px 1.1px rgba(var(--shadowChannel, 187 187 187) / 0.12), - 1.1px 2.8px 3.9px -0.4px rgba(var(--shadowChannel, 187 187 187) / 0.17), - 2.4px 6.1px 8.6px -0.8px rgba(var(--shadowChannel, 187 187 187) / 0.23), - 5.3px 13.3px 18.8px -1.2px rgba(var(--shadowChannel, 187 187 187) / 0.29); - --shadow-lg: var(--shadowRing, 0 0 #000), - 0.3px 0.8px 1.1px rgba(var(--shadowChannel, 187 187 187) / 0.11), - 1.8px 4.5px 6.4px -0.2px rgba(var(--shadowChannel, 187 187 187) / 0.13), - 3.2px 7.9px 11.2px -0.4px rgba(var(--shadowChannel, 187 187 187) / 0.16), - 4.8px 12px 17px -0.5px rgba(var(--shadowChannel, 187 187 187) / 0.19), - 7px 17.5px 24.7px -0.7px rgba(var(--shadowChannel, 187 187 187) / 0.21); - --shadow-xl: var(--shadowRing, 0 0 #000), - 0.3px 0.8px 1.1px rgba(var(--shadowChannel, 187 187 187) / 0.11), - 1.8px 4.5px 6.4px -0.2px rgba(var(--shadowChannel, 187 187 187) / 0.13), - 3.2px 7.9px 11.2px -0.4px rgba(var(--shadowChannel, 187 187 187) / 0.16), - 4.8px 12px 17px -0.5px rgba(var(--shadowChannel, 187 187 187) / 0.19), - 7px 17.5px 24.7px -0.7px rgba(var(--shadowChannel, 187 187 187) / 0.21), - 10.2px 25.5px 36px -0.9px rgba(var(--shadowChannel, 187 187 187) / 0.24), - 14.8px 36.8px 52.1px -1.1px rgba(var(--shadowChannel, 187 187 187) / + --joy-shadow-xs: var(--joy-shadowRing, 0 0 #000), + 0 1px 2px 0 rgba(var(--joy-shadowChannel, 187 187 187) / 0.12); + --joy-shadow-sm: var(--joy-shadowRing, 0 0 #000), + 0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11), + 0.5px 1.3px 1.8px -0.6px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.18), + 1.1px 2.7px 3.8px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.26); + --joy-shadow-md: var(--joy-shadowRing, 0 0 #000), + 0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.12), + 1.1px 2.8px 3.9px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.17), + 2.4px 6.1px 8.6px -0.8px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.23), + 5.3px 13.3px 18.8px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.29); + --joy-shadow-lg: var(--joy-shadowRing, 0 0 #000), + 0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11), + 1.8px 4.5px 6.4px -0.2px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.13), + 3.2px 7.9px 11.2px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.16), + 4.8px 12px 17px -0.5px rgba(var(--joy-shadowChannel, 187 187 187) / 0.19), + 7px 17.5px 24.7px -0.7px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.21); + --joy-shadow-xl: var(--joy-shadowRing, 0 0 #000), + 0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11), + 1.8px 4.5px 6.4px -0.2px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.13), + 3.2px 7.9px 11.2px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.16), + 4.8px 12px 17px -0.5px rgba(var(--joy-shadowChannel, 187 187 187) / 0.19), + 7px 17.5px 24.7px -0.7px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.21), + 10.2px 25.5px 36px -0.9px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.24), + 14.8px 36.8px 52.1px -1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.27), - 21px 52.3px 74px -1.2px rgba(var(--shadowChannel, 187 187 187) / 0.29); + 21px 52.3px 74px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / + 0.29); } @each $size in (xs, sm, md, lg, xl) { [psc='Joy/Shadow/$size'] { - box-shadow: var(--shadow-$(size)); + box-shadow: var(--joy-shadow-$(size)); } } diff --git a/packages/pyro-mui-joy/src/common/typography.css b/packages/pyro-mui-joy/src/common/typography.css index ae90d13..66e325c 100644 --- a/packages/pyro-mui-joy/src/common/typography.css +++ b/packages/pyro-mui-joy/src/common/typography.css @@ -20,29 +20,29 @@ $levels: ( /* Variant */ /* Apply component properties */ color: var( - --Typography-Color, + --joy-Typography-Color, rgba( var( - --palette-mainChannel, + --joy-palette-mainChannel, var( - --palette-text-primary, - var(--palette-neutral-800, #25252d) + --joy-palette-text-primary, + var(--joy-palette-neutral-800, #25252d) ) ) / 1 ) ); - background-color: var(--Typography-Bg); - border-color: var(--Typography-Border); - border-width: var(--Typography-borderWidth); - border-style: var(--Typography-borderStyle); - border-radius: var(--Typography-radius, var(--radius-xs)); + background-color: var(--joy-Typography-Bg); + border-color: var(--joy-Typography-Border); + border-width: var(--joy-Typography-borderWidth); + border-style: var(--joy-Typography-borderStyle); + border-radius: var(--joy-Typography-radius, var(--joy-radius-xs)); font-family: var( - --fontFamily-body, + --joy-fontFamily-body, 'Inter', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -55,7 +55,7 @@ $levels: ( 'Segoe UI Symbol' ) ); - margin: var(--Typography-margin, 0px); + margin: var(--joy-Typography-margin, 0px); /*Remove outline unless specifically assigned.*/ &:not([psc='Joy/Variant/outlined']) { @@ -65,13 +65,13 @@ $levels: ( } [psc='Joy/Typography/h1'] { - --Icon-fontSize: calc(1em * var(--lineHeight-xs, 1.33334)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334)); font-family: var( - --fontFamily-display, + --joy-fontFamily-display, 'Inter', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -84,20 +84,20 @@ $levels: ( 'Segoe UI Symbol' ) ); - font-weight: var(--fontWeight-xl, 700); - font-size: var(--Typography-fontSize, var(--fontSize-xl4, 2.25rem)); - line-height: var(--lineHeight-xs, 1.33334); + font-weight: var(--joy-fontWeight-xl, 700); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl4, 2.25rem)); + line-height: var(--joy-lineHeight-xs, 1.33334); letter-spacing: -0.025em; } [psc='Joy/Typography/h2'] { - --Icon-fontSize: calc(1em * var(--lineHeight-xs, 1.33334)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334)); font-family: var( - --fontFamily-display, + --joy-fontFamily-display, 'Inter', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -110,20 +110,23 @@ $levels: ( 'Segoe UI Symbol' ) ); - font-weight: var(--fontWeight-xl, 700); - font-size: var(--Typography-fontSize, var(--fontSize-xl3, 1.875rem)); - line-height: var(--lineHeight-xs, 1.33334); + font-weight: var(--joy-fontWeight-xl, 700); + font-size: var( + --joy-Typography-fontSize, + var(--joy-fontSize-xl3, 1.875rem) + ); + line-height: var(--joy-lineHeight-xs, 1.33334); letter-spacing: -0.025em; } [psc='Joy/Typography/h3'] { - --Icon-fontSize: calc(1em * var(--lineHeight-xs, 1.33334)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334)); font-family: var( - --fontFamily-display, + --joy-fontFamily-display, 'Inter', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -136,20 +139,20 @@ $levels: ( 'Segoe UI Symbol' ) ); - font-weight: var(--fontWeight-lg, 600); - font-size: var(--Typography-fontSize, var(--fontSize-xl2, 1.5rem)); - line-height: var(--lineHeight-xs, 1.33334); + font-weight: var(--joy-fontWeight-lg, 600); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl2, 1.5rem)); + line-height: var(--joy-lineHeight-xs, 1.33334); letter-spacing: -0.025em; } [psc='Joy/Typography/h4'] { - --Icon-fontSize: calc(1em * var(--lineHeight-md, 1.5)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5)); font-family: var( - --fontFamily-display, + --joy-fontFamily-display, 'Inter', var( - --fontFamily-fallback, + --joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -162,100 +165,100 @@ $levels: ( 'Segoe UI Symbol' ) ); - font-weight: var(--fontWeight-lg, 600); - font-size: var(--Typography-fontSize, var(--fontSize-xl, 1.25rem)); - line-height: var(--lineHeight-md, 1.5); + font-weight: var(--joy-fontWeight-lg, 600); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl, 1.25rem)); + line-height: var(--joy-lineHeight-md, 1.5); letter-spacing: -0.025em; } [psc='Joy/Typography/title-lg'] { - font-weight: var(--fontWeight-lg, 600); - font-size: var(--Typography-fontSize, var(--fontSize-lg, 1.125rem)); - line-height: var(--lineHeight-xs, 1.33334); + font-weight: var(--joy-fontWeight-lg, 600); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-lg, 1.125rem)); + line-height: var(--joy-lineHeight-xs, 1.33334); } [psc='Joy/Typography/title-md'] { - font-weight: var(--fontWeight-md, 500); - font-size: var(--Typography-fontSize, var(--fontSize-md, 1rem)); - line-height: var(--lineHeight-md, 1.5); + font-weight: var(--joy-fontWeight-md, 500); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-md, 1rem)); + line-height: var(--joy-lineHeight-md, 1.5); } [psc='Joy/Typography/title-sm'] { - --Icon-fontSize: calc(1em * var(--lineHeight-sm, 1.42858)); - font-weight: var(--fontWeight-md, 500); - font-size: var(--Typography-fontSize, var(--fontSize-sm, 0.875rem)); - line-height: var(--lineHeight-sm, 1.42858); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-sm, 1.42858)); + font-weight: var(--joy-fontWeight-md, 500); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-sm, 0.875rem)); + line-height: var(--joy-lineHeight-sm, 1.42858); } [psc='Joy/Typography/body-lg'] { - --Icon-fontSize: calc(1em * var(--lineHeight-md, 1.5)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5)); color: var( - --Typography-Color, + --joy-Typography-Color, rgba( var( - --palette-mainChannel, + --joy-palette-mainChannel, var( - --palette-text-secondary, - var(--palette-neutral-800, #25252d) + --joy-palette-text-secondary, + var(--joy-palette-neutral-800, #25252d) ) ) / 1 ) ); - font-size: var(--Typography-fontSize, var(--fontSize-lg, 1.125rem)); - line-height: var(--lineHeight-md, 1.5); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-lg, 1.125rem)); + line-height: var(--joy-lineHeight-md, 1.5); } [psc='Joy/Typography/body-md'] { - --Icon-fontSize: calc(1em * var(--lineHeight-md, 1.5)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5)); color: var( - --Typography-Color, + --joy-Typography-Color, rgba( var( - --palette-mainChannel, + --joy-palette-mainChannel, var( - --palette-text-secondary, - var(--palette-neutral-800, #25252d) + --joy-palette-text-secondary, + var(--joy-palette-neutral-800, #25252d) ) ) / 1 ) ); - font-size: var(--Typography-fontSize, var(--fontSize-md, 1rem)); - line-height: var(--lineHeight-md, 1.5); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-md, 1rem)); + line-height: var(--joy-lineHeight-md, 1.5); } [psc='Joy/Typography/body-sm'] { - --Icon-fontSize: calc(1em * var(--lineHeight-md, 1.5)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5)); color: var( - --Typography-Color, + --joy-Typography-Color, rgba( var( - --palette-mainChannel, + --joy-palette-mainChannel, var( - --palette-text-tertiary, - var(--palette-neutral-800, #25252d) + --joy-palette-text-tertiary, + var(--joy-palette-neutral-800, #25252d) ) ) / 1 ) ); - font-size: var(--Typography-fontSize, var(--fontSize-sm, 0.875rem)); - line-height: var(--lineHeight-md, 1.5); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-sm, 0.875rem)); + line-height: var(--joy-lineHeight-md, 1.5); } [psc='Joy/Typography/body-xs'] { - --Icon-fontSize: calc(1em * var(--lineHeight-md, 1.5)); + --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5)); color: var( - --Typography-Color, + --joy-Typography-Color, rgba( var( - --palette-mainChannel, + --joy-palette-mainChannel, var( - --palette-text-tertiary, - var(--palette-neutral-800, #25252d) + --joy-palette-text-tertiary, + var(--joy-palette-neutral-800, #25252d) ) ) / 1 ) ); - font-weight: var(--fontWeight-md, 500); - font-size: var(--Typography-fontSize, var(--fontSize-xs, 0.75rem)); - line-height: var(--lineHeight-md, 1.5); + font-weight: var(--joy-fontWeight-md, 500); + font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xs, 0.75rem)); + line-height: var(--joy-lineHeight-md, 1.5); } diff --git a/packages/pyro-mui-joy/src/common/variants.css b/packages/pyro-mui-joy/src/common/variants.css index 4f3b9d4..7e51f65 100644 --- a/packages/pyro-mui-joy/src/common/variants.css +++ b/packages/pyro-mui-joy/src/common/variants.css @@ -4,38 +4,42 @@ $drivenProperties: (Color, Bg, Border); $staticProperties: (borderWidth, borderStyle); :root { - --variant-plain-borderWidth: 0px; - --variant-plain-borderStyle: none; - --variant-outlined-borderWidth: 1px; - --variant-outlined-borderStyle: solid; - --variant-soft-borderWidth: 0px; - --variant-soft-borderStyle: none; - --variant-solid-borderWidth: 0px; - --variant-solid-borderStyle: none; + --joy-variant-plain-borderWidth: 0px; + --joy-variant-plain-borderStyle: none; + --joy-variant-outlined-borderWidth: 1px; + --joy-variant-outlined-borderStyle: solid; + --joy-variant-soft-borderWidth: 0px; + --joy-variant-soft-borderStyle: none; + --joy-variant-solid-borderWidth: 0px; + --joy-variant-solid-borderStyle: none; /* Default to outlined neutral */ @each $property in $drivenProperties { - --variant-default$(property): var( - --palette-neutral-outlined$(property) + --joy-variant-default$(property): var( + --joy-palette-neutral-outlined$(property) + ); + --joy-variant-$(property): var( + --joy-palette-neutral-outlined$(property) ); - --variant-$(property): var(--palette-neutral-outlined$(property)); @each $state in $states { /* prettier-ignore */ - --variant-default$(state)$(property): var( - --palette-neutral-outlined$(state)$(property), - var(--palette-neutral-outlined$(property)) + --joy-variant-default$(state)$(property): var( + --joy-palette-neutral-outlined$(state)$(property), + var(--joy-palette-neutral-outlined$(property)) ); /* prettier-ignore */ - --variant-$(state)$(property): var( - --palette-neutral-outlined$(state)$(property), - var(--palette-neutral-outlined$(property)) + --joy-variant-$(state)$(property): var( + --joy-palette-neutral-outlined$(state)$(property), + var(--joy-palette-neutral-outlined$(property)) ); } } @each $property in $staticProperties { - --variant-default$(property): var(--variant-outlined-$(property)); + --joy-variant-default$(property): var( + --joy-variant-outlined-$(property) + ); } } @@ -43,19 +47,22 @@ $staticProperties: (borderWidth, borderStyle); [psc='Joy/Variant/$(variant)'] { @each $property in $drivenProperties { /* prettier-ignore */ - --variant-$(property): var(--palette-$(variant)$(property), unset); + --joy-variant-$(property): var(--joy-palette-$(variant)$(property), unset); @each $state in $states { /* prettier-ignore */ - --variant-$(state)$(property): var( - --palette-$(variant)$(state)$(property), - var(--palette-$(variant)$(property), unset) + --joy-variant-$(state)$(property): var( + --joy-palette-$(variant)$(state)$(property), + var(--joy-palette-$(variant)$(property), unset) ); } } @each $property in $staticProperties { - --variant-$(property): var(--variant-$(variant)-$(property), unset); + --joy-variant-$(property): var( + --joy-variant-$(variant)-$(property), + unset + ); } &:disabled { diff --git a/packages/pyro-mui-joy/src/components/buttons.css b/packages/pyro-mui-joy/src/components/buttons.css index 99e4dcd..b195285 100644 --- a/packages/pyro-mui-joy/src/components/buttons.css +++ b/packages/pyro-mui-joy/src/components/buttons.css @@ -1,17 +1,17 @@ /* Button */ [data-component='ia.input.button'], -.ia_button--primary, -.ia_button--secondary, +.ia_button--joy-primary, +.ia_button--joy-secondary, .ia_passwordFieldComponent__visibilityLink { @include variant-support(Button); /* Default to Medium size */ - --Icon-margin: initial; - --Icon-fontSize: 1.5rem; - --CircularProgress-size: 24px; - --Button-gap: 0.5rem; - min-height: var(--Button-minHeight, 2.5rem); - font-size: var(--fontSize-sm); + --joy-Icon-margin: initial; + --joy-Icon-fontSize: 1.5rem; + --joy-CircularProgress-size: 24px; + --joy-Button-gap: 0.5rem; + min-height: var(--joy-Button-minHeight, 2.5rem); + font-size: var(--joy-fontSize-sm); /* Style */ cursor: pointer; @@ -21,20 +21,20 @@ position: relative; text-decoration: none; - font-family: var(--fontFamily-body); - font-weight: var(--fontWeight-lg); + font-family: var(--joy-fontFamily-body); + font-weight: var(--joy-fontWeight-lg); line-height: 1; padding-block: 0.25rem; padding-inline: 1rem; /* Apply component properties */ - color: var(--Button-Color); - background-color: var(--Button-Bg); - border-color: var(--Button-Border); - border-width: var(--Button-borderWidth); - border-style: var(--Button-borderStyle); - border-radius: var(--Button-radius, var(--radius-sm)); - margin: var(--Button-margin); + color: var(--joy-Button-Color); + background-color: var(--joy-Button-Bg); + border-color: var(--joy-Button-Border); + border-width: var(--joy-Button-borderWidth); + border-style: var(--joy-Button-borderStyle); + border-radius: var(--joy-Button-radius, var(--joy-radius-sm)); + margin: var(--joy-Button-margin); &:hover { @include component-state(Button, Hover); @@ -60,52 +60,52 @@ [psc='Joy/Size/sm'] [data-component='ia.input.button'], [psc='Joy/Size/sm'][data-component='ia.input.button'][data-component='ia.input.button'], [psc='Joy/Size/sm'] ~ .ia_passwordFieldComponent__visibilityLink { - --IconButton-size: 2rem; - --Icon-fontSize: calc(var(--IconButton-size) / 1.6); + --joy-IconButton-size: 2rem; + --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.6); - min-height: var(--Button-minHeight, 2rem); - --_Button-minHeight: var(--Button-minHeight, 2rem); + min-height: var(--joy-Button-minHeight, 2rem); + --joy-_Button-minHeight: var(--joy-Button-minHeight, 2rem); padding-block: 2px; padding-inline: 0.75rem; - font-size: var(--fontSize-sm); + font-size: var(--joy-fontSize-sm); } [psc='Joy/Size/md'] [data-component='ia.input.button'], [psc='Joy/Size/md'][data-component='ia.input.button'][data-component='ia.input.button'], [psc='Joy/Size/md'] ~ .ia_passwordFieldComponent__visibilityLink { - --IconButton-size: 2.25rem; - --Icon-fontSize: calc(var(--IconButton-size) / 1.5); + --joy-IconButton-size: 2.25rem; + --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.5); - min-height: var(--Button-minHeight, 2.5rem); - --_Button-minHeight: var(--Button-minHeight, 2.5rem); + min-height: var(--joy-Button-minHeight, 2.5rem); + --joy-_Button-minHeight: var(--joy-Button-minHeight, 2.5rem); padding-block: 0.25rem; padding-inline: 1rem; - font-size: var(--fontSize-sm); + font-size: var(--joy-fontSize-sm); } [psc='Joy/Size/lg'] [data-component='ia.input.button'], [psc='Joy/Size/lg'][data-component='ia.input.button'][data-component='ia.input.button'], [psc='Joy/Size/lg'] ~ .ia_passwordFieldComponent__visibilityLink { - --IconButton-size: 2.75rem; - --Icon-fontSize: calc(var(--IconButton-size) / 1.571); + --joy-IconButton-size: 2.75rem; + --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.571); - min-height: var(--Button-minHeight, 3rem); - --_Button-minHeight: var(--Button-minHeight, 3rem); + min-height: var(--joy-Button-minHeight, 3rem); + --joy-_Button-minHeight: var(--joy-Button-minHeight, 3rem); padding-block: 0.375rem; padding-inline: 1.5rem; - font-size: var(--fontSize-md); + font-size: var(--joy-fontSize-md); } .ia_passwordFieldComponent__visibilityLink { @include variant-forced(Button, plain); margin-top: 0px !important; - width: var(--_Button-minHeight) !important; - min-width: var(--_Button-minHeight) !important; + width: var(--joy-_Button-minHeight) !important; + min-width: var(--joy-_Button-minHeight) !important; & svg { - min-height: var(--Icon-fontSize, 2rem) !important; - min-width: var(--Icon-fontSize, 2rem) !important; + min-height: var(--joy-Icon-fontSize, 2rem) !important; + min-width: var(--joy-Icon-fontSize, 2rem) !important; } } diff --git a/packages/pyro-mui-joy/src/components/canvas.css b/packages/pyro-mui-joy/src/components/canvas.css index 42d2dad..d2da3bf 100644 --- a/packages/pyro-mui-joy/src/components/canvas.css +++ b/packages/pyro-mui-joy/src/components/canvas.css @@ -1,22 +1,25 @@ .canvas { @include variant-support(Canvas); /* Define component properties */ - --Canvas-radius: var(--radius-sm); - --Canvas-focusedThickness: var(--focus-thickness); - --Canvas-focusedHighlight: var(--palette-primary-solidBg); + --joy-Canvas-radius: var(--joy-radius-sm); + --joy-Canvas-focusedThickness: var(--joy-focus-thickness); + --joy-Canvas-focusedHighlight: var(--joy-palette-primary-solidBg); /* Apply component properties */ - color: var(--Canvas-Color); - background-color: var(--Canvas-Bg, var(--palette-background-surface)); - border-color: var(--Canvas-Border); - border-width: var(--Canvas-borderWidth); - border-style: var(--Canvas-borderStyle); - border-radius: var(--Canvas-radius); + color: var(--joy-Canvas-Color); + background-color: var( + --joy-Canvas-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Canvas-Border); + border-width: var(--joy-Canvas-borderWidth); + border-style: var(--joy-Canvas-borderStyle); + border-radius: var(--joy-Canvas-radius); &:hover { - --Canvas-Border: var( - --variant-HoverBorder, - var(--Canvas-default-HoverBorder) + --joy-Canvas-Border: var( + --joy-variant-HoverBorder, + var(--joy-Canvas-default-HoverBorder) ); } @@ -29,15 +32,18 @@ &[psc='Joy/Variant/plain'], &[psc='Joy/Variant/outlined'] { - --Canvas-Bg: var(--palette-background-surface); + --joy-Canvas-Bg: var(--joy-palette-background-surface); } &:focus-within, &:active { - outline-width: var(--Canvas-focusedThickness); + outline-width: var(--joy-Canvas-focusedThickness); outline-style: solid; - outline-color: var(--Canvas-focusedHighlight); - outline-offset: min(calc(var(--Canvas-borderWidth, 0px) * -1), -1px); + outline-color: var(--joy-Canvas-focusedHighlight); + outline-offset: min( + calc(var(--joy-Canvas-borderWidth, 0px) * -1), + -1px + ); } } diff --git a/packages/pyro-mui-joy/src/components/dropdown.css b/packages/pyro-mui-joy/src/components/dropdown.css index 1c5be8e..ef430d8 100644 --- a/packages/pyro-mui-joy/src/components/dropdown.css +++ b/packages/pyro-mui-joy/src/components/dropdown.css @@ -4,76 +4,81 @@ @include variant-support(Input); /* Define component properties */ - --Input-radius: var(--radius-sm); - --Input-gap: 0.5rem; - --Input-placeholderColor: inherit; - --Input-placeholderOpacity: 0.5; - --Input-focused: 0; - --Input-focusedThickness: var(--focus-thickness); - --Input-focusedHighlight: var( - --variant-focusedHighlight, - var(--palette-focusVisible) + --joy-Input-radius: var(--joy-radius-sm); + --joy-Input-gap: 0.5rem; + --joy-Input-placeholderColor: inherit; + --joy-Input-placeholderOpacity: 0.5; + --joy-Input-focused: 0; + --joy-Input-focusedThickness: var(--joy-focus-thickness); + --joy-Input-focusedHighlight: var( + --joy-variant-focusedHighlight, + var(--joy-palette-focusVisible) ); - --Icon-fontSize: 1.5rem; - --Input-decoratorChildOffset: min( + --joy-Icon-fontSize: 1.5rem; + --joy-Input-decoratorChildOffset: min( calc( - var(--Input-paddingInline) - + var(--joy-Input-paddingInline) - ( - var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Input-decoratorChildHeight) + var(--joy-Input-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Input-decoratorChildHeight) ) / 2 ), - var(--Input-paddingInline) + var(--joy-Input-paddingInline) ); - --_Input-paddingBlock: max( + --joy-_Input-paddingBlock: max( ( - var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Input-decoratorChildHeight) + var(--joy-Input-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Input-decoratorChildHeight) ) / 2, 0px ); - --Input-decoratorChildRadius: max( - var(--Input-radius) - var(--variant-borderWidth, 0px) - - var(--_Input-paddingBlock), + --joy-Input-decoratorChildRadius: max( + var(--joy-Input-radius) - var(--joy-variant-borderWidth, 0px) - + var(--joy-_Input-paddingBlock), min( - var(--_Input-paddingBlock) + var(--variant-borderWidth, 0px), - var(--Input-radius) / 2 + var(--joy-_Input-paddingBlock) + var(--joy-variant-borderWidth, 0px), + var(--joy-Input-radius) / 2 ) ); - --Button-minHeight: var(--Input-decoratorChildHeight); - --IconButton-size: var(--Input-decoratorChildHeight); - --Button-radius: var(--Input-decoratorChildRadius); - --IconButton-radius: var(--Input-decoratorChildRadius); + --joy-Button-minHeight: var(--joy-Input-decoratorChildHeight); + --joy-IconButton-size: var(--joy-Input-decoratorChildHeight); + --joy-Button-radius: var(--joy-Input-decoratorChildRadius); + --joy-IconButton-radius: var(--joy-Input-decoratorChildRadius); /* Default to Medium size */ - --Input-minHeight: 2.5rem; - --Input-paddingInline: 0.75rem; - --Input-decoratorChildHeight: min(2rem, var(--Input-minHeight)); + --joy-Input-minHeight: 2.5rem; + --joy-Input-paddingInline: 0.75rem; + --joy-Input-decoratorChildHeight: min(2rem, var(--joy-Input-minHeight)); /* Style */ box-sizing: border-box; min-width: 0px; - min-height: var(--Input-minHeight) !important; + min-height: var(--joy-Input-minHeight) !important; position: relative; display: flex; - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); /* Apply component properties */ overflow: visible; - color: var(--Input-Color); - background-color: var(--Input-Bg, var(--palette-background-surface)); - border-color: var(--Input-Border); - border-width: var(--Input-borderWidth); - border-style: var(--Input-borderStyle); - border-radius: var(--Input-radius); - min-height: var(--Input-minHeight); - padding-inline: var(--Input-paddingInline); + color: var(--joy-Input-Color); + background-color: var( + --joy-Input-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Input-Border); + border-width: var(--joy-Input-borderWidth); + border-style: var(--joy-Input-borderStyle); + border-radius: var(--joy-Input-radius); + min-height: var(--joy-Input-minHeight); + padding-inline: var(--joy-Input-paddingInline); &:hover { - --Input-Border: var( - --variant-HoverBorder, - var(--Input-default-HoverBorder) + --joy-Input-Border: var( + --joy-variant-HoverBorder, + var(--joy-Input-default-HoverBorder) ); } @@ -85,29 +90,38 @@ } &[psc='Joy/Size/sm'] { - --Input-minHeight: 2rem; - --Input-paddingInline: 0.5rem; - --Input-decoratorChildHeight: min(1.5rem, var(--Input-minHeight)); - font-size: var(--fontSize-sm, 0.875rem); + --joy-Input-minHeight: 2rem; + --joy-Input-paddingInline: 0.5rem; + --joy-Input-decoratorChildHeight: min( + 1.5rem, + var(--joy-Input-minHeight) + ); + font-size: var(--joy-fontSize-sm, 0.875rem); } &[psc='Joy/Size/md'] { - --Input-minHeight: 2.25rem; - --Input-paddingInline: 0.75rem; - --Input-decoratorChildHeight: min(1.75rem, var(--Input-minHeight)); - font-size: var(--fontSize-md, 1rem); + --joy-Input-minHeight: 2.25rem; + --joy-Input-paddingInline: 0.75rem; + --joy-Input-decoratorChildHeight: min( + 1.75rem, + var(--joy-Input-minHeight) + ); + font-size: var(--joy-fontSize-md, 1rem); } &[psc='Joy/Size/lg'] { - --Input-minHeight: 2.75rem; - --Input-paddingInline: 1rem; - --Input-decoratorChildHeight: min(2.25rem, var(--Input-minHeight)); - font-size: var(--fontSize-lg, 1.125rem); + --joy-Input-minHeight: 2.75rem; + --joy-Input-paddingInline: 1rem; + --joy-Input-decoratorChildHeight: min( + 2.25rem, + var(--joy-Input-minHeight) + ); + font-size: var(--joy-fontSize-lg, 1.125rem); } [psc='Joy/Variant/plain'], [psc='Joy/Variant/outlined'] { - --Input-Bg: var(--palette-background-surface); + --joy-Input-Bg: var(--joy-palette-background-surface); } svg { @@ -115,8 +129,8 @@ } input { - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); } &.iaDropdownCommon > div { @@ -124,7 +138,7 @@ } &:focus-within::before { - --Input-focused: 1; + --joy-Input-focused: 1; } &::before { @@ -135,21 +149,21 @@ pointer-events: none; inset: 0px; z-index: 1; - border-radius: var(--Input-radius, inherit); - margin: calc(var(--Input-borderWidth, 0px) * -1); - box-shadow: var(--Input-focusedInset, inset) 0 0 0 - calc(var(--Input-focused) * var(--Input-focusedThickness)) - var(--Input-focusedHighlight); + border-radius: var(--joy-Input-radius, inherit); + margin: calc(var(--joy-Input-borderWidth, 0px) * -1); + box-shadow: var(--joy-Input-focusedInset, inset) 0 0 0 + calc(var(--joy-Input-focused) * var(--joy-Input-focusedThickness)) + var(--joy-Input-focusedHighlight); } &__placeholder { - opacity: var(--Input-placeholderOpacity); + opacity: var(--joy-Input-placeholderOpacity); } } .iaDropdownCommon { &_search { - color: var(--palette-text-primary); + color: var(--joy-palette-text-primary); } &_search_enabled { @@ -159,15 +173,15 @@ .iaDropdownCommon_clear_value, .ia_dropdown__expandIcon.material-icons.md-24 { - --Icon-margin: initial; + --joy-Icon-margin: initial; - min-width: var(--IconButton-size, 2.5rem); - min-height: var(--IconButton-size, 2.5rem); + min-width: var(--joy-IconButton-size, 2.5rem); + min-height: var(--joy-IconButton-size, 2.5rem); padding-inline: 0.25rem; padding-block: 0px; - margin: var(--IconButton-margin); - border-radius: var(--IconButton-radius, var(--radius-sm)); + margin: var(--joy-IconButton-margin); + border-radius: var(--joy-IconButton-radius, var(--joy-radius-sm)); cursor: pointer; display: inline-flex; @@ -176,21 +190,21 @@ -webkit-box-pack: center; justify-content: center; position: relative; - --variant-borderWidth: 0px; + --joy-variant-borderWidth: 0px; - margin-inline-start: calc(var(--_Input-paddingBlock) / 2); - margin-inline-end: calc(var(--Input-decoratorChildOffset) * -1); + margin-inline-start: calc(var(--joy-_Input-paddingBlock) / 2); + margin-inline-end: calc(var(--joy-Input-decoratorChildOffset) * -1); - margin-top: calc(var(--Input-decoratorChildOffset) / 2); - margin-bottom: calc(var(--Input-decoratorChildOffset) / 2); - margin-left: var(--Input-decoratorChildOffset); + margin-top: calc(var(--joy-Input-decoratorChildOffset) / 2); + margin-bottom: calc(var(--joy-Input-decoratorChildOffset) / 2); + margin-left: var(--joy-Input-decoratorChildOffset); symbol { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - margin: var(--Icon-margin); + margin: var(--joy-Icon-margin); width: 1em; height: 1em; display: inline-block; @@ -198,8 +212,8 @@ -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - font-size: var(--Icon-fontSize, 1.25rem); - color: var(--Icon-color); + font-size: var(--joy-Icon-fontSize, 1.25rem); + color: var(--joy-Icon-color); } } @@ -207,20 +221,20 @@ @include variant-support(Chip); @include variant-forced(Chip, soft); - --Chip-radius: 1.5rem; + --joy-Chip-radius: 1.5rem; cursor: pointer; - color: var(--Chip-Color); - background-color: var(--Chip-Bg); - border-color: var(--Chip-Border); - border-width: var(--Chip-borderWidth); - border-style: var(--Chip-borderStyle); - border-radius: var(--Chip-radius); + color: var(--joy-Chip-Color); + background-color: var(--joy-Chip-Bg); + border-color: var(--joy-Chip-Border); + border-width: var(--joy-Chip-borderWidth); + border-style: var(--joy-Chip-borderStyle); + border-radius: var(--joy-Chip-radius); - font-size: var(--joy-fontSize-sm); - font-weight: var(--joy-fontWeight-md); - font-family: var(--joy-fontFamily-body); + font-size: var(--joy-joy-fontSize-sm); + font-weight: var(--joy-joy-fontWeight-md); + font-family: var(--joy-joy-fontFamily-body); margin-block-start: 3px; margin-block-end: 3px; padding-inline-start: 12px; @@ -231,18 +245,18 @@ @include variant-support(Button); @include variant-forced(Button, solid); - --Button-radius: 100%; + --joy-Button-radius: 100%; margin-right: -7px; height: 22px; width: 22px; - color: var(--Button-Color); - background-color: var(--Button-Bg); - border-color: var(--Button-Border); - border-width: var(--Button-borderWidth); - border-style: var(--Button-borderStyle); - border-radius: var(--Button-radius); + color: var(--joy-Button-Color); + background-color: var(--joy-Button-Bg); + border-color: var(--joy-Button-Border); + border-width: var(--joy-Button-borderWidth); + border-style: var(--joy-Button-borderStyle); + border-radius: var(--joy-Button-radius); &:hover { @include component-state-forced(Button, solid, Hover); @@ -257,16 +271,16 @@ .ia_dropdown__expandIcon { @include variant-support(Button); - --Button-borderStyle: none; - --Button-radius: var(--radius-sm); + --joy-Button-borderStyle: none; + --joy-Button-radius: var(--joy-radius-sm); - color: var(--Button-Color); - background-color: var(--Button-Bg); - border-color: var(--Button-Border); - border-width: var(--Button-borderWidth); - border-style: var(--Button-borderStyle); - border-radius: var(--Button-radius); - border-radius: var(--IconButton-radius, var(--radius-sm)); + color: var(--joy-Button-Color); + background-color: var(--joy-Button-Bg); + border-color: var(--joy-Button-Border); + border-width: var(--joy-Button-borderWidth); + border-style: var(--joy-Button-borderStyle); + border-radius: var(--joy-Button-radius); + border-radius: var(--joy-IconButton-radius, var(--joy-radius-sm)); &:hover { @include component-state(Button, Hover); @@ -278,12 +292,12 @@ } .ia_dropdown__optionsModal { - background-color: var(--palette-background-popup); - border-color: var(--palette-neutral-outlinedBorder); - border-width: var(--variant-outlined-borderWidth); - border-style: var(--variant-outlined-borderStyle); - box-shadow: var(--shadow-lg); - border-radius: var(--radius-sm); + background-color: var(--joy-palette-background-popup); + border-color: var(--joy-palette-neutral-outlinedBorder); + border-width: var(--joy-variant-outlined-borderWidth); + border-style: var(--joy-variant-outlined-borderStyle); + box-shadow: var(--joy-shadow-lg); + border-radius: var(--joy-radius-sm); } .ia_dropdown__option { @@ -291,65 +305,72 @@ @include style-forced(Option, plain, neutral); /* Define component properties */ - --OptionDivider-gap: 0.375rem; - --Option-minHeight: 2.5rem; - --Option-paddingY: 0.375rem; - --Option-paddingX: 0.75rem; - --Option-fontSize: var(--joy-fontSize-md); - --Option-paddingLeft: var(--Option-paddingX); - --Option-paddingRight: var(--Option-paddingX); - --Option-startActionTranslateX: calc(0.5 * var(--Option-paddingLeft)); - --Option-endActionTranslateX: calc(-0.5 * var(--Option-paddingRight)); + --joy-OptionDivider-gap: 0.375rem; + --joy-Option-minHeight: 2.5rem; + --joy-Option-paddingY: 0.375rem; + --joy-Option-paddingX: 0.75rem; + --joy-Option-fontSize: var(--joy-joy-fontSize-md); + --joy-Option-paddingLeft: var(--joy-Option-paddingX); + --joy-Option-paddingRight: var(--joy-Option-paddingX); + --joy-Option-startActionTranslateX: calc( + 0.5 * var(--joy-Option-paddingLeft) + ); + --joy-Option-endActionTranslateX: calc( + -0.5 * var(--joy-Option-paddingRight) + ); /* Style */ - font-family: var(--fontFamily-body); + font-family: var(--joy-fontFamily-body); padding-block: calc( - var(--Option-paddingY) - var(--Option-borderWidth, 0px) + var(--joy-Option-paddingY) - var(--joy-Option-borderWidth, 0px) ); - margin-inline: var(--ListItemButton-marginInline); + margin-inline: var(--joy-ListItemButton-marginInline); text-align: initial; background-color: initial; cursor: pointer; - margin-block-start: var(--List-gap); + margin-block-start: var(--joy-List-gap); padding-inline-start: calc( - var(--Option-paddingLeft) + + var(--joy-Option-paddingLeft) + var( - --Option-startActionWidth, - var(--unstable_startActionWidth, 0px) + --joy-Option-startActionWidth, + var(--joy-unstable_startActionWidth, 0px) ) ); padding-inline-end: calc( - var(--Option-paddingRight) + - var(--Option-endActionWidth, var(--unstable_endActionWidth, 0px)) + var(--joy-Option-paddingRight) + + var( + --joy-Option-endActionWidth, + var(--joy-unstable_endActionWidth, 0px) + ) ); - min-block-size: var(--Option-minHeight); + min-block-size: var(--joy-Option-minHeight); /* Apply component properties */ - color: var(--Option-Color); - background-color: var(--Option-Bg); - border-color: var(--Option-Border); - border-width: var(--Option-borderWidth); - border-style: var(--Option-borderStyle); - font-size: var(--Option-fontSize); + color: var(--joy-Option-Color); + background-color: var(--joy-Option-Bg); + border-color: var(--joy-Option-Border); + border-width: var(--joy-Option-borderWidth); + border-style: var(--joy-Option-borderStyle); + font-size: var(--joy-Option-fontSize); &:hover { - --Option-Bg: var(--palette-neutral-plainHoverBg); + --joy-Option-Bg: var(--joy-palette-neutral-plainHoverBg); } - &--selected { + &--joy-selected { @include style-forced(Option, soft, primary); - font-weight: var(--fontWeight-md); + font-weight: var(--joy-fontWeight-md); } } /* Resets and Adjustments */ .iaDropdownCommon.iaDropdownCommon_multi-select > div { & > *:first-child:has(.ia_dropdown__valuePill) { - margin-left: calc(var(--Input-decoratorChildOffset) * -1); + margin-left: calc(var(--joy-Input-decoratorChildOffset) * -1); } & > *:last-child:has(symbol) { - margin-right: calc(var(--Input-decoratorChildOffset) * -1); + margin-right: calc(var(--joy-Input-decoratorChildOffset) * -1); } } diff --git a/packages/pyro-mui-joy/src/components/numeric-entry.css b/packages/pyro-mui-joy/src/components/numeric-entry.css index 7200a8d..90254f7 100644 --- a/packages/pyro-mui-joy/src/components/numeric-entry.css +++ b/packages/pyro-mui-joy/src/components/numeric-entry.css @@ -3,76 +3,81 @@ @include variant-support(Input); /* Define component properties */ - --Input-radius: var(--radius-sm); - --Input-gap: 0.5rem; - --Input-placeholderColor: inherit; - --Input-placeholderOpacity: 0.5; - --Input-focused: 0; - --Input-focusedThickness: var(--focus-thickness); - --Input-focusedHighlight: var( - --variant-focusedHighlight, - var(--palette-focusVisible) + --joy-Input-radius: var(--joy-radius-sm); + --joy-Input-gap: 0.5rem; + --joy-Input-placeholderColor: inherit; + --joy-Input-placeholderOpacity: 0.5; + --joy-Input-focused: 0; + --joy-Input-focusedThickness: var(--joy-focus-thickness); + --joy-Input-focusedHighlight: var( + --joy-variant-focusedHighlight, + var(--joy-palette-focusVisible) ); - --Icon-fontSize: 0.85rem; - --Input-decoratorChildOffset: min( + --joy-Icon-fontSize: 0.85rem; + --joy-Input-decoratorChildOffset: min( calc( - var(--Input-paddingInline) - + var(--joy-Input-paddingInline) - ( - var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Input-decoratorChildHeight) + var(--joy-Input-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Input-decoratorChildHeight) ) / 2 ), - var(--Input-paddingInline) + var(--joy-Input-paddingInline) ); - --_Input-paddingBlock: max( + --joy-_Input-paddingBlock: max( ( - var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Input-decoratorChildHeight) + var(--joy-Input-minHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Input-decoratorChildHeight) ) / 2, 0px ); - --Input-decoratorChildRadius: max( - var(--Input-radius) - var(--variant-borderWidth, 0px) - - var(--_Input-paddingBlock), + --joy-Input-decoratorChildRadius: max( + var(--joy-Input-radius) - var(--joy-variant-borderWidth, 0px) - + var(--joy-_Input-paddingBlock), min( - var(--_Input-paddingBlock) + var(--variant-borderWidth, 0px), - var(--Input-radius) / 2 + var(--joy-_Input-paddingBlock) + var(--joy-variant-borderWidth, 0px), + var(--joy-Input-radius) / 2 ) ); - --Button-minHeight: var(--Input-decoratorChildHeight); - --IconButton-size: var(--Input-decoratorChildHeight); - --Button-radius: var(--Input-decoratorChildRadius); - --IconButton-radius: var(--Input-decoratorChildRadius); + --joy-Button-minHeight: var(--joy-Input-decoratorChildHeight); + --joy-IconButton-size: var(--joy-Input-decoratorChildHeight); + --joy-Button-radius: var(--joy-Input-decoratorChildRadius); + --joy-IconButton-radius: var(--joy-Input-decoratorChildRadius); /* Default to Medium size */ - --Input-minHeight: 2.25rem; - --Input-paddingInline: 0.75rem; - --Input-decoratorChildHeight: min(1.75rem, var(--Input-minHeight)); + --joy-Input-minHeight: 2.25rem; + --joy-Input-paddingInline: 0.75rem; + --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight)); /* Style */ box-sizing: border-box; min-width: 0px; - min-height: var(--Input-minHeight); + min-height: var(--joy-Input-minHeight); overflow: visible; position: relative; display: flex; - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); /* Apply component properties */ - color: var(--Input-Color); - background-color: var(--Input-Bg, var(--palette-background-surface)); - border-color: var(--Input-Border); - border-width: var(--Input-borderWidth); - border-style: var(--Input-borderStyle); - border-radius: var(--Input-radius); - min-height: var(--Input-minHeight) !important; - padding-inline: var(--Input-paddingInline); + color: var(--joy-Input-Color); + background-color: var( + --joy-Input-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Input-Border); + border-width: var(--joy-Input-borderWidth); + border-style: var(--joy-Input-borderStyle); + border-radius: var(--joy-Input-radius); + min-height: var(--joy-Input-minHeight) !important; + padding-inline: var(--joy-Input-paddingInline); &:hover { - --Input-Border: var( - --variant-HoverBorder, - var(--Input-default-HoverBorder) + --joy-Input-Border: var( + --joy-variant-HoverBorder, + var(--joy-Input-default-HoverBorder) ); } @@ -85,23 +90,23 @@ &[psc='Joy/Variant/plain'], &[psc='Joy/Variant/outlined'] { - --Input-Bg: var(--palette-background-surface); + --joy-Input-Bg: var(--joy-palette-background-surface); } &::placeholder { - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); - color: var(--Input-placeholderColor); - opacity: var(--Input-placeholderOpacity); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); + color: var(--joy-Input-placeholderColor); + opacity: var(--joy-Input-placeholderOpacity); } &:focus-within { - outline-width: var(--Input-focusedThickness); + outline-width: var(--joy-Input-focusedThickness); outline-style: solid; - outline-color: var(--Input-focusedHighlight); + outline-color: var(--joy-Input-focusedHighlight); outline-offset: min( - calc(var(--Input-borderWidth, 0px) * -1), - calc(var(--Input-focusedThickness) * -1) + calc(var(--joy-Input-borderWidth, 0px) * -1), + calc(var(--joy-Input-focusedThickness) * -1) ); } @@ -111,17 +116,17 @@ input { border: none; - color: var(--Input-Color); + color: var(--joy-Input-Color); background-color: transparent; - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); - /* margin-inline-start: calc(var(--Input-decoratorChildOffset) * -1); */ + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); + /* margin-inline-start: calc(var(--joy-Input-decoratorChildOffset) * -1); */ &::placeholder { - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); - color: var(--Input-placeholderColor); - opacity: var(--Input-placeholderOpacity); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); + color: var(--joy-Input-placeholderColor); + opacity: var(--joy-Input-placeholderOpacity); } } } @@ -135,15 +140,15 @@ .ia_numericEntryFieldComponent__editLink { @include variant-support(IconButton); - --Icon-margin: initial; + --joy-Icon-margin: initial; - min-width: var(--IconButton-size, 2.25rem) !important; - min-height: var(--IconButton-size, 2.25rem) !important; + min-width: var(--joy-IconButton-size, 2.25rem) !important; + min-height: var(--joy-IconButton-size, 2.25rem) !important; padding-inline: 0.25rem; padding-block: 0px; - margin: var(--IconButton-margin); - border-radius: var(--IconButton-radius, var(--radius-sm)); + margin: var(--joy-IconButton-margin); + border-radius: var(--joy-IconButton-radius, var(--joy-radius-sm)); cursor: pointer; display: inline-flex; @@ -152,20 +157,20 @@ -webkit-box-pack: center; justify-content: center; position: relative; - --variant-borderWidth: 0px; + --joy-variant-borderWidth: 0px; - margin-inline-start: calc(var(--_Input-paddingBlock) / 2); - margin-inline-end: calc(var(--Input-decoratorChildOffset) * -1); + margin-inline-start: calc(var(--joy-_Input-paddingBlock) / 2); + margin-inline-end: calc(var(--joy-Input-decoratorChildOffset) * -1); - --Button-borderStyle: none; - --Button-radius: var(--radius-sm); + --joy-Button-borderStyle: none; + --joy-Button-radius: var(--joy-radius-sm); - color: var(--IconButton-Color); - background-color: var(--IconButton-Bg); - border-color: var(--IconButton-Border); - border-width: var(--IconButton-borderWidth); - border-style: var(--IconButton-borderStyle); - border-radius: var(--IconButton-radius); + color: var(--joy-IconButton-Color); + background-color: var(--joy-IconButton-Bg); + border-color: var(--joy-IconButton-Border); + border-width: var(--joy-IconButton-borderWidth); + border-style: var(--joy-IconButton-borderStyle); + border-radius: var(--joy-IconButton-radius); &:hover { @include component-state(IconButton, Hover); @@ -180,7 +185,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - margin: var(--Icon-margin); + margin: var(--joy-Icon-margin); width: 1em; height: 1em; display: inline-block; @@ -188,8 +193,8 @@ -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - font-size: var(--Icon-fontSize, 1.25rem); - color: var(--Icon-color); + font-size: var(--joy-Icon-fontSize, 1.25rem); + color: var(--joy-Icon-color); } g { @@ -201,28 +206,28 @@ /* Size Support */ [psc='Joy/Size/sm'] [data-component='ia.input.numeric-entry-field'], [psc='Joy/Size/sm'][data-component='ia.input.numeric-entry-field'] { - --Input-minHeight: 2rem; - --Input-paddingInline: 0.5rem; - --Input-decoratorChildHeight: min(1.5rem, var(--Input-minHeight)); + --joy-Input-minHeight: 2rem; + --joy-Input-paddingInline: 0.5rem; + --joy-Input-decoratorChildHeight: min(1.5rem, var(--joy-Input-minHeight)); } [psc='Joy/Size/md'] [data-component='ia.input.numeric-entry-field'], [psc='Joy/Size/md'][data-component='ia.input.numeric-entry-field'] { - --Input-minHeight: 2.25rem; - --Input-paddingInline: 0.75rem; - --Input-decoratorChildHeight: min(1.75rem, var(--Input-minHeight)); + --joy-Input-minHeight: 2.25rem; + --joy-Input-paddingInline: 0.75rem; + --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight)); } [psc='Joy/Size/lg'] [data-component='ia.input.numeric-entry-field'], [psc='Joy/Size/lg'][data-component='ia.input.numeric-entry-field'] { - --Input-minHeight: 2.75rem; - --Input-paddingInline: 1rem; - --Input-decoratorChildHeight: min(2.25rem, var(--Input-minHeight)); + --joy-Input-minHeight: 2.75rem; + --joy-Input-paddingInline: 1rem; + --joy-Input-decoratorChildHeight: min(2.25rem, var(--joy-Input-minHeight)); } /* Resets and Fixes */ .ia_numericEntryFieldComponent__wrapper, -.ia_numericEntryFieldComponent__wrapper--readOnly { +.ia_numericEntryFieldComponent__wrapper--joy-readOnly { justify-content: stretch !important; align-items: center !important; height: unset !important; @@ -233,17 +238,17 @@ /* Modal */ .ia_numericEntryFieldComponent__modal { - background-color: var(--palette-background-popup); - border-color: var(--palette-neutral-outlinedBorder); - border-width: var(--variant-outlined-borderWidth); - border-style: var(--variant-outlined-borderStyle); - box-shadow: var(--shadow-lg); - border-radius: var(--radius-sm); + background-color: var(--joy-palette-background-popup); + border-color: var(--joy-palette-neutral-outlinedBorder); + border-width: var(--joy-variant-outlined-borderWidth); + border-style: var(--joy-variant-outlined-borderStyle); + box-shadow: var(--joy-shadow-lg); + border-radius: var(--joy-radius-sm); flex-basis: auto; flex-grow: 1; - .ia_button--primary { + .ia_button--joy-primary { margin-left: 10px; @include style-forced(Button, solid, primary); @@ -257,7 +262,7 @@ } } - .ia_button--secondary { + .ia_button--joy-secondary { margin-left: auto; @include style-forced(Button, plain, primary); @@ -277,7 +282,7 @@ &.component-modal-large-viewport.component-modal-below:not( .hide-arrow ):before { - border-bottom-color: var(--palette-neutral-600) !important; + border-bottom-color: var(--joy-palette-neutral-600) !important; } &_content { diff --git a/packages/pyro-mui-joy/src/components/pager.css b/packages/pyro-mui-joy/src/components/pager.css index b003ab8..bd20d75 100644 --- a/packages/pyro-mui-joy/src/components/pager.css +++ b/packages/pyro-mui-joy/src/components/pager.css @@ -2,15 +2,15 @@ @include variant-support(Pager); /* Apply component properties */ - color: var(--Pager-Color); - background-color: var(--Pager-Bg, var(--palette-background-level1)); - border-color: var(--Pager-Border); - border-width: var(--Pager-borderWidth); - border-style: var(--Pager-borderStyle); - border-radius: var(--Pager-radius); - min-height: var(--Pager-minHeight); - padding-block: var(--Pager-paddingBlock); - padding-inline: var(--Pager-paddingInline); + color: var(--joy-Pager-Color); + background-color: var(--joy-Pager-Bg, var(--joy-palette-background-level1)); + border-color: var(--joy-Pager-Border); + border-width: var(--joy-Pager-borderWidth); + border-style: var(--joy-Pager-borderStyle); + border-radius: var(--joy-Pager-radius); + min-height: var(--joy-Pager-minHeight); + padding-block: var(--joy-Pager-paddingBlock); + padding-inline: var(--joy-Pager-paddingInline); .pager { height: auto !important; @@ -27,31 +27,34 @@ @include variant-forced(Page, outlined); filter: none !important; - min-width: var(--IconButton-size, 2rem); - min-height: var(--IconButton-size, 2rem); + min-width: var(--joy-IconButton-size, 2rem); + min-height: var(--joy-IconButton-size, 2rem); margin-left: 0px !important; /* Apply component properties */ - color: var(--Page-Color); - background-color: var(--Page-Bg, var(--palette-background-surface)); - border-color: var(--Page-Border); - border-width: var(--Page-borderWidth); - border-style: var(--Page-borderStyle); - border-radius: var(--Page-radius, var(--radius-sm)); + color: var(--joy-Page-Color); + background-color: var( + --joy-Page-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Page-Border); + border-width: var(--joy-Page-borderWidth); + border-style: var(--joy-Page-borderStyle); + border-radius: var(--joy-Page-radius, var(--joy-radius-sm)); &:hover { @include component-state(Page, Hover); } - &--active { + &--joy-active { @include variant-forced(Page, solid); } } } /* .ia_pager { - background-color: var(--neutral-30); - color: var(--neutral-90); + background-color: var(--joy-neutral-30); + color: var(--joy-neutral-90); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); line-height: 0.875rem; font-size: 0.75rem; @@ -60,37 +63,37 @@ .ia_pager__jumpFirstLast { line-height: 0.875rem; font-size: 1rem; - color: var(--neutral-90); + color: var(--joy-neutral-90); } -.ia_pager__jumpFirstLast--disabled { - color: var(--label--disabled); +.ia_pager__jumpFirstLast--joy-disabled { + color: var(--joy-label--joy-disabled); } .ia_pager__prevNext { - color: var(--neutral-90); + color: var(--joy-neutral-90); } -.ia_pager__prevNext--disabled { - color: var(--neutral-70); +.ia_pager__prevNext--joy-disabled { + color: var(--joy-neutral-70); } .ia_pager__page { border-radius: 50%; width: 1.25rem; height: 1.25rem; - color: var(--neutral-90); + color: var(--joy-neutral-90); } -.ia_pager__page--active { - background: var(--callToAction); - color: var(--neutral-10); +.ia_pager__page--joy-active { + background: var(--joy-callToAction); + color: var(--joy-neutral-10); } .ia_pager__jump { width: 3.125rem; text-align: center; - border-radius: var(--borderRadius); + border-radius: var(--joy-borderRadius); } .ia_pager__jump:focus { diff --git a/packages/pyro-mui-joy/src/components/popup.css b/packages/pyro-mui-joy/src/components/popup.css index a4d08ca..382ff0a 100644 --- a/packages/pyro-mui-joy/src/components/popup.css +++ b/packages/pyro-mui-joy/src/components/popup.css @@ -1,7 +1,7 @@ .ia_popup { - background-color: var(--palette-background-level3); - border-radius: var(--radius-md); - box-shadow: var(--shadow-lg); + background-color: var(--joy-palette-background-level3); + border-radius: var(--joy-radius-md); + box-shadow: var(--joy-shadow-lg); overflow: visible; border: none; height: unset !important; diff --git a/packages/pyro-mui-joy/src/components/slider.css b/packages/pyro-mui-joy/src/components/slider.css index cc57794..b4c1a49 100644 --- a/packages/pyro-mui-joy/src/components/slider.css +++ b/packages/pyro-mui-joy/src/components/slider.css @@ -2,34 +2,34 @@ .ia-slider { @include variant-support(Slider); - --Slider-size: max( + --joy-Slider-size: max( 42px, - max(var(--Slider-thumbSize), var(--Slider-trackSize)) + max(var(--joy-Slider-thumbSize), var(--joy-Slider-trackSize)) ); - --Slider-trackRadius: var(--Slider-size); - --Slider-markBackground: var(--palette-text-tertiary); + --joy-Slider-trackRadius: var(--joy-Slider-size); + --joy-Slider-markBackground: var(--joy-palette-text-tertiary); /* Default to medium size */ - --Slider-markSize: 2px; - --Slider-trackSize: 6px; - --Slider-thumbSize: 14px; - --Slider-valueLabelArrowSize: 8px; + --joy-Slider-markSize: 2px; + --joy-Slider-trackSize: 6px; + --joy-Slider-thumbSize: 14px; + --joy-Slider-valueLabelArrowSize: 8px; - --Slider-thumbRadius: calc(var(--Slider-thumbSize) / 2); - --Slider-thumbWidth: var(--Slider-thumbSize); - --Slider-thumbBackground: var(--Slider-Color); - --Slider-thumbColor: var(--Slider-Bg); + --joy-Slider-thumbRadius: calc(var(--joy-Slider-thumbSize) / 2); + --joy-Slider-thumbWidth: var(--joy-Slider-thumbSize); + --joy-Slider-thumbBackground: var(--joy-Slider-Color); + --joy-Slider-thumbColor: var(--joy-Slider-Bg); - --Slider-trackColor: var(--Slider-Color); - --Slider-trackBackground: var(--Slider-Bg); - --Slider-trackBorderColor: var(--Slider-Border); + --joy-Slider-trackColor: var(--joy-Slider-Color); + --joy-Slider-trackBackground: var(--joy-Slider-Bg); + --joy-Slider-trackBorderColor: var(--joy-Slider-Border); - --Slider-railBackground: var(--palette-background-level2); + --joy-Slider-railBackground: var(--joy-palette-background-level2); &[psc='Joy/Variant/plain'], &[psc='Joy/Variant/outlined'] { - --Slider-thumbColor: var(--palette-background-surface); - --Slider-trackBackground: var(--palette-background-surface); + --joy-Slider-thumbColor: var(--joy-palette-background-surface); + --joy-Slider-trackBackground: var(--joy-palette-background-surface); } &:hover { @@ -42,69 +42,70 @@ .slider:not(.slider-vertical) { .slider-rail { - height: var(--Slider-trackSize); + height: var(--joy-Slider-trackSize); } .slider-track { - height: var(--Slider-trackSize); + height: var(--joy-Slider-trackSize); width: 100%; - border-radius: var(--Slider-trackRadius) 0 0 - var(--Slider-trackRadius); + border-radius: var(--joy-Slider-trackRadius) 0 0 + var(--joy-Slider-trackRadius); } .slider-handle { - margin-left: calc(var(--Slider-thumbWidth) / 2 * -1); - margin-top: calc(var(--Slider-thumbWidth) / 4 * -1); + margin-left: calc(var(--joy-Slider-thumbWidth) / 2 * -1); + margin-top: calc(var(--joy-Slider-thumbWidth) / 4 * -1); } } .slider.slider-vertical { .slider-rail { - width: var(--Slider-trackSize); + width: var(--joy-Slider-trackSize); } .slider-track { height: 100%; - width: var(--Slider-trackSize); - border-radius: 0 0 var(--Slider-trackRadius) - var(--Slider-trackRadius); + width: var(--joy-Slider-trackSize); + border-radius: 0 0 var(--joy-Slider-trackRadius) + var(--joy-Slider-trackRadius); } .slider-handle { - margin-left: calc(var(--Slider-thumbWidth) / 4 * -1); - margin-bottom: calc(var(--Slider-thumbWidth) / 2 * -1); + margin-left: calc(var(--joy-Slider-thumbWidth) / 4 * -1); + margin-bottom: calc(var(--joy-Slider-thumbWidth) / 2 * -1); } } .slider-rail { - background-color: var(--Slider-railBackground); - border-radius: var(--Slider-trackRadius); + background-color: var(--joy-Slider-railBackground); + border-radius: var(--joy-Slider-trackRadius); } .slider-track { - color: var(--Slider-trackColor); - background-color: var(--Slider-trackBackground); - - border-width: var(--variant-borderWidth, 0px); - border-style: var(--variant-borderStyle); - border-color: var(--Slider-trackBorderColor); - border-radius: var(--Slider-trackRadius) 0 0 var(--Slider-trackRadius); + color: var(--joy-Slider-trackColor); + background-color: var(--joy-Slider-trackBackground); + + border-width: var(--joy-variant-borderWidth, 0px); + border-style: var(--joy-variant-borderStyle); + border-color: var(--joy-Slider-trackBorderColor); + border-radius: var(--joy-Slider-trackRadius) 0 0 + var(--joy-Slider-trackRadius); } .slider .slider-handle { - width: var(--Slider-thumbWidth); - height: var(--Slider-thumbSize); + width: var(--joy-Slider-thumbWidth); + height: var(--joy-Slider-thumbSize); - color: var(--Slider-thumbColor); - background-color: var(--Slider-thumbBackground); + color: var(--joy-Slider-thumbColor); + background-color: var(--joy-Slider-thumbBackground); - border: var(--variant-borderWidth, 0px) solid - var(--Slider-trackBorderColor); - border-radius: var(--Slider-thumbRadius); + border: var(--joy-variant-borderWidth, 0px) solid + var(--joy-Slider-trackBorderColor); + border-radius: var(--joy-Slider-thumbRadius); - box-shadow: var(--Slider-thumbShadow); + box-shadow: var(--joy-Slider-thumbShadow); - background-color: var(--Slider-thumbBackground); + background-color: var(--joy-Slider-thumbBackground); cursor: pointer; overflow: visible; @@ -120,7 +121,7 @@ width: 100%; height: 100%; border: 2px solid; - border-color: var(--Slider-thumbColor); + border-color: var(--joy-Slider-thumbColor); border-radius: inherit; } } @@ -128,24 +129,24 @@ [psc='Joy/Size/sm'] .ia-slider, [psc='Joy/Size/sm'].ia-slider { - --Slider-markSize: 2px; - --Slider-trackSize: 4px; - --Slider-thumbSize: 10px; - --Slider-valueLabelArrowSize: 6px; + --joy-Slider-markSize: 2px; + --joy-Slider-trackSize: 4px; + --joy-Slider-thumbSize: 10px; + --joy-Slider-valueLabelArrowSize: 6px; } [psc='Joy/Size/md'] .ia-slider, [psc='Joy/Size/md'].ia-slider { - --Slider-markSize: 2px; - --Slider-trackSize: 6px; - --Slider-thumbSize: 14px; - --Slider-valueLabelArrowSize: 8px; + --joy-Slider-markSize: 2px; + --joy-Slider-trackSize: 6px; + --joy-Slider-thumbSize: 14px; + --joy-Slider-valueLabelArrowSize: 8px; } [psc='Joy/Size/lg'] .ia-slider, [psc='Joy/Size/lg'].ia-slider { - --Slider-markSize: 3px; - --Slider-trackSize: 10px; - --Slider-thumbSize: 20px; - --Slider-valueLabelArrowSize: 10px; + --joy-Slider-markSize: 3px; + --joy-Slider-trackSize: 10px; + --joy-Slider-thumbSize: 20px; + --joy-Slider-valueLabelArrowSize: 10px; } diff --git a/packages/pyro-mui-joy/src/components/table.css b/packages/pyro-mui-joy/src/components/table.css index a979d76..6ce320b 100644 --- a/packages/pyro-mui-joy/src/components/table.css +++ b/packages/pyro-mui-joy/src/components/table.css @@ -3,12 +3,15 @@ @include variant-support(TableFilter); /* Apply component properties */ - color: var(--TableFilter-Color); - background-color: var(--TableFilter-Bg, var(--palette-background-level1)); - border-color: var(--TableFilter-Border); - border-width: var(--TableFilter-borderWidth); - border-style: var(--TableFilter-borderStyle); - border-radius: var(--TableFilter-radius); + color: var(--joy-TableFilter-Color); + background-color: var( + --joy-TableFilter-Bg, + var(--joy-palette-background-level1) + ); + border-color: var(--joy-TableFilter-Border); + border-width: var(--joy-TableFilter-borderWidth); + border-style: var(--joy-TableFilter-borderStyle); + border-radius: var(--joy-TableFilter-radius); /* Input Field */ .ia_inputField { @@ -28,25 +31,28 @@ .ia_table { @include variant-support(Table); @include variant-support(TableCell); - --Table-headerUnderlineThickness: 2px; - --TableCell-borderColor: var(--palette-divider); - --TableCell-headBackground: var( - --Sheet-background, - var(--palette-background-surface) + --joy-Table-headerUnderlineThickness: 2px; + --joy-TableCell-borderColor: var(--joy-palette-divider); + --joy-TableCell-headBackground: var( + --joy-Sheet-background, + var(--joy-palette-background-surface) ); - --unstable_TableCell-height: var(--TableCell-height, 40px); - --TableCell-paddingX: 0.5rem; - --TableCell-paddingY: 0.375rem; + --joy-unstable_TableCell-height: var(--joy-TableCell-height, 40px); + --joy-TableCell-paddingX: 0.5rem; + --joy-TableCell-paddingY: 0.375rem; table-layout: fixed; width: 100%; border-spacing: 0px; border-collapse: separate; - border-radius: var(--TableCell-cornerRadius, var(--unstable_actionRadius)); + border-radius: var( + --joy-TableCell-cornerRadius, + var(--joy-unstable_actionRadius) + ); font-family: var( - --fontFamily-body, + --joy-fontFamily-body, 'Inter', var( - --joy-fontFamily-fallback, + --joy-joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', @@ -59,14 +65,17 @@ 'Segoe UI Symbol' ) ); - font-size: var(--fontSize-sm, 0.875rem); - line-height: var(--lineHeight-md, 1.5); + font-size: var(--joy-fontSize-sm, 0.875rem); + line-height: var(--joy-lineHeight-md, 1.5); background-color: transparent; color: var( - --variant-plainColor, - var(--palette-neutral-plainColor, var(--palette-neutral-700, #32383e)) + --joy-variant-plainColor, + var( + --joy-palette-neutral-plainColor, + var(--joy-palette-neutral-700, #32383e) + ) ); - --variant-borderWidth: 0px; + --joy-variant-borderWidth: 0px; &__body { background-color: transparent; @@ -76,47 +85,47 @@ .ia_table__headContainer, .ia_table__footContainer { /* text-align: left; */ - padding: var(--TableCell-paddingY) var(--TableCell-paddingX); - background-color: var(--TableCell-headBackground); - height: var(--unstable_TableCell-height); - font-weight: var(--fontWeight-lg); - border-color: var(--TableCell-borderColor); - color: var(--palette-text-secondary); + padding: var(--joy-TableCell-paddingY) var(--joy-TableCell-paddingX); + background-color: var(--joy-TableCell-headBackground); + height: var(--joy-unstable_TableCell-height); + font-weight: var(--joy-fontWeight-lg); + border-color: var(--joy-TableCell-borderColor); + color: var(--joy-palette-text-secondary); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - border-bottom-width: var(--Table-headerUnderlineThickness); + border-bottom-width: var(--joy-Table-headerUnderlineThickness); border-bottom-style: solid; } .ia_table__foot, .ia_table__head { - font-weight: var(--fontWeight-lg); - font-size: var(--fontSize-sm); + font-weight: var(--joy-fontWeight-lg); + font-size: var(--joy-fontSize-sm); } /* .ia_table__head__header__sort { - color: var(--neutral-50); + color: var(--joy-neutral-50); } -.ia_table__head__header__sort--active { - color: var(--callToAction--active); +.ia_table__head__header__sort--joy-active { + color: var(--joy-callToAction--joy-active); } -.ia_table__body__row--even { - background-color: var(--neutral-10); +.ia_table__body__row--joy-even { + background-color: var(--joy-neutral-10); } -.ia_table__body__row--odd { - background-color: var(--neutral-20); +.ia_table__body__row--joy-odd { + background-color: var(--joy-neutral-20); } .ia_table__body__emptyMessage { - color: var(--neutral-60); + color: var(--joy-neutral-60); } .ia_table__resizeGuide { - background-color: var(--callToAction); + background-color: var(--joy-callToAction); opacity: 0.5; } diff --git a/packages/pyro-mui-joy/src/components/text-area.css b/packages/pyro-mui-joy/src/components/text-area.css index 2ada6fb..88b5497 100644 --- a/packages/pyro-mui-joy/src/components/text-area.css +++ b/packages/pyro-mui-joy/src/components/text-area.css @@ -2,46 +2,51 @@ @include variant-support(Textarea); /* Define component properties */ - --Textarea-radius: var(--radius-sm); - --Textarea-gap: 0.5rem; - --Textarea-placeholderColor: var(--Textarea-Color); - --Textarea-placeholderOpacity: 0.5; - --Textarea-focused: 0; - --Textarea-focusedThickness: var(--focus-thickness); - --Textarea-focusedHighlight: var(--palette-primary-solidBg); - --Textarea-minHeight: 2.5rem; - --Textarea-paddingBlock: calc(0.5rem - var(--variant-borderWidth, 0px)); - --Textarea-paddingInline: 0.75rem; + --joy-Textarea-radius: var(--joy-radius-sm); + --joy-Textarea-gap: 0.5rem; + --joy-Textarea-placeholderColor: var(--joy-Textarea-Color); + --joy-Textarea-placeholderOpacity: 0.5; + --joy-Textarea-focused: 0; + --joy-Textarea-focusedThickness: var(--joy-focus-thickness); + --joy-Textarea-focusedHighlight: var(--joy-palette-primary-solidBg); + --joy-Textarea-minHeight: 2.5rem; + --joy-Textarea-paddingBlock: calc( + 0.5rem - var(--joy-variant-borderWidth, 0px) + ); + --joy-Textarea-paddingInline: 0.75rem; /* Default to Medium size */ - --Textarea-minHeight: 2.5rem; - --Textarea-paddingInline: 0.75rem; + --joy-Textarea-minHeight: 2.5rem; + --joy-Textarea-paddingInline: 0.75rem; /* Style */ box-sizing: border-box; min-width: 0px; - min-height: var(--Textarea-minHeight); + min-height: var(--joy-Textarea-minHeight); overflow: visible; position: relative; display: flex; - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); /* Apply component properties */ - color: var(--Textarea-Color); - background-color: var(--Textarea-Bg, var(--palette-background-surface)); - border-color: var(--Textarea-Border); - border-width: var(--Textarea-borderWidth); - border-style: var(--Textarea-borderStyle); - border-radius: var(--Textarea-radius); - min-height: var(--Textarea-minHeight); - padding-block: var(--Textarea-paddingBlock); - padding-inline: var(--Textarea-paddingInline); + color: var(--joy-Textarea-Color); + background-color: var( + --joy-Textarea-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Textarea-Border); + border-width: var(--joy-Textarea-borderWidth); + border-style: var(--joy-Textarea-borderStyle); + border-radius: var(--joy-Textarea-radius); + min-height: var(--joy-Textarea-minHeight); + padding-block: var(--joy-Textarea-paddingBlock); + padding-inline: var(--joy-Textarea-paddingInline); &:hover { - --Textarea-Border: var( - --variant-HoverBorder, - var(--Textarea-default-HoverBorder) ; + --joy-Textarea-Border: var( + --joy-variant-HoverBorder, + var(--joy-Textarea-default-HoverBorder) ; ); } @@ -54,38 +59,41 @@ &[psc='Joy/Variant/plain'], &[psc='Joy/Variant/outlined'] { - --Textarea-Bg: var(--palette-background-surface); + --joy-Textarea-Bg: var(--joy-palette-background-surface); } &::placeholder { - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); - color: var(--Textarea-placeholderColor); - opacity: var(--Textarea-placeholderOpacity); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); + color: var(--joy-Textarea-placeholderColor); + opacity: var(--joy-Textarea-placeholderOpacity); } &:focus-within { - outline-width: var(--Textarea-focusedThickness); + outline-width: var(--joy-Textarea-focusedThickness); outline-style: solid; - outline-color: var(--Textarea-focusedHighlight); - outline-offset: min(calc(var(--Textarea-borderWidth, 0px) * -1), -1px); + outline-color: var(--joy-Textarea-focusedHighlight); + outline-offset: min( + calc(var(--joy-Textarea-borderWidth, 0px) * -1), + -1px + ); } } [psc='Joy/Size/sm'] [data-component='ia.input.text-area'], [psc='Joy/Size/sm'][data-component='ia.input.text-area'] { - --Textarea-minHeight: 2rem; - --Textarea-paddingInline: 0.5rem; + --joy-Textarea-minHeight: 2rem; + --joy-Textarea-paddingInline: 0.5rem; } [psc='Joy/Size/md'] [data-component='ia.input.text-area'], [psc='Joy/Size/md'][data-component='ia.input.text-area'] { - --Textarea-minHeight: 2.5rem; - --Textarea-paddingInline: 0.75rem; + --joy-Textarea-minHeight: 2.5rem; + --joy-Textarea-paddingInline: 0.75rem; } [psc='Joy/Size/lg'] [data-component='ia.input.text-area'], [psc='Joy/Size/lg'][data-component='ia.input.text-area'] { - --Textarea-minHeight: 3rem; - --Textarea-paddingInline: 1rem; + --joy-Textarea-minHeight: 3rem; + --joy-Textarea-paddingInline: 1rem; } diff --git a/packages/pyro-mui-joy/src/components/text-field.css b/packages/pyro-mui-joy/src/components/text-field.css index 2f79e51..37a7287 100644 --- a/packages/pyro-mui-joy/src/components/text-field.css +++ b/packages/pyro-mui-joy/src/components/text-field.css @@ -4,22 +4,22 @@ @include variant-support(Input); /* Define component properties */ - --Input-radius: var(--radius-sm); - --Input-gap: 0.5rem; - --Input-placeholderColor: var(--Input-Color); - --Input-placeholderOpacity: 0.5; - --Input-focused: 0; - --Input-focusedThickness: var(--focus-thickness); - --Input-focusedHighlight: var( - --variant-focusedHighlight, - var(--palette-focusVisible) + --joy-Input-radius: var(--joy-radius-sm); + --joy-Input-gap: 0.5rem; + --joy-Input-placeholderColor: var(--joy-Input-Color); + --joy-Input-placeholderOpacity: 0.5; + --joy-Input-focused: 0; + --joy-Input-focusedThickness: var(--joy-focus-thickness); + --joy-Input-focusedHighlight: var( + --joy-variant-focusedHighlight, + var(--joy-palette-focusVisible) ); - --Input-minHeight: 2.5rem; - --Input-paddingInline: 0.75rem; + --joy-Input-minHeight: 2.5rem; + --joy-Input-paddingInline: 0.75rem; /* Default to Medium size */ - --Input-minHeight: 2.5rem; - --Input-paddingInline: 0.75rem; + --joy-Input-minHeight: 2.5rem; + --joy-Input-paddingInline: 0.75rem; /* Style */ box-sizing: border-box; @@ -27,23 +27,26 @@ overflow: visible; position: relative; display: flex; - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); /* Apply component properties */ - color: var(--Input-Color); - background-color: var(--Input-Bg, var(--palette-background-surface)); - border-color: var(--Input-Border); - border-width: var(--Input-borderWidth); - border-style: var(--Input-borderStyle); - border-radius: var(--Input-radius); - min-height: var(--Input-minHeight) !important; - padding-inline: var(--Input-paddingInline); + color: var(--joy-Input-Color); + background-color: var( + --joy-Input-Bg, + var(--joy-palette-background-surface) + ); + border-color: var(--joy-Input-Border); + border-width: var(--joy-Input-borderWidth); + border-style: var(--joy-Input-borderStyle); + border-radius: var(--joy-Input-radius); + min-height: var(--joy-Input-minHeight) !important; + padding-inline: var(--joy-Input-paddingInline); &:hover { - --Input-Border: var( - --variant-HoverBorder, - var(--Input-default-HoverBorder) + --joy-Input-Border: var( + --joy-variant-HoverBorder, + var(--joy-Input-default-HoverBorder) ); } @@ -56,49 +59,49 @@ &[psc='Joy/Variant/plain'], &[psc='Joy/Variant/outlined'] { - --Input-Bg: var(--palette-background-surface); + --joy-Input-Bg: var(--joy-palette-background-surface); } &::placeholder { - font-family: var(--fontFamily-body); - font-size: var(--fontSize-md); - color: var(--Input-placeholderColor); - opacity: var(--Input-placeholderOpacity); + font-family: var(--joy-fontFamily-body); + font-size: var(--joy-fontSize-md); + color: var(--joy-Input-placeholderColor); + opacity: var(--joy-Input-placeholderOpacity); } &:focus-within { - outline-width: var(--Input-focusedThickness); + outline-width: var(--joy-Input-focusedThickness); outline-style: solid; - outline-color: var(--Input-focusedHighlight); + outline-color: var(--joy-Input-focusedHighlight); outline-offset: min( - calc(var(--Input-borderWidth, 0px) * -1), - calc(var(--Input-focusedThickness) * -1) + calc(var(--joy-Input-borderWidth, 0px) * -1), + calc(var(--joy-Input-focusedThickness) * -1) ); } } [psc='Joy/Size/sm'] .ia_inputField, [psc='Joy/Size/sm'].ia_inputField { - --Input-minHeight: 2rem; - --Input-paddingInline: 0.5rem; - --Input-decoratorChildHeight: min(1.5rem, var(--Input-minHeight)); - font-size: var(--fontSize-sm, 0.875rem); + --joy-Input-minHeight: 2rem; + --joy-Input-paddingInline: 0.5rem; + --joy-Input-decoratorChildHeight: min(1.5rem, var(--joy-Input-minHeight)); + font-size: var(--joy-fontSize-sm, 0.875rem); } [psc='Joy/Size/md'] .ia_inputField, [psc='Joy/Size/md'].ia_inputField { - --Input-minHeight: 2.25rem; - --Input-paddingInline: 0.75rem; - --Input-decoratorChildHeight: min(1.75rem, var(--Input-minHeight)); - font-size: var(--fontSize-md, 1rem); + --joy-Input-minHeight: 2.25rem; + --joy-Input-paddingInline: 0.75rem; + --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight)); + font-size: var(--joy-fontSize-md, 1rem); } [psc='Joy/Size/lg'] .ia_inputField, [psc='Joy/Size/lg'].ia_inputField { - --Input-minHeight: 2.75rem; - --Input-paddingInline: 1rem; - --Input-decoratorChildHeight: min(2.25rem, var(--Input-minHeight)); - font-size: var(--fontSize-lg, 1.125rem); + --joy-Input-minHeight: 2.75rem; + --joy-Input-paddingInline: 1rem; + --joy-Input-decoratorChildHeight: min(2.25rem, var(--joy-Input-minHeight)); + font-size: var(--joy-fontSize-lg, 1.125rem); } /* Resets */ diff --git a/packages/pyro-mui-joy/src/components/toggle.css b/packages/pyro-mui-joy/src/components/toggle.css index 0ca6e56..5d50274 100644 --- a/packages/pyro-mui-joy/src/components/toggle.css +++ b/packages/pyro-mui-joy/src/components/toggle.css @@ -1,45 +1,49 @@ /* Switch */ .ia_toggleSwitch { - --variant-borderWidth: 0px; - --Switch-trackRadius: var(--joy-radius-lg); - --Switch-thumbShadow: 0 0 0 1px var(--Switch-trackBackground); - --Switch-trackWidth: 48px; - --Switch-trackHeight: 24px; - --Switch-thumbSize: 16px; - --Switch-gap: 8px; - font-size: var(--joy-fontSize-md); - --unstable_paddingBlock: max( + --joy-variant-borderWidth: 0px; + --joy-Switch-trackRadius: var(--joy-joy-radius-lg); + --joy-Switch-thumbShadow: 0 0 0 1px var(--joy-Switch-trackBackground); + --joy-Switch-trackWidth: 48px; + --joy-Switch-trackHeight: 24px; + --joy-Switch-thumbSize: 16px; + --joy-Switch-gap: 8px; + font-size: var(--joy-joy-fontSize-md); + --joy-unstable_paddingBlock: max( ( - var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - - var(--Switch-thumbSize) + var(--joy-Switch-trackHeight) - 2 * + var(--joy-variant-borderWidth, 0px) - + var(--joy-Switch-thumbSize) ) / 2, 0px ); - --Switch-thumbRadius: max( - var(--Switch-trackRadius) - var(--unstable_paddingBlock), - min(var(--unstable_paddingBlock) / 2, var(--Switch-trackRadius) / 2) + --joy-Switch-thumbRadius: max( + var(--joy-Switch-trackRadius) - var(--joy-unstable_paddingBlock), + min( + var(--joy-unstable_paddingBlock) / 2, + var(--joy-Switch-trackRadius) / 2 + ) ); - --Switch-thumbWidth: var(--Switch-thumbSize); - --Switch-thumbOffset: max( - (var(--Switch-trackHeight) - var(--Switch-thumbSize)) / 2, + --joy-Switch-thumbWidth: var(--joy-Switch-thumbSize); + --joy-Switch-thumbOffset: max( + (var(--joy-Switch-trackHeight) - var(--joy-Switch-thumbSize)) / 2, 0px ); - --Switch-trackBackground: var( - --joy-palette-neutral-solidBg, - var(--joy-palette-neutral-600, #5a5a72) + --joy-Switch-trackBackground: var( + --joy-joy-palette-neutral-solidBg, + var(--joy-joy-palette-neutral-600, #5a5a72) ); - --Switch-trackColor: var( - --joy-palette-neutral-solidColor, - var(--joy-palette-common-white, #fff) + --joy-Switch-trackColor: var( + --joy-joy-palette-neutral-solidColor, + var(--joy-joy-palette-common-white, #fff) ); - --Switch-trackBorderColor: currentColor; - --Switch-thumbBackground: var( - --joy-palette-neutral-solidColor, - var(--joy-palette-common-white, #fff) + --joy-Switch-trackBorderColor: currentColor; + --joy-Switch-thumbBackground: var( + --joy-joy-palette-neutral-solidColor, + var(--joy-joy-palette-common-white, #fff) ); - --Switch-thumbColor: var( - --joy-palette-neutral-solidBg, - var(--joy-palette-neutral-600, #5a5a72) + --joy-Switch-thumbColor: var( + --joy-joy-palette-neutral-solidBg, + var(--joy-joy-palette-neutral-600, #5a5a72) ); display: -webkit-inline-box; display: -webkit-inline-flex; @@ -53,22 +57,23 @@ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; - font-family: var(--joy-fontFamily-body); + font-family: var(--joy-joy-fontFamily-body); position: relative; padding: calc( - (var(--Switch-thumbSize) / 2) - (var(--Switch-trackHeight) / 2) + (var(--joy-Switch-thumbSize) / 2) - + (var(--joy-Switch-trackHeight) / 2) ) - calc(-1 * var(--Switch-thumbOffset)); + calc(-1 * var(--joy-Switch-thumbOffset)); background-color: initial; border: none; - margin: var(--unstable_Switch-margin); + margin: var(--joy-unstable_Switch-margin); } .ia_toggleSwitch__track { position: relative; - color: var(--Switch-trackColor); - height: var(--Switch-trackHeight); - width: var(--Switch-trackWidth); + color: var(--joy-Switch-trackColor); + height: var(--joy-Switch-trackHeight); + width: var(--joy-Switch-trackWidth); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -84,34 +89,34 @@ -ms-flex-align: center; align-items: center; box-sizing: border-box; - border: var(--variant-borderWidth, 0px) solid; - border-color: var(--Switch-trackBorderColor); - background-color: var(--Switch-trackBackground) !important; - border-radius: var(--Switch-trackRadius); - font-family: var(--joy-fontFamily-body); - font-size: var(--joy-fontSize-sm); + border: var(--joy-variant-borderWidth, 0px) solid; + border-color: var(--joy-Switch-trackBorderColor); + background-color: var(--joy-Switch-trackBackground) !important; + border-radius: var(--joy-Switch-trackRadius); + font-family: var(--joy-joy-fontFamily-body); + font-size: var(--joy-joy-fontSize-sm); filter: unset; } .ia_toggleSwitch:hover { - --Switch-trackBackground: var( - --joy-palette-neutral-solidHoverBg, - var(--joy-palette-neutral-600, #054da7) + --joy-Switch-trackBackground: var( + --joy-joy-palette-neutral-solidHoverBg, + var(--joy-joy-palette-neutral-600, #054da7) ); - --Switch-trackBorderColor: currentColor; - --Switch-thumbColor: var( - --joy-palette-neutral-solidHoverBg, - var(--joy-palette-neutral-600, #054da7) + --joy-Switch-trackBorderColor: currentColor; + --joy-Switch-thumbColor: var( + --joy-joy-palette-neutral-solidHoverBg, + var(--joy-joy-palette-neutral-600, #054da7) ); } -.ia_toggleSwitch__track--selected { - background-color: var(--Switch-trackBackground) !important; +.ia_toggleSwitch__track--joy-selected { + background-color: var(--joy-Switch-trackBackground) !important; opacity: 1; } .ia_toggleSwitch__thumbContainer { - --Icon-fontSize: calc(var(--Switch-thumbSize) * 0.75); + --joy-Icon-fontSize: calc(var(--joy-Switch-thumbSize) * 0.75); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -126,26 +131,26 @@ position: absolute; top: 50%; left: calc( - 50% - var(--Switch-trackWidth) / 2 + var(--Switch-thumbWidth) / 2 + - var(--Switch-thumbOffset) + 50% - var(--joy-Switch-trackWidth) / 2 + var(--joy-Switch-thumbWidth) / + 2 + var(--joy-Switch-thumbOffset) ); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - width: var(--Switch-thumbWidth); - height: var(--Switch-thumbSize); - border-radius: var(--Switch-thumbRadius); - box-shadow: var(--Switch-thumbShadow); - color: var(--Switch-thumbColor); - background-color: var(--Switch-thumbBackground) !important; + width: var(--joy-Switch-thumbWidth); + height: var(--joy-Switch-thumbSize); + border-radius: var(--joy-Switch-thumbRadius); + box-shadow: var(--joy-Switch-thumbShadow); + color: var(--joy-Switch-thumbColor); + background-color: var(--joy-Switch-thumbBackground) !important; transition: all 0.1s ease-in-out; } -.ia_toggleSwitch__thumbContainer:has(.ia_toggleSwitch__thumb--selected) { +.ia_toggleSwitch__thumbContainer:has(.ia_toggleSwitch__thumb--joy-selected) { left: calc( - 50% + var(--Switch-trackWidth) / 2 - var(--Switch-thumbWidth) / 2 - - var(--Switch-thumbOffset) + 50% + var(--joy-Switch-trackWidth) / 2 - var(--joy-Switch-thumbWidth) / + 2 - var(--joy-Switch-thumbOffset) ); } diff --git a/packages/pyro-mui-joy/src/designer/selection.css b/packages/pyro-mui-joy/src/designer/selection.css index f220e1f..67ead3a 100644 --- a/packages/pyro-mui-joy/src/designer/selection.css +++ b/packages/pyro-mui-joy/src/designer/selection.css @@ -1,5 +1,5 @@ /* Containers */ .ia_designing__container__addChild { @include style-forced(Container, outlined, neutral); - color: var(--Container-Color); + color: var(--joy-Container-Color); }