Skip to content

Commit

Permalink
feat(color): use new design tokens for color theme support #197
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: all previously deprecated code has been removed and will no longer be supported
  • Loading branch information
@jordanjones243
jordanjones243 committed Aug 26, 2024
1 parent 8e051ca commit 704ecad
Show file tree
Hide file tree
Showing 19 changed files with 131 additions and 438 deletions.
214 changes: 48 additions & 166 deletions docs/index.html
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package-lock.json
View file

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

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
"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",
"@aurodesignsystem/design-tokens": "^4.9.1",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@semantic-release/changelog": "^6.0.3",
Expand Down
2 changes: 1 addition & 1 deletion src/_blockquote.scss
View file
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
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
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
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
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
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

0 comments on commit 704ecad

Please sign in to comment.