Skip to content

Commit

Permalink
feat(components/theme): tokenize border, sizing, and elevation styles (
Browse files Browse the repository at this point in the history
  • Loading branch information
Blackbaud-ErikaMcVey authored Oct 22, 2024
1 parent 6ff09a4 commit e414abf
Show file tree
Hide file tree
Showing 9 changed files with 87 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,5 @@ describe('theme-storybook', () => {
);
});
});
});
}, true);
});
2 changes: 1 addition & 1 deletion libs/components/theme/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@angular/core": "^18.2.8"
},
"dependencies": {
"@blackbaud/skyux-design-tokens": "0.0.39",
"@blackbaud/skyux-design-tokens": "0.0.40",
"@skyux/icons": "7.8.0",
"fontfaceobserver": "2.3.0",
"tslib": "^2.6.3"
Expand Down
42 changes: 37 additions & 5 deletions libs/components/theme/src/lib/styles/_borders.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,53 @@
@use 'mixins' as mixins;
@use 'compat-tokens-mixins' as compatMixins;
@use 'variables' as *;

@include compatMixins.sky-default-overrides() {
--sky-override-border-dark: #{1px solid $sky-border-color-neutral-medium};
--sky-override-border-light: #{1px solid $sky-border-color-neutral-light};
--sky-override-border-row: #{1px dotted $sky-border-color-neutral-medium};
}

.sky-border-bottom-dark {
@include mixins.sky-border(dark);
border-bottom: var(
--sky-override-border-dark,
var(--sky-border-style-separator-dark)
var(--sky-border-width-separator-dark)
var(--sky-color-border-separator-dark)
);
}

.sky-border-bottom-light {
@include mixins.sky-border(light);
border-bottom: var(
--sky-override-border-light,
var(--sky-border-style-separator-light)
var(--sky-border-width-separator-light)
var(--sky-color-border-separator-light)
);
}

.sky-border-bottom-row {
@include mixins.sky-border(row);
border-bottom: var(
--sky-override-border-row,
var(--sky-border-style-separator-row) var(--sky-border-width-separator-row)
var(--sky-color-border-separator-row)
);
}

.sky-border-dark {
@include mixins.sky-border(dark, top, bottom, left, right);
border: var(
--sky-override-border-dark,
var(--sky-border-style-separator-dark)
var(--sky-border-width-separator-dark)
var(--sky-color-border-separator-dark)
);
}

.sky-border-light {
@include mixins.sky-border(light, top, bottom, left, right);
border: var(
--sky-override-border-light,
var(--sky-border-style-separator-light)
var(--sky-border-width-separator-light)
var(--sky-color-border-separator-light)
);
}

This file was deleted.

18 changes: 8 additions & 10 deletions libs/components/theme/src/lib/styles/themes/modern/_elevation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

.sky-theme-modern {
.sky-elevation-0-bordered {
border: $sky-theme-modern-elevation-0-bordered-border;
border: var(--sky-border-style-elevation) var(--sky-border-width-elevation)
var(--sky-color-border-elevation);
}

.sky-elevation-1,
Expand All @@ -11,28 +12,25 @@
}

.sky-elevation-1-bordered {
border-color: var(--sky-color-border-container-base);
border-width: var(--sky-border-width-container-base);
border-style: solid;
border: var(--sky-border-style-elevation)
var(--sky-border-width-container-base)
var(--sky-color-border-container-base);
}

.sky-elevation-3 {
box-shadow: $sky-theme-modern-elevation-3-shadow-size
$sky-theme-modern-elevation-3-shadow-color;
box-shadow: var(--sky-elevation-overflow);
}

.sky-elevation-4 {
box-shadow: var(--sky-elevation-overlay-100);
}

.sky-elevation-8 {
box-shadow: $sky-theme-modern-elevation-8-shadow-size
$sky-theme-modern-elevation-8-shadow-color;
box-shadow: var(--sky-elevation-overlay-200);
}

.sky-elevation-16 {
box-shadow: $sky-theme-modern-elevation-16-shadow-size
$sky-theme-modern-elevation-16-shadow-color;
box-shadow: var(--sky-elevation-overlay-300);
}

.sky-elevation-24 {
Expand Down
55 changes: 35 additions & 20 deletions libs/components/theme/src/lib/styles/themes/modern/_sizing.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,108 @@

.sky-theme-modern {
.sky-padding-even-sm {
padding: $sky-theme-modern-padding-even-sm;
padding: var(--sky-space-inset-balanced-s);
}

.sky-padding-even-md {
padding: $sky-theme-modern-padding-even-md;
padding: var(--sky-space-inset-balanced-m);
}

.sky-padding-even-lg {
padding: var(--sky-space-inset-balanced-l);
}

.sky-padding-even-xl {
padding: $sky-theme-modern-padding-even-xl;
padding: var(--sky-space-inset-balanced-xl);
}

.sky-padding-horizontal-sm {
padding: $sky-theme-modern-padding-h-sm;
padding: var(--sky-space-inset-horizontal-top-s)
var(--sky-space-inset-horizontal-right-s)
var(--sky-space-inset-horizontal-bottom-s)
var(--sky-space-inset-horizontal-left-s);
}

.sky-padding-horizontal-md {
padding: $sky-theme-modern-padding-h-md;
padding: var(--sky-space-inset-horizontal-top-m)
var(--sky-space-inset-horizontal-right-m)
var(--sky-space-inset-horizontal-bottom-m)
var(--sky-space-inset-horizontal-left-m);
}

.sky-padding-horizontal-xl {
padding: $sky-theme-modern-padding-h-xl;
padding: var(--sky-space-inset-horizontal-top-xl)
var(--sky-space-inset-horizontal-right-xl)
var(--sky-space-inset-horizontal-bottom-xl)
var(--sky-space-inset-horizontal-left-xl);
}

.sky-padding-vertical-md {
padding: $sky-theme-modern-padding-v-md;
padding: var(--sky-space-inset-vertical-top-m)
var(--sky-space-inset-vertical-right-m)
var(--sky-space-inset-vertical-bottom-m)
var(--sky-space-inset-vertical-left-m);
}

.sky-padding-vertical-lg {
padding: $sky-theme-modern-padding-v-lg;
padding: var(--sky-space-inset-vertical-top-l)
var(--sky-space-inset-vertical-right-l)
var(--sky-space-inset-vertical-bottom-l)
var(--sky-space-inset-vertical-left-l);
}

.sky-margin-inline-xs {
margin-right: $sky-theme-modern-margin-inline-xs;
margin-right: var(--sky-space-inline-xs);
}

.sky-margin-inline-sm {
margin-right: $sky-theme-modern-margin-inline-sm;
margin-right: var(--sky-space-inline-s);
}

.sky-margin-inline-md {
margin-right: $sky-theme-modern-margin-inline-md;
margin-right: var(--sky-space-inline-m);
}

.sky-margin-inline-lg {
margin-right: $sky-theme-modern-margin-inline-lg;
margin-right: var(--sky-space-inline-l);
}

.sky-margin-inline-xl {
margin-right: $sky-theme-modern-margin-inline-xl;
margin-right: var(--sky-space-inline-xl);
}

.sky-margin-inline-xxl {
margin-right: $sky-theme-modern-margin-inline-xxl;
margin-right: var(--sky-space-inline-xxl);
}

.sky-margin-stacked-xs {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-xs;
margin-bottom: var(--sky-space-stacked-xs);
}

.sky-margin-stacked-sm {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-sm;
margin-bottom: var(--sky-space-stacked-s);
}

.sky-margin-stacked-md {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-md;
margin-bottom: var(--sky-space-stacked-m);
}

.sky-margin-stacked-lg {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-lg;
margin-bottom: var(--sky-space-stacked-l);
}

.sky-margin-stacked-xl {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-xl;
margin-bottom: var(--sky-space-stacked-xl);
}

.sky-margin-stacked-xxl {
margin-top: 0;
margin-bottom: $sky-theme-modern-margin-stacked-xxl;
margin-bottom: var(--sky-space-stacked-xxl);
}

.sky-form-field-stacked {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,3 @@
Order is important here since rules in these files should supersede rules in previous files.
*/
@forward 'sizing';
@forward 'borders';
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"@angular/platform-browser-dynamic": "18.2.8",
"@angular/router": "18.2.8",
"@blackbaud/angular-tree-component": "1.0.0",
"@blackbaud/skyux-design-tokens": "0.0.39",
"@blackbaud/skyux-design-tokens": "0.0.40",
"@nx/angular": "20.0.0",
"@skyux/icons": "7.8.0",
"@storybook/addon-interactions": "8.3.5",
Expand Down

0 comments on commit e414abf

Please sign in to comment.