Skip to content

Commit

Permalink
feat(design): update status colors in statusable components to use th…
Browse files Browse the repository at this point in the history 
…e status themes (graycoreio#3297)
  • Loading branch information
@xelaint @gracetxgao
xelaint authored and gracetxgao committed Oct 24, 2024
1 parent d007703 commit 7cd53de
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 57 deletions.
76 changes: 40 additions & 36 deletions libs/design/button/src/button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
$primary: map.get($theme, primary);
$secondary: map.get($theme, secondary);
$tertiary: map.get($theme, tertiary);
$info: map.get($theme, info);
$warn: map.get($theme, warn);
$critical: map.get($theme, critical);
$success: map.get($theme, success);
$base: core.daff-map-deep-get($theme, 'core.base');
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
$white: core.daff-map-deep-get($theme, 'core.white');
Expand Down Expand Up @@ -97,25 +101,25 @@

&.daff-warn {
@include button.daff-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60),
theming.daff-color(theming.$daff-bronze, 70),
theming.daff-color(theming.$daff-bronze, 80)
theming.daff-color($warn),
theming.daff-color($warn, 70),
theming.daff-color($warn, 80)
);
}

&.daff-success {
@include button.daff-button-theme-variant(
theming.daff-color(theming.$daff-green, 60),
theming.daff-color(theming.$daff-green, 70),
theming.daff-color(theming.$daff-green, 80)
theming.daff-color($success),
theming.daff-color($success, 70),
theming.daff-color($success, 80)
);
}

&.daff-critical {
@include button.daff-button-theme-variant(
theming.daff-color(theming.$daff-red, 60),
theming.daff-color(theming.$daff-red, 70),
theming.daff-color(theming.$daff-red, 80)
theming.daff-color($critical),
theming.daff-color($critical, 70),
theming.daff-color($critical, 80)
);
}
}
Expand Down Expand Up @@ -173,19 +177,19 @@

&.daff-warn {
@include raised.daff-raised-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60)
theming.daff-color($warn)
);
}

&.daff-critical {
@include raised.daff-raised-button-theme-variant(
theming.daff-color(theming.$daff-red, 60)
theming.daff-color($critical)
);
}

&.daff-success {
@include raised.daff-raised-button-theme-variant(
theming.daff-color(theming.$daff-green, 60)
theming.daff-color($success)
);
}
}
Expand Down Expand Up @@ -268,25 +272,25 @@

&.daff-warn {
@include icon.daff-icon-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60),
theming.daff-color(theming.$daff-bronze, 70),
theming.daff-color(theming.$daff-bronze, 80)
theming.daff-color($warn),
theming.daff-color($warn, 70),
theming.daff-color($warn, 80)
);
}

&.daff-critical {
@include icon.daff-icon-button-theme-variant(
theming.daff-color(theming.$daff-red, 60),
theming.daff-color(theming.$daff-red, 70),
theming.daff-color(theming.$daff-red, 80)
theming.daff-color($critical),
theming.daff-color($critical, 70),
theming.daff-color($critical, 80)
);
}

&.daff-success {
@include icon.daff-icon-button-theme-variant(
theming.daff-color(theming.$daff-green, 60),
theming.daff-color(theming.$daff-green, 70),
theming.daff-color(theming.$daff-green, 80)
theming.daff-color($success),
theming.daff-color($success, 70),
theming.daff-color($success, 80)
);
}
}
Expand Down Expand Up @@ -385,22 +389,22 @@

&.daff-warn {
@include stroked.daff-stroked-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60),
theming.daff-color(theming.$daff-bronze, 70)
theming.daff-color($warn),
theming.daff-color($warn, 70)
);
}

&.daff-critical {
@include stroked.daff-stroked-button-theme-variant(
theming.daff-color(theming.$daff-red, 60),
theming.daff-color(theming.$daff-red, 70)
theming.daff-color($critical),
theming.daff-color($critical, 70)
);
}

&.daff-success {
@include stroked.daff-stroked-button-theme-variant(
theming.daff-color(theming.$daff-green, 60),
theming.daff-color(theming.$daff-green, 70)
theming.daff-color($success),
theming.daff-color($success, 70)
);
}
}
Expand Down Expand Up @@ -487,22 +491,22 @@

&.daff-warn {
@include flat.daff-flat-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60),
theming.daff-color(theming.$daff-bronze, 70)
theming.daff-color($warn),
theming.daff-color($warn, 70)
);
}

&.daff-critical {
@include flat.daff-flat-button-theme-variant(
theming.daff-color(theming.$daff-red, 60),
theming.daff-color(theming.$daff-red, 70)
theming.daff-color($critical),
theming.daff-color($critical, 70)
);
}

