Skip to content

feat(themes): css-vars should accept multiple themes #368

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

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(themes): css-vars should accept multiple themes #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 16 additions & 2 deletions sass/themes/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
/// @access public
/// @group themes
/// @param {map} $theme - The component theme to be used.
/// @param {map} $scope [null] - The CSS variables scope to be used. (optional)
/// @requires {mixin} css-vars-from-theme
/// @example scss Convert grid theme colors to css variables
/// $my-grid-theme grid-theme(
Expand All @@ -59,7 +58,22 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
/// .my-grid {
/// @include css-vars($my-grid-theme);
/// }
@mixin css-vars($theme, $scope: null) {
@mixin css-vars($args...) {
$_themes: meta.keywords($args);
$_is-list: list.length($_themes) > 0;

@if not($_is-list) {
$_theme: if(list.length($args) >= 1, list.nth($args, 1), null);

@include _css-vars($_theme, null);
} @else {
@each $_scope, $_theme in $args {
@include _css-vars($_theme, $_scope);
}
}
}

@mixin _css-vars($theme, $scope) {
$s: map.get($theme, 'selector');
$n: map.get($theme, 'name');
$name: if($scope, $scope, $s or $n);
Expand Down
126 changes: 89 additions & 37 deletions test/_themes.spec.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,58 @@ $schema: (
}
}

@include it('css-vars mixin should generate CSS variables from a theme map') {
$theme: (
background: red,
foreground: blue,
name: my-theme
);

@include assert() {
@include output($selector: false) {
@include css-vars($theme);
}

@include expect($selector: false) {
my-theme {
--background: var(--my-theme-background, red);
--foreground: var(--my-theme-foreground, blue);
}
}
}
}

@include it('css-vars should take in multiple themes and generate CSS variables for each one of them') {
$theme-1: (
background: red,
foreground: blue,
name: my-theme-1
);
$theme-2: (
background: red,
foreground: blue,
name: my-theme-2
);

@include assert() {
@include output($selector: false) {
@include css-vars($theme-1, $theme-2);
}

@include expect($selector: false) {
my-theme-1 {
--background: var(--my-theme-1-background, red);
--foreground: var(--my-theme-1-foreground, blue);
}

my-theme-2 {
--background: var(--my-theme-2-background, red);
--foreground: var(--my-theme-2-foreground, blue);
}
}
}
}

@include it('should resolve values from function instructions') {
$instructions: (
(color: primary),
Expand Down Expand Up @@ -243,43 +295,43 @@ $schema: (
}
}

@include it('should scope theme CSS variables to a specified scope') {
$name: 'igc-avatar';
$theme: map.merge(digest-schema($schema), (name: $name));

// Calling from the root of the stylesheet w/ custom selector provided
@include assert() {
@include output($selector: false) {
@include css-vars($theme, '.custom-selector');
}

@include expect($selector: false) {
.custom-selector {
@each $key, $value in map.remove($theme, $ignored-keys...) {
--#{$key}: var(--#{$name}-#{$key}, #{$value});
}
}
}
}

// Calling from within another selector w/ custom selector provided
@include assert() {
@include output($selector: false) {
.my-theme {
@include css-vars($theme, '.custom-selector');
}
}

@include expect($selector: false) {
.my-theme,
.my-theme .custom-selector {
@each $key, $value in map.remove($theme, $ignored-keys...) {
--#{$key}: var(--#{$name}-#{$key}, #{$value});
}
}
}
}
}
// @include it('should scope theme CSS variables to a specified scope') {
// $name: 'igc-avatar';
// $theme: map.merge(digest-schema($schema), (name: $name));
//
// // Calling from the root of the stylesheet w/ custom selector provided
// @include assert() {
// @include output($selector: false) {
// @include css-vars($theme, '.custom-selector');
// }
//
// @include expect($selector: false) {
// .custom-selector {
// @each $key, $value in map.remove($theme, $ignored-keys...) {
// --#{$key}: var(--#{$name}-#{$key}, #{$value});
// }
// }
// }
// }
//
// // Calling from within another selector w/ custom selector provided
// @include assert() {
// @include output($selector: false) {
// .my-theme {
// @include css-vars($theme, '.custom-selector');
// }
// }
//
// @include expect($selector: false) {
// .my-theme,
// .my-theme .custom-selector {
// @each $key, $value in map.remove($theme, $ignored-keys...) {
// --#{$key}: var(--#{$name}-#{$key}, #{$value});
// }
// }
// }
// }
// }

@include it('should set the border-radius to a value between min and max') {
$border-radius: border-radius(rem(4px), rem(2px), rem(4px));
Expand Down
Loading