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

Implement color theming support #198

Merged
merged 2 commits into from
Aug 26, 2024
Merged

Implement color theming support #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be7f132
feat(color): use new design tokens for color theme support #197
jordanjones243 Aug 23, 2024
d49f11b
build: update deps and config files
jordanjones243 Aug 23, 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
3 changes: 0 additions & 3 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test
214 changes: 48 additions & 166 deletions docs/index.html
View file
Open in desktop

Large diffs are not rendered by default.

390 changes: 227 additions & 163 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
"node": "^18 || ^20"
},
"peerDependencies": {
"@aurodesignsystem/design-tokens": "^4.1.1",
"@aurodesignsystem/design-tokens": "^4.9.1",
"sass": "^1.42.1"
},
"dependencies": {
"chalk": "^5.3.0"
},
"devDependencies": {
"@aurodesignsystem/design-tokens": "^4.9.0",
"@commitlint/cli": "^19.3.0",
"@aurodesignsystem/design-tokens": "^4.9.1",
"@commitlint/cli": "^19.4.0",
"@commitlint/config-conventional": "^19.2.2",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.0",
Expand All @@ -30,7 +30,7 @@
"concat": "^1.0.3",
"copyfiles": "^2.4.1",
"glob": "^11.0.0",
"husky": "^9.1.2",
"husky": "^9.1.5",
"jest": "^29.7.0",
"live-server": "^1.2.1",
"nodemon": "^3.1.4",
Expand All @@ -40,7 +40,7 @@
"sass-lint": "^1.13.1",
"sass-true": ">=6.1.0",
"sassdoc": "^2.7.3",
"semantic-release": "^23.0.8",
"semantic-release": "^24.1.0",
"stylelint": ">=13.13.1",
"stylelint-config-recommended": ">=5.0.0",
"stylelint-config-standard": ">=22.0.0"
Expand Down
2 changes: 1 addition & 1 deletion src/_blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $focus: null !default;
///
#{$sym}#{$prefix}#{$scope}blockquote {
margin-left: 0;
border-left: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
border-left: 1px solid var(--ds-color-border-ui-active-default, $ds-color-border-ui-active-default);
padding: var(--ds-size-100, $ds-size-100);
padding-left: var(--ds-size-400, $ds-size-400);
color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
Expand Down
52 changes: 0 additions & 52 deletions src/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,58 +8,6 @@
// The following mixins provide pre-configured Orion approved
// breakpoints when development mobile-first UIs.

/// Standard breakpoint to support resolutions greater than 1232px.
/// This mixin is to be deprecated during the next major release.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--lg {
/// ...
/// }
/// }
@mixin auro_breakpoint--lg {
@media screen and (min-width: $ds-grid-breakpoint-lg) {
@content;
}
}


/// Standard breakpoint to support resolutions greater than 1024px.
/// This mixin is to be deprecated during the next major release.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--md {
/// ...
/// }
/// }
@mixin auro_breakpoint--md {
@media screen and (min-width: $ds-grid-breakpoint-md) {
@content;
}
}

/// Standard breakpoint to support resolutions greater than 660px.
/// This mixin is to be deprecated during the next major release.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--sm {
/// ...
/// }
/// }
@mixin auro_breakpoint--sm {
@media screen and (min-width: $ds-grid-breakpoint-sm) {
@content;
}
}

/// Open format mixin to define any breakpoint.
///
/// See also: [Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)
Expand Down
66 changes: 0 additions & 66 deletions src/_core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,72 +10,6 @@ $focus-visible: null !default;
// sass-lint:disable no-important

/// Global selector to address box-model and default `:focus` pseudo elements.
///
/// **DEPRECATED!!**
/// The use of the Sass variable `$focus-visible` has been deprecated. See [&:focus-visible](/docs/#accessibility-css-&:focus-visible) for preferred feature.
///
/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` option.
/// @group Accessibility
/// @example scss - Default selector(s)
/// *, *:before, *:after {}
///
/// @example scss - Selector(s) when $scope: true;
/// .auro *, .auro *:before, .auro *:after {}
///
/// @example scss - import file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";
///
/// @example scss - import file with `$focus` set to `true`
/// $focus: true;
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";
///
#{$scope} * {
&,
&:before,
&:after {
box-sizing: border-box;

@media (prefers-reduced-motion: reduce) {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

// =-=-=-=-=-=-= START deprecated code =-=-=-=-=-=-=-=-=-=
// if $focus-visible is true, override the default focus-visible outline
@if $focus-visible == true {
&:focus-visible {
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
} @else if $focus-visible == null {
&:focus-visible {
outline: 0;
}
}

// if $focus-visible is true, override the default focus-visible outline
@if $focus-visible == true {
&:focus-visible {
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
} @else if $focus-visible == null {
&:focus-visible {
outline: 0;
}
}

// if $focus is true, override the default focus outline
@if $focus == true {
&:focus {
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
}
// =-=-=-=-=-=-= END deprecated code =-=-=-=-=-=-=-=-=-=
}

/// Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
///
/// Check current browser support for :focus-visible on [Can I Use](https://caniuse.com/css-focus-visible).
Expand Down
12 changes: 6 additions & 6 deletions src/_essentials.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,10 @@
#{$scope}.#{$prefix}hyperlink {
text-decoration: underline;

color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);

&:visited {
color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
}

&--nav {
Expand All @@ -142,24 +142,24 @@
}

&--ondark {
color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);

&:not(.is-touching) {
&:hover {
color: var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse);
color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
}
}

&:visited {
color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
}
}

&:not(.is-touching) {
&:hover {
text-decoration: none;

color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default);
color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/_focus-visible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@ $focus-visible: false;
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
&:focus-visible {
outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
outline: 1px solid var(--ds-color-border-ui-focus-default, $ds-color-border-ui-focus-default);
}
}
80 changes: 2 additions & 78 deletions src/_grids.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,82 +100,6 @@ $fixed-anchor-width: 168px;
}
}


/// Grid class
/// This class selector is to be deprecated during the next major release.
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group grid
/// @example scss - Default selector(s)
/// .grid {}
///
/// @example scss - Selector(s) when $scope: true;
/// .auro .grid {}
///
/// @example scss - Selector(s) when $prefix: true;
/// .auro_grid {}
///
/// @example html - Example HTML selector use
/// <element class="grid"> ... </element>
/// @example scss - import file;
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}grid {
display: grid;
@include grid_width($ds-grid-breakpoint-xl);
@include grid_margin();
@include grid_gutter($ds-grid-gutter-xs);

&.two-column {

> :nth-child(1) {
grid-area: col1;
}

> :nth-child(2) {
grid-area: col2;
}

grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
grid-template-areas:
"col1"
"col2";

@include auro_grid-breakpoint--md {
grid-template-areas: "col1 col2";
}
}

&.fixed-nav {

@extend .two-column;

> :nth-child(1) {
position: sticky;
top: 0;
--align-self: stretch;
align-self: var(--align-self);
}

@include auro_grid-breakpoint--md {
grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
}
}

&.fixed-anchor {

@extend .two-column;
grid-template-areas:
"col2"
"col1";

@include auro_grid-breakpoint--md {
grid-template-areas: "col1 col2";
grid-template-columns: auto var(--fixed-nav-width, $fixed-nav-width);
}

}
}

/// Container class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
Expand Down Expand Up @@ -358,7 +282,7 @@ $fixed-anchor-width: 168px;

.sidenav {
grid-area: sidenav;
background-color: var(--ds-color-base-white, $ds-color-base-white);
background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
@include grid_padding($ds-grid-margin-xs);

@include auro_grid-breakpoint--md {
Expand Down Expand Up @@ -437,7 +361,7 @@ $fixed-anchor-width: 168px;
.sidenav {
grid-area: sidenav;
z-index: 1;
background-color: var(--ds-color-base-white, $ds-color-base-white);
background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
@include grid_padding($ds-grid-margin-xs);
@include grid-stickycolumn--xs();

Expand Down
Loading