&.daff-success {
@include flat.daff-flat-button-theme-variant(
theming.daff-color(theming.$daff-green, 60),
theming.daff-color(theming.$daff-green, 70)
theming.daff-color($success),
theming.daff-color($success, 70)
);
}
}
Expand Down Expand Up @@ -555,19 +559,19 @@

&.daff-warn {
@include underline.daff-underline-button-theme-variant(
theming.daff-color(theming.$daff-bronze, 60)
theming.daff-color($warn)
);
}

&.daff-critical {
@include underline.daff-underline-button-theme-variant(
theming.daff-color(theming.$daff-red, 60)
theming.daff-color($critical)
);
}

&.daff-success {
@include underline.daff-underline-button-theme-variant(
theming.daff-color(theming.$daff-green, 60)
theming.daff-color($success)
);
}
}
Expand Down
28 changes: 16 additions & 12 deletions libs/design/notification/src/notification-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
$primary: map.get($theme, primary);
$secondary: map.get($theme, secondary);
$tertiary: map.get($theme, tertiary);
$info: map.get($theme, info);
$warn: map.get($theme, warn);
$critical: map.get($theme, critical);
$success: map.get($theme, success);
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
$base: core.daff-map-deep-get($theme, 'core.base');
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
Expand All @@ -18,32 +22,32 @@
color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 1));

&.daff-success {
background: theming.daff-color(theming.$daff-green, 10);
border: 1px solid theming.daff-color(theming.$daff-green, 20);
color: theming.daff-text-contrast(theming.daff-color(theming.$daff-green, 10));
background: theming.daff-color($success, 10);
border: 1px solid theming.daff-color($success, 20);
color: theming.daff-text-contrast(theming.daff-color($success, 10));

.daff-prefix {
color: theming.daff-color(theming.$daff-green, 60);
color: theming.daff-color($success);
}
}

&.daff-warn {
background: theming.daff-color(theming.$daff-bronze, 10);
border: 1px solid theming.daff-color(theming.$daff-bronze, 20);
color: theming.daff-text-contrast(theming.daff-color(theming.$daff-bronze, 10));
background: theming.daff-color($warn, 10);
border: 1px solid theming.daff-color($warn, 20);
color: theming.daff-text-contrast(theming.daff-color($warn, 10));

.daff-prefix {
color: theming.daff-color(theming.$daff-bronze, 60);
color: theming.daff-color($warn);
}
}

&.daff-critical {
background: theming.daff-color(theming.$daff-red, 10);
border: 1px solid theming.daff-color(theming.$daff-red, 20);
color: theming.daff-text-contrast(theming.daff-color(theming.$daff-red, 10));
background: theming.daff-color($critical, 10);
border: 1px solid theming.daff-color($critical, 20);
color: theming.daff-text-contrast(theming.daff-color($critical, 10));

.daff-prefix {
color: theming.daff-color(theming.$daff-red, 60);
color: theming.daff-color($critical);
}
}
}
Expand Down
22 changes: 13 additions & 9 deletions libs/design/toast/src/toast-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
$primary: map.get($theme, primary);
$secondary: map.get($theme, secondary);
$tertiary: map.get($theme, tertiary);
$info: map.get($theme, info);
$warn: map.get($theme, warn);
$critical: map.get($theme, critical);
$success: map.get($theme, success);
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
$base: core.daff-map-deep-get($theme, 'core.base');
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
Expand All @@ -22,41 +26,41 @@
}

&.daff-success {
background: theming.daff-color(theming.$daff-green, 10);
background: theming.daff-color($success, 10);
color: $black;

.daff-prefix {
color: theming.daff-color(theming.$daff-green, 60);
color: theming.daff-color($success);
}

&:before {
background: theming.daff-color(theming.$daff-green, 60);
background: theming.daff-color($success);
}
}

&.daff-warn {
background: theming.daff-color(theming.$daff-bronze, 10);
background: theming.daff-color($warn, 10);
color: $black;

.daff-prefix {
color: theming.daff-color(theming.$daff-bronze, 60);
color: theming.daff-color($warn);
}

&:before {
background: theming.daff-color(theming.$daff-bronze, 60);
background: theming.daff-color($warn);
}
}

&.daff-critical {
background: theming.daff-color(theming.$daff-red, 10);
background: theming.daff-color($critical, 10);
color: $black;

.daff-prefix {
color: theming.daff-color(theming.$daff-red, 60);
color: theming.daff-color($critical);
}

&:before {
background: theming.daff-color(theming.$daff-red, 60);
background: theming.daff-color($critical);
}
}
}
Expand Down

0 comments on commit 7cd53de

Please sign in to comment.