Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor theme module as an extension of the css module #1928

Merged
merged 18 commits into from
Jul 13, 2024
Merged

Refactor theme module as an extension of the css module #1928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
96c6b6a
Ensure that usage.output skips over map values
sebnitu Jul 12, 2024
d6e9e0f
Fix watch by passing src arg
sebnitu Jul 12, 2024
32a7e58
Remove trailing commas and null theme props
sebnitu Jul 12, 2024
ccfeccb
Update usage.log error message
sebnitu Jul 12, 2024
a1f8c1e
Refactor css.set and css.get to be more extendable
sebnitu Jul 12, 2024
262bfcf
Refactor theme.set and theme.output-theme to leverage css var map
sebnitu Jul 12, 2024
5e5e4fa
Set the core themes in theme module
sebnitu Jul 12, 2024
4da7948
Replace theme.get with css.get
sebnitu Jul 12, 2024
80b902e
Update comment for theme.remove plan
sebnitu Jul 12, 2024
0785d29
Remove unused import
sebnitu Jul 12, 2024
978fc5e
Add missing empty-map import
sebnitu Jul 12, 2024
0b4c511
Check default theme for properties in css.get
sebnitu Jul 12, 2024
bb52c6e
Replace theme.get with css.get
sebnitu Jul 12, 2024
fc4dfc0
Fix style watch npm scripts
sebnitu Jul 12, 2024
687b642
Fix docs box css.get calls
sebnitu Jul 12, 2024
fcb68d8
Refactor theme.remove to work with css integration
sebnitu Jul 13, 2024
3e295e5
Fix bug with theme.remove and update documentation
sebnitu Jul 13, 2024
3e2ea9b
Sneak in fix to section padding
sebnitu Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions docs/src/styles/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
@use "@vrembem/core/theme";
@use "@vrembem/core";
@use "@vrembem/core/css";

.badge {
display: inline-block;
padding: 0 0.75em;
border-radius: core.$border-radius-circle;
background-color: theme.get("background-darker");
color: theme.get("foreground-lighter");
font-size: core.$font-size-sm;
border-radius: css.get("border-radius-circle");
background-color: css.get("background-darker");
color: css.get("foreground-lighter");
font-size: css.get("font-size-sm");
}
32 changes: 17 additions & 15 deletions docs/src/styles/_box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";

$theme-light: (
@include css.set("box", (
"padding": calc(0.75em - 2px) calc(1em - 2px),
"border": 2px solid transparent
));

@include theme.set("box", "light", (
"border-color": palette.get("primary", 60),
"background": palette.get("primary", 90),
"border-color-alt": palette.get("secondary", 60),
"background-alt": palette.get("secondary", 90)
);
));

$theme-dark: (
@include theme.set("box", "dark", (
"border-color": palette.get("primary", 40),
"background": palette.get("primary", 15%),
"border-color-alt": palette.get("secondary", 40),
"background-alt": palette.get("secondary", 15%)
);

@include theme.set("box", "light", $theme-light);
@include theme.set("box", "dark", $theme-dark);
@include theme.output("box");
));

.box,
.box-alt {
padding: calc(0.75em - 2px) calc(1em - 2px);
border: 2px solid transparent;
color: theme.get("foreground");
padding: css.get("box", "padding");
border: css.get("box", "border");
color: css.get("foreground");
}

.box {
border-color: theme.get("box", "border-color");
background: theme.get("box", "background");
border-color: css.get("box", "border-color");
background: css.get("box", "background");
}

.box-alt {
border-color: theme.get("box", "border-color-alt");
background: theme.get("box", "background-alt");
border-color: css.get("box", "border-color-alt");
background: css.get("box", "background-alt");
}
4 changes: 2 additions & 2 deletions docs/src/styles/_brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";

.brand {
display: flex;
Expand All @@ -12,7 +12,7 @@
}

.brand__version {
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");
}

.brand:hover,
Expand Down
9 changes: 4 additions & 5 deletions docs/src/styles/_code-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";
@use "./variables" as var;

