chore: update new design palette names (#771)

RocketChat · Jul 20, 2022 · 1d30d08 · 1d30d08
1 parent e121ad0
commit 1d30d08
Show file tree

Hide file tree

Showing 19 changed files with 774 additions and 741 deletions.
diff --git a/packages/fuselage-tokens/src/button/base.json b/packages/fuselage-tokens/src/button/base.json
@@ -1,68 +1,77 @@
 {
   "button": {
-    "primary": { "value": "{colors.p500}" },
-    "secondary": { "value": "{colors.n400}" },
-    "secondaryDanger": { "value": "{colors.n400}" },
-    "danger": { "value": "{colors.d500}" },
-    "warning": { "value": "{colors.w400}" },
-    "secondaryWarning": { "value": "{colors.n400}" },
-    "success": { "value": "{colors.s500}" },
-    "secondarySuccess": { "value": "{colors.n400}" },
+    "backgroundPrimaryDefault": { "value": "{colors.p500}" },
+    "backgroundPrimaryHover": { "value": "{colors.p600}" },
+    "backgroundPrimaryPress": { "value": "{colors.p700}" },
+    "backgroundPrimaryFocus": { "value": "{colors.p500}" },
+    "backgroundPrimaryKeyfocus": { "value": "{colors.p500}" },
+    "backgroundPrimaryDisabled": { "value": "{colors.p200}" },
+    "fontOnPrimary": { "value": "{colors.white}" },
+    "fontOnPrimaryDisabled": { "value": "{colors.white}" },
 
-    "hoverPrimary": { "value": "{colors.p600}" },
-    "hoverSecondary": { "value": "{colors.n500}" },
-    "hoverSecondaryDanger": { "value": "{colors.n500}" },
-    "hoverDanger": { "value": "{colors.d600}" },
-    "hoverWarning": { "value": "{colors.w500}" },
-    "hoverSecondaryWarning": { "value": "{colors.n500}" },
-    "hoverSuccess": { "value": "{colors.s600}" },
-    "hoverSecondarySuccess": { "value": "{colors.n500}" },
+    "backgroundSecondaryDefault": { "value": "{colors.n400}" },
+    "backgroundSecondaryHover": { "value": "{colors.n500}" },
+    "backgroundSecondaryPress": { "value": "{colors.n600}" },
+    "backgroundSecondaryFocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryKeyfocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryDisabled": { "value": "{colors.n300}" },
+    "fontOnSecondary": { "value": "{colors.n900}" },
+    "fontOnSecondaryDisabled": { "value": "{colors.n600}" },
 
-    "pressPrimary": { "value": "{colors.p700}" },
-    "pressSecondary": { "value": "{colors.n600}" },
-    "pressSecondaryDanger": { "value": "{colors.n600}" },
-    "pressDanger": { "value": "{colors.d700}" },
-    "pressWarning": { "value": "{colors.w600}" },
-    "pressSecondaryWarning": { "value": "{colors.n600}" },
-    "pressSuccess": { "value": "{colors.s700}" },
-    "pressSecondarySuccess": { "value": "{colors.n600}" },
+    "backgroundSecondaryDangerDefault": { "value": "{colors.n400}" },
+    "backgroundSecondaryDangerHover": { "value": "{colors.n500}" },
+    "backgroundSecondaryDangerPress": { "value": "{colors.n600}" },
+    "backgroundSecondaryDangerFocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryDangerKeyfocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryDangerDisabled": { "value": "{colors.n300}" },
+    "fontOnSecondaryDanger": { "value": "{colors.d700}" },
+    "onSecondaryDangerDisabled": { "value": "{colors.d300}" },
 
-    "focusPrimary": { "value": "{colors.p500}" },
-    "focusSecondary": { "value": "{colors.n400}" },
-    "focusSecondaryDanger": { "value": "{colors.n400}" },
-    "focusDanger": { "value": "{colors.d500}" },
-    "focusWarning": { "value": "{colors.w400}" },
-    "focusSecondaryWarning": { "value": "{colors.n400}" },
-    "focusSuccess": { "value": "{colors.s500}" },
-    "focusSecondarySuccess": { "value": "{colors.n400}" },
+    "backgroundDangerDefault": { "value": "{colors.d500}" },
+    "backgroundDangerHover": { "value": "{colors.d600}" },
+    "backgroundDangerPress": { "value": "{colors.d700}" },
+    "backgroundDangerFocus": { "value": "{colors.d500}" },
+    "backgroundDangerKeyfocus": { "value": "{colors.d500}" },
+    "backgroundDangerDisabled": { "value": "{colors.d200}" },
+    "fontOnDanger": { "value": "{colors.white}" },
+    "fontOnDangerDisabled": { "value": "{colors.white}" },
 
-    "keyfocusPrimary": { "value": "{colors.p500}" },
-    "keyfocusSecondary": { "value": "{colors.n400}" },
-    "keyfocusSecondaryDanger": { "value": "{colors.n400}" },
-    "keyfocusDanger": { "value": "{colors.d500}" },
-    "keyfocusWarning": { "value": "{colors.w400}" },
-    "keyfocusSecondaryWarning": { "value": "{colors.n400}" },
-    "keyfocusSuccess": { "value": "{colors.s500}" },
-    "keyfocusSecondarySuccess": { "value": "{colors.n400}" },
+    "backgroundWarningDefault": { "value": "{colors.w400}" },
+    "backgroundWarningHover": { "value": "{colors.w500}" },
+    "backgroundWarningPress": { "value": "{colors.w600}" },
+    "backgroundWarningFocus": { "value": "{colors.w400}" },
+    "backgroundWarningKeyfocus": { "value": "{colors.w400}" },
+    "backgroundWarningDisabled": { "value": "{colors.w200}" },
+    "fontOnWarning": { "value": "{colors.n900}" },
+    "fontOnWarningDisabled": { "value": "{colors.n600}" },
 
-    "disabledPrimary": { "value": "{colors.p200}" },
-    "disabledSecondary": { "value": "{colors.n300}" },
-    "disabledSecondaryDanger": { "value": "{colors.n300}" },
-    "disabledDanger": { "value": "{colors.d200}" },
-    "disabledWarning": { "value": "{colors.w200}" },
-    "disabledSecondaryWarning": { "value": "{colors.n300}" },
-    "disabledSuccess": { "value": "{colors.s200}" },
-    "disabledSecondarySuccess": { "value": "{colors.n300}" },
+    "backgroundSecondaryWarningDefault": { "value": "{colors.n400}" },
+    "backgroundSecondaryWarningHover": { "value": "{colors.n500}" },
+    "backgroundSecondaryWarningPress": { "value": "{colors.n600}" },
+    "backgroundSecondaryWarningFocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryWarningKeyfocus": { "value": "{colors.n400}" },
+    "backgroundSecondaryWarningDisabled": { "value": "{colors.n300}" },
+    "fontOnSecondaryWarning": { "value": "{colors.w900}" },
+    "fontOnSecondaryWarningDisabled": { "value": "{colors.w600}" },
 
-    "onPrimary": { "value": "{colors.white}" },
-    "onSecondary": { "value": "{colors.n900}" },
-    "onSecondaryDanger": { "value": "{colors.d700}" },
-    "onDanger": { "value": "{colors.white}" },
-    "onDisabled": { "value": "{colors.n600}" },
-    "onSecondaryDangerDisable": { "value": "{colors.d300}" },
-    "onWarning": { "value": "{colors.n900}" },
-    "onSecondaryWarning": { "value": "{colors.w900}" },
-    "onSuccess": { "value": "{colors.n900}" },
-    "onSecondarySuccess": { "value": "{colors.s900}" }
+    "backgroundSuccessDefault": { "value": "{colors.s500}" },
+    "backgroundSuccessHover": { "value": "{colors.s600}" },
+    "backgroundSuccessPress": { "value": "{colors.s700}" },
+    "backgroundSuccessFocus": { "value": "{colors.s500}" },
+    "backgroundSuccessKeyfocus": { "value": "{colors.s500}" },
+    "backgroundSuccessDisabled": { "value": "{colors.s200}" },
+    "fontOnSuccess": { "value": "{colors.n900}" },
+    "fontOnSuccessDisabled": { "value": "{colors.white}" },
+
+    "backgroundSecondarySuccessDefault": { "value": "{colors.n400}" },
+    "backgroundSecondarySuccessHover": { "value": "{colors.n500}" },
+    "backgroundSecondarySuccessPress": { "value": "{colors.n600}" },
+    "backgroundSecondarySuccessFocus": { "value": "{colors.n400}" },
+    "backgroundSecondarySuccessKeyfocus": { "value": "{colors.n400}" },
+    "backgroundSecondarySuccessDisabled": { "value": "{colors.n300}" },
+    "fontOnSecondarySuccess": { "value": "{colors.s900}" },
+    "fontOnSecondarySuccessDisabled": { "value": "{colors.s400}" },
+
+    "onDisabled": { "value": "{colors.n600}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/font/base.json b/packages/fuselage-tokens/src/font/base.json
@@ -0,0 +1,13 @@
+{
+  "font": {
+    "white": { "value": "{colors.white}" },
+    "disabled": { "value": "{colors.n500}" },
+    "annotation": { "value": "{colors.n600}" },
+    "hint": { "value": "{colors.n700}" },
+    "secondaryInfo": { "value": "{colors.n700}" },
+    "default": { "value": "{colors.n800}" },
+    "titlesLabels": { "value": "{colors.n900}" },
+    "info": { "value": "{colors.i600}" },
+    "danger": { "value": "{colors.d600}" }
+  }
+}
diff --git a/packages/fuselage-tokens/src/status/base.json b/packages/fuselage-tokens/src/status/base.json
@@ -0,0 +1,16 @@
+{
+  "status": {
+    "info": { "value": "{colors.p200}" },
+    "font-on-info": { "value": "{colors.p600}" },
+    "success": { "value": "{colors.s200}" },
+    "font-on-success": { "value": "{colors.s800}" },
+    "danger": { "value": "{colors.d200}" },
+    "font-on-danger": { "value": "{colors.d800}" },
+    "warning": { "value": "{colors.w200}" },
+    "font-on-warning": { "value": "{colors.w900}" },
+    "service-1": { "value": "{colors.s1-200}" },
+    "font-on-service-1": { "value": "{colors.s1-800}" },
+    "service-2": { "value": "{colors.s2-200}" },
+    "font-on-service-2": { "value": "{colors.s2-600}" }
+  }
+}
diff --git a/packages/fuselage-tokens/src/stroke/base.json b/packages/fuselage-tokens/src/stroke/base.json
@@ -8,8 +8,6 @@
     "extraLightHighlight": { "value": "{colors.p200}" },
     "highlight": { "value": "{colors.p500}" },
     "extraLightError": { "value": "{colors.d200}" },
-    "error": { "value": "{colors.d500}" },
-    "warning": { "value": "{colors.w200}" },
-    "success": { "value": "{colors.s200}" }
+    "error": { "value": "{colors.d500}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/surface/base.json b/packages/fuselage-tokens/src/surface/base.json
@@ -4,12 +4,6 @@
     "tint": { "value": "{colors.n100}" },
     "neutral": { "value": "{colors.n400}" },
     "disabled": { "value": "{colors.n100}" },
-    "hover": { "value": "{colors.n400}" },
-    "info": { "value": "{colors.i200}" },
-    "success": { "value": "{colors.s200}" },
-    "warning": { "value": "{colors.w200}" },
-    "danger": { "value": "{colors.d200}" },
-    "service1": { "value": "{colors.s1-200}" },
-    "service2": { "value": "{colors.s2-200}" }
+    "hover": { "value": "{colors.n400}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/text/base.json b/packages/fuselage-tokens/src/text/base.json
diff --git a/packages/fuselage/src/components/Banner/Banner.styles.scss b/packages/fuselage/src/components/Banner/Banner.styles.scss
@@ -6,7 +6,7 @@
 // neutral
 $banner-colors-neutral-color: functions.theme(
   'banner-colors-neutral-color',
-  colors.text(on-neutral)
+  colors.font(default)
 );
 $banner-colors-neutral-background-color: functions.theme(
   'banner-colors-neutral-background-color',
@@ -15,38 +15,38 @@ $banner-colors-neutral-background-color: functions.theme(
 // info
 $banner-colors-info-color: functions.theme(
   'banner-colors-info-color',
-  colors.text(on-info)
+  colors.status-font(on-info)
 );
 $banner-colors-info-background-color: functions.theme(
   'banner-colors-info-background-color',
-  colors.surface(info)
+  colors.status-background(info)
 );
 // success
 $banner-colors-success-color: functions.theme(
   'banner-colors-success-color',
-  colors.text(on-success)
+  colors.status-font(on-success)
 );
 $banner-colors-success-background-color: functions.theme(
   'banner-colors-success-background-color',
-  colors.surface(success)
+  colors.status-background(success)
 );
 // warning
 $banner-colors-warning-color: functions.theme(
   'banner-colors-warning-color',
-  colors.text(on-warning)
+  colors.status-font(on-warning)
 );
 $banner-colors-warning-background-color: functions.theme(
   'banner-colors-warning-background-color',
-  colors.surface(warning)
+  colors.status-background(warning)
 );
 // danger
 $banner-colors-danger-color: functions.theme(
   'banner-colors-danger-color',
-  colors.text(on-danger)
+  colors.status-font(on-danger)
 );
 $banner-colors-danger-background-color: functions.theme(
   'banner-colors-danger-background-color',
-  colors.surface(danger)
+  colors.status-background(danger)
 );
 
 .rcx-banner {

diff --git a/packages/fuselage/src/components/Callout/styles.scss b/packages/fuselage/src/components/Callout/styles.scss
@@ -9,41 +9,41 @@
   padding-inline-start: lengths.padding(16);
   padding-inline-end: lengths.padding(32);
 
-  color: theme('callout-color', colors.text(on-neutral));
+  color: theme('callout-color', colors.font(default));
 
   border-radius: lengths.border-radius(2);
 
   background-color: theme('callout-background-color', colors.surface(neutral));
 
   &--type-info {
-    color: theme('callout-color-info', colors.text(on-info));
+    color: theme('callout-color-info', colors.status-font(on-info));
     background-color: theme(
       'callout-background-color-info',
-      colors.surface(info)
+      colors.status-background(info)
     );
   }
 
   &--type-success {
-    color: theme('callout-color-success', colors.text(on-success));
+    color: theme('callout-color-success', colors.status-font(on-success));
     background-color: theme(
       'callout-background-color-success',
-      colors.surface(success)
+      colors.status-background(success)
     );
   }
 
   &--type-warning {
-    color: theme('callout-color-warning', colors.text(on-warning));
+    color: theme('callout-color-warning', colors.status-font(on-warning));
     background-color: theme(
       'callout-background-color-warning',
-      colors.surface(warning)
+      colors.status-background(warning)
     );
   }
 
   &--type-danger {
-    color: theme('callout-color-danger', colors.text(on-danger));
+    color: theme('callout-color-danger', colors.status-font(on-danger));
     background-color: theme(
       'callout-background-color-danger',
-      colors.surface(danger)
+      colors.status-background(danger)
     );
   }
 }

diff --git a/packages/fuselage/src/components/Chip/styles.scss b/packages/fuselage/src/components/Chip/styles.scss
@@ -3,36 +3,35 @@
 @use '../../styles/typography.scss';
 @use '../../styles/functions';
 @use '../../styles/primitives/button.scss';
-// : theme('badge-colors-primary-color', colors.foreground(alternative));
 
 $chip-background-color: functions.theme(
   'chip-background-color',
-  colors.button(secondary)
+  colors.button(secondary-default)
 );
 $chip-border-color: functions.theme(
   'chip-border-color',
-  colors.button(secondary)
+  colors.button(secondary-default)
 );
-$chip-color: functions.theme('chip-color', colors.text(on-secondary));
+$chip-color: functions.theme('chip-color', colors.font(secondary-info));
 $chip-hover-background-color: functions.theme(
   'chip-hover-background-color',
-  colors.button(hover-secondary)
+  colors.button(secondary-hover)
 );
 $chip-hover-border-color: functions.theme(
   'chip-hover-border-color',
-  colors.button(hover-secondary)
+  colors.button(secondary-hover)
 );
 $chip-active-background-color: functions.theme(
   'chip-active-background-color',
-  colors.button(press-secondary)
+  colors.button(secondary-press)
 );
 $chip-active-border-color: functions.theme(
   'chip-active-border-color',
-  colors.button(press-secondary)
+  colors.button(secondary-press)
 );
 $chip-focus-background-color: functions.theme(
   'chip-focus-background-color',
-  colors.button(focus-secondary)
+  colors.button(secondary-focus)
 );
 $chip-focus-border-color: functions.theme(
   'chip-focus-border-color',
@@ -44,15 +43,15 @@ $chip-focus-shadow-color: functions.theme(
 );
 $chip-disabled-background-color: functions.theme(
   'chip-disabled-background-color',
-  colors.button(disabled-secondary)
+  colors.button(secondary-disabled)
 );
 $chip-disabled-border-color: functions.theme(
   'chip-disabled-border-color',
-  colors.button(disabled-secondary)
+  colors.button(secondary-disabled)
 );
 $chip-disabled-color: functions.theme(
   'chip-disabled-color',
-  colors.text(on-disabled)
+  colors.font(disabled)
 );
 
 .rcx-chip {
@@ -88,9 +87,9 @@ $chip-disabled-color: functions.theme(
 
   &.disabled,
   &:disabled {
-    color: $button-colors-secondary-color;
-    border-color: $button-colors-secondary-border-color;
-    background-color: $button-colors-secondary-background-color;
+    color: $button-secondary-color;
+    border-color: $button-secondary-border-color;
+    background-color: $button-secondary-background-color;
   }
 
   &__text {