Skip to content

Commit

Permalink
Merge pull request #49 from mussonindustrial/dev/mui-joy-prefix
Browse files Browse the repository at this point in the history 
(pyro-mui-joy) Introduce CSS Variables Prefix
  • Loading branch information
@benmusson
benmusson authored Aug 30, 2024
2 parents 39a842a + 703723f commit a57e86e
Show file tree
Hide file tree
Showing 31 changed files with 2,333 additions and 1,827 deletions.
5 changes: 5 additions & 0 deletions .changeset/odd-steaks-film.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@mussonindustrial/pyro-mui-joy': minor
---

BREAKING CHANGE(pyro-mui-joy): prefix all css variables with '--joy'
18 changes: 9 additions & 9 deletions packages/pyro-mui-joy/src/classes/background.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
74 changes: 39 additions & 35 deletions packages/pyro-mui-joy/src/classes/buttongroup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Loading

0 comments on commit a57e86e

Please sign in to comment.