Skip to content

Commit

Permalink
feat: refactor color styles using tier 3 tokens #57
Browse files Browse the repository at this point in the history
  • Loading branch information
jordanjones243 authored and jason-capsule42 committed Jul 2, 2024
1 parent 18219d3 commit ef1b0ca
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 57 deletions.
8 changes: 7 additions & 1 deletion src/auro-alert.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import information from '@alaskaairux/icons/dist/icons/alert/information-stroke.
import success from '@alaskaairux/icons/dist/icons/interface/check-stroke.mjs';

import styleCss from "./style-css.js";
import colorCss from "./color-css.js";
import tokensCss from "./tokens-css.js";

/**
* @attr {Boolean} noIcon - Removes icon from alert UI
Expand Down Expand Up @@ -47,7 +49,11 @@ export class AuroAlert extends AuroElement {
}

static get styles() {
return [styleCss];
return [
styleCss,
colorCss,
tokensCss
];
}

/**
Expand Down
38 changes: 38 additions & 0 deletions src/color.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

// Import Auro tokens
@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';

.alert {
border-color: var(--ds-auro-alert-border-color);
background-color: var(--ds-auro-alert-container-color);
color: var(--ds-auro-alert-text-color);
}

svg {
color: var(--ds-auro-alert-icon-color);
}

:host([type='error']) {
--ds-auro-alert-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
--ds-auro-alert-icon-color: var(--ds-color-icon-error-default, #{$ds-color-icon-error-default});
}

:host([type='warning']) {
--ds-auro-alert-border-color: var(--ds-color-border-warning-inverse, #{$ds-color-border-warning-inverse});
--ds-auro-alert-icon-color: var(--ds-color-icon-warning-default, #{$ds-color-icon-warning-default});
}

:host([type='information']) {
--ds-auro-alert-border-color: var(--ds-color-border-info-default, #{$ds-color-border-info-default});
--ds-auro-alert-icon-color: var(--ds-color-icon-info-default, #{$ds-color-icon-info-default});
}

:host([type='success']) {
--ds-auro-alert-border-color: var(--ds-color-border-success-default, #{$ds-color-border-success-default});
--ds-auro-alert-icon-color: var(--ds-color-icon-success-default, #{$ds-color-icon-success-default});
}

57 changes: 1 addition & 56 deletions src/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------
Expand All @@ -12,70 +12,15 @@

@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';

// container styles - defines the look of the outer custom component
:host([type='error']),
:host([type='warning']),
:host([type='information']),
:host([type='success']) {
.alert {
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
}
}

:host([type='error']) {
.alert {
border-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
}

svg {
color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
}
}

:host([type='warning']) {
.alert {
border-color: var(--ds-color-alert-warning-default, $ds-color-alert-warning-default);
}

svg {
color: var(--ds-color-alert-warning-default, $ds-color-alert-warning-default);
}
}

:host([type='information']) {
.alert {
border-color: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
}

svg {
color: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
}
}

:host([type='success']) {
.alert {
border-color: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
}

svg {
color: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
}
}

// layout styles - define any layout specifications for UI that is contained WITHIN the component
// never define layout that would cause effect on element outside the scope of this component

.alert {
display: flex;
padding: var(--ds-size-100, $ds-size-100);
padding-right: var(--ds-size-200, $ds-size-200);
padding-left: var(--ds-size-150, $ds-size-150);
border-width: 1px;
border-style: solid;
border-color: var(--ds-color-brand-neutral-400, $ds-color-brand-neutral-400);
border-radius: var(--ds-border-radius, $ds-border-radius);
border-left-width: var(--ds-size-100, $ds-size-100);
background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);
}

.icon {
Expand Down
6 changes: 6 additions & 0 deletions src/tokens.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
:host {
--ds-auro-alert-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
--ds-auro-alert-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
--ds-auro-alert-icon-color: transparent;
--ds-auro-alert-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
}

0 comments on commit ef1b0ca

Please sign in to comment.