.code-block {
Expand All @@ -13,7 +12,7 @@
.pre {
padding-right: 4em;
border: core.$border;
background-color: theme.get("background-dark");
background-color: css.get("background-dark");
}

.popover {
Expand Down Expand Up @@ -42,7 +41,7 @@
display: flex;
padding: 0.5rem;
border-radius: core.$border-radius;
background-color: theme.get("background-dark");
background-color: css.get("background-dark");
}

.code-block__prompt {
Expand All @@ -51,10 +50,10 @@

.code-block__copy-button {
right: 1rem;
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");

&:hover {
color: theme.get("foreground-light");
color: css.get("foreground-light");
}

@include core.media-max(var.$bp-code) {
Expand Down
3 changes: 1 addition & 2 deletions docs/src/styles/_code-example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/theme";
@use "@vrembem/core/palette";
@use "@vrembem/base";
@use "./variables" as var;
Expand Down Expand Up @@ -91,7 +90,7 @@
display: flex;
gap: 0.5rem;
padding: 0.5rem 3.5rem 0.5rem 1rem;
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");
text-transform: uppercase;

[data-reset] {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/styles/_icon_external.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@use "@vrembem/core/theme";
@use "@vrembem/core/css";

.icon_external {
position: relative;
right: -0.25em;
stroke-width: 2.5;
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");
font-size: 0.75em;
}
3 changes: 1 addition & 2 deletions docs/src/styles/_layout-aside.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/theme";
@use "@vrembem/drawer";
@use "./variables" as var;

Expand All @@ -19,7 +18,7 @@
transform: translate(100%);
transition: opacity .5s, transform .25s ease;
outline: none;
background-color: theme.get("background-darker");
background-color: css.get("background-darker");
box-shadow: drawer.$modal-shadow;
opacity: 0;
inset: 0 0 0 auto;
Expand Down
11 changes: 5 additions & 6 deletions docs/src/styles/_layout-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "@vrembem/core/css";
@use "@vrembem/core/theme";

@include theme.set("layout", "light", (
Expand All @@ -10,17 +11,15 @@
"background-stripe": hsl(from magenta h s l / 20%)
));

@include theme.output("layout");

.layout-demo {
background-color: theme.get("layout", "background-color");
background-color: css.get("layout", "background-color");
background-image: linear-gradient(
135deg,
theme.get("layout", "background-stripe") 10%,
css.get("layout", "background-stripe") 10%,
rgb(0 0 0 / 0%) 0,
rgb(0 0 0 / 0%) 50%,
theme.get("layout", "background-stripe") 0,
theme.get("layout", "background-stripe") 60%,
css.get("layout", "background-stripe") 0,
css.get("layout", "background-stripe") 60%,
rgb(0 0 0 / 0%) 0,
rgb(0 0 0 / 0%)
);
Expand Down
7 changes: 3 additions & 4 deletions docs/src/styles/_layout-drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/theme";
@use "@vrembem/drawer";
@use "./variables" as var;

Expand All @@ -19,7 +18,7 @@
transform: translate(-100%);
transition: opacity .5s, transform .25s ease;
outline: none;
background-color: theme.get("background-darker");
background-color: css.get("background-darker");
box-shadow: drawer.$modal-shadow;
opacity: 0;
inset: 0 auto 0 0;
Expand Down Expand Up @@ -82,13 +81,13 @@
top: calc((css.get("layout", "navibar-height") + css.get("layout", "drawer-padding")) * -1);
height: css.get("layout", "navibar-height");
margin: calc((css.get("layout", "navibar-height") + css.get("layout", "drawer-padding")) * -1) calc(css.get("layout", "drawer-padding") * -1) css.get("layout", "drawer-padding") calc(css.get("layout", "drawer-padding") * -1);
background-color: theme.get("background-darker");
background-color: css.get("background-darker");

&::after {
content: "";
position: absolute;
margin: 0 css.get("layout", "drawer-padding");
border-bottom: 1px solid theme.get("border-color");
border-bottom: 1px solid css.get("border-color");
inset: 100% 0 auto;
}
}
Expand Down
5 changes: 2 additions & 3 deletions docs/src/styles/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";
@use "./variables" as var;

.layout {
Expand Down Expand Up @@ -121,8 +120,8 @@
order: 3;
width: 100%;
padding: 2rem 0;
border-top: 1px solid theme.get("border-color");
background-color: theme.get("background");
border-top: 1px solid css.get("border-color");
background-color: css.get("background");

@include core.media-min(var.$bp-drawer) {
padding: 3rem 0;
Expand Down
4 changes: 2 additions & 2 deletions docs/src/styles/_menu_collection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@use "@vrembem/core/theme";
@use "@vrembem/core/css";

.menu_collection {
margin-top: 0.5rem;

.menu__action.is-active {
background: theme.get("background");
background: css.get("background");
}
}
5 changes: 2 additions & 3 deletions docs/src/styles/_navibar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/theme";
@use "./variables" as var;

.navibar {
position: relative;
z-index: 5;
width: 100%;
padding: 0 css.get("layout", "padding");
background-color: theme.get("background-glass");
background-color: css.get("background-glass");
backdrop-filter: blur(8px);

@include core.media-min(var.$bp-drawer) {
Expand Down Expand Up @@ -74,7 +73,7 @@

@include core.media-min(var.$bp-drawer) {
.has-drawer & {
background-color: theme.get("background-glass");
background-color: css.get("background-glass");
backdrop-filter: blur(8px);
}
}
Expand Down
5 changes: 2 additions & 3 deletions docs/src/styles/_pagi.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "@vrembem/core";
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";

.pagi {
display: flex;
Expand Down Expand Up @@ -33,7 +32,7 @@
transition: border-color;
transition-duration: css.get("transition-duration");
transition-timing-function: css.get("transition-timing-function");
border: 1px solid theme.get("border-color");
border: 1px solid css.get("border-color");
border-radius: css.get("border-radius");
line-height: css.get("line-height-sm");

Expand All @@ -43,7 +42,7 @@
}

.pagi_label {
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");
font-size: css.get("font-size-sm");
}

Expand Down
14 changes: 7 additions & 7 deletions docs/src/styles/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@use "@vrembem/core/config";
@use "@vrembem/core/theme";
@use "@vrembem/core/css";

:root {
// Shiki light theme
--astro-code-color-text: #{theme.get("foreground")};
--astro-code-token-comment: #{theme.get("foreground-lighter")};
--astro-code-color-text: #{css.get("foreground")};
--astro-code-token-comment: #{css.get("foreground-lighter")};
--astro-code-token-constant: #1b6bc6;
--astro-code-token-string: #1b6bc6;
--astro-code-token-keyword: #{theme.get("foreground")};
--astro-code-token-keyword: #{css.get("foreground")};
--astro-code-token-parameter: #df7a32;
--astro-code-token-function: #794bcf;
--astro-code-token-string-expression: #309b4a;
Expand All @@ -16,11 +16,11 @@

// Shiki dark theme
&.#{config.get("prefix-themes")}dark {
--astro-code-color-text: #{theme.get("foreground")};
--astro-code-token-comment: #{theme.get("foreground-lighter")};
--astro-code-color-text: #{css.get("foreground")};
--astro-code-token-comment: #{css.get("foreground-lighter")};
--astro-code-token-constant: #79B8FF;
--astro-code-token-string: #79B8FF;
--astro-code-token-keyword: #{theme.get("foreground")};
--astro-code-token-keyword: #{css.get("foreground")};
--astro-code-token-parameter: #FFAB70;
--astro-code-token-function: #B392F0;
--astro-code-token-string-expression: #85E89D;
Expand Down
6 changes: 3 additions & 3 deletions docs/src/styles/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@use "@vrembem/core/css";
@use "@vrembem/core/palette";
@use "@vrembem/core/theme";

[role="tab"] {
position: relative;
margin: -0.5rem 0;
padding: 0.5rem;
color: theme.get("foreground-lighter");
color: css.get("foreground-lighter");

&::after {
content: "";
Expand All @@ -16,7 +16,7 @@
}

&:hover {
color: theme.get("foreground");
color: css.get("foreground");
}

&[aria-selected="true"] {
Expand Down
Loading