chore(fuselage): Sass overhaul

packages/fuselage-tokens/build.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import StyleDictionary from 'style-dictionary';
 
 console.log('Build started...');

packages/fuselage-tokens/package.json

@@ -45,7 +45,7 @@
     "postcss-scss": "~4.0.9",
     "prettier": "~3.6.2",
     "rimraf": "~6.0.1",
-    "style-dictionary": "~5.1.0",
+    "style-dictionary": "~5.1.1",
     "stylelint": "~16.25.0",
     "stylelint-order": "~7.0.0",
     "stylelint-prettier": "~5.0.3",

packages/fuselage/src/components/Accordion/Accordion.styles.scss

@@ -1,6 +1,8 @@
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
+@use '../../styles/mixins/interactivity.scss';
+@use '../../styles/mixins/shadows.scss';
 
 .rcx-accordion {
   display: flex;
@@ -30,7 +32,7 @@
   border-color: colors.stroke(extra-light) transparent transparent;
 
   &[tabindex] {
-    @include clickable;
+    @include interactivity.clickable;
 
     &.hover,
     &:hover {
@@ -40,7 +42,7 @@
     &.focus,
     &:focus {
       border-color: colors.stroke(highlight);
-      @include use-focus-shadow(
+      @include shadows.use-focus-shadow(
         $outer-color: colors.stroke(extra-light-highlight)
       );
     }

packages/fuselage/src/components/Avatar/Avatar.styles.scss

@@ -1,8 +1,9 @@
 @use '../../styles/colors.scss';
-@use '../../styles/lengths.scss';
 @use '../../styles/functions.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/mixins/size.scss';
 
-$avatar-stack-background-color: theme(
+$avatar-stack-background-color: functions.theme(
   'avatar-background-color',
   colors.surface(light)
 );
@@ -16,7 +17,7 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
 
   @each $size in $sizes {
     &--x#{$size} {
-      @include square(functions.to-rem($size));
+      @include size.square(functions.to-rem($size));
     }
   }
 
@@ -28,17 +29,17 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
     @each $size in $sizes {
       &--x#{$size} {
         @if $size <= 18 {
-          border-radius: theme(
+          border-radius: functions.theme(
             'avatar-border-radius-#{$size}',
             lengths.border-radius(small)
           );
         } @else if $size == 332 {
-          border-radius: theme(
+          border-radius: functions.theme(
             'avatar-border-radius-#{$size}',
             lengths.border-radius(large)
           );
         } @else {
-          border-radius: theme(
+          border-radius: functions.theme(
             'avatar-border-radius-#{$size}',
             lengths.border-radius(medium)
           );
@@ -51,7 +52,7 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
     }
 
     &--rounded {
-      border-radius: theme(
+      border-radius: functions.theme(
         'avatar-border-radius-rounded',
         lengths.border-radius(full)
       );

packages/fuselage/src/components/Badge/Badge.styles.scss

@@ -1,57 +1,58 @@
 @use '../../styles/colors.scss';
+@use '../../styles/functions.scss';
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
-$badge-colors-primary-color: theme(
+$badge-colors-primary-color: functions.theme(
   'badge-colors-primary-color',
   colors.font(pure-white)
 );
-$badge-colors-primary-background-color: theme(
+$badge-colors-primary-background-color: functions.theme(
   'badge-colors-primary-background-color',
   colors.badge(level-2)
 );
 
-$badge-colors-secondary-color: theme(
+$badge-colors-secondary-color: functions.theme(
   'badge-colors-secondary-color',
   colors.font(pure-white)
 );
-$badge-colors-secondary-background-color: theme(
+$badge-colors-secondary-background-color: functions.theme(
   'badge-colors-secondary-background-color',
   colors.badge(level-1)
 );
 
-$badge-colors-warning-color: theme(
+$badge-colors-warning-color: functions.theme(
   'badge-colors-warning-color',
   colors.font(pure-white)
 );
-$badge-colors-warning-background-color: theme(
+$badge-colors-warning-background-color: functions.theme(
   'badge-colors-warning-background-color',
   colors.badge(level-3)
 );
 
-$badge-colors-danger-color: theme(
+$badge-colors-danger-color: functions.theme(
   'badge-colors-danger-color',
   colors.font(pure-white)
 );
-$badge-colors-danger-background-color: theme(
+$badge-colors-danger-background-color: functions.theme(
   'badge-colors-danger-background-color',
   colors.badge(level-4)
 );
 
-$badge-colors-ghost-color: theme(
+$badge-colors-ghost-color: functions.theme(
   'badge-colors-ghost-color',
   colors.font(pure-white)
 );
-$badge-colors-ghost-background-color: theme(
+$badge-colors-ghost-background-color: functions.theme(
   'badge-colors-ghost-background-color',
   colors.stroke(dark)
 );
 
-$badge-colors-disabled-color: theme(
+$badge-colors-disabled-color: functions.theme(
   'badge-colors-disabled-color',
   colors.font(secondary-info)
 );
-$badge-colors-disabled-background-color: theme(
+$badge-colors-disabled-background-color: functions.theme(
   'badge-colors-disabled-background-color',
   colors.surface(neutral)
 );
@@ -76,7 +77,10 @@ $badge-colors-disabled-background-color: theme(
 
   word-break: keep-all;
 
-  border-radius: theme('badge-border-radius', lengths.border-radius(full));
+  border-radius: functions.theme(
+    'badge-border-radius',
+    lengths.border-radius(full)
+  );
 
   @include typography.use-font-scale(micro);
 

packages/fuselage/src/components/Box/Box.styles.scss

@@ -1,3 +1,5 @@
+@use '../../styles/mixins/templates.scss';
+
 .rcx-box {
   @extend %box;
 
@@ -29,6 +31,6 @@
   }
 
   &--focusable {
-    @include focus-state();
+    @include templates.focus-state();
   }
 }

packages/fuselage/src/components/Bubble/Bubble.styles.scss

@@ -2,9 +2,10 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
-@use '../../styles/variables/buttons.scss' as buttonColors;
 @use '../../styles/primitives/button.scss';
 @use '../../styles/mixins/interactivity.scss';
+@use '../../styles/variables/buttons.scss';
+@use '../../styles/variables/button-colors.scss';
 
 .rcx-bubble {
   display: flex;
@@ -15,26 +16,26 @@
 
   &__button {
     &--primary {
-      @include button.kind-variant(buttonColors.$primary);
+      @include button.kind-variant(buttons.$primary);
     }
 
     &--secondary {
-      @include button.kind-variant(buttonColors.$secondary);
+      @include button.kind-variant(buttons.$secondary);
     }
 
-    @include clickable;
-    @include click-animation;
+    @include interactivity.clickable;
+    @include interactivity.click-animation;
   }
 
   &__item {
     &--primary {
-      color: buttonColors.$button-primary-color;
-      background-color: buttonColors.$button-primary-background-color;
+      color: button-colors.$button-primary-color;
+      background-color: button-colors.$button-primary-background-color;
     }
 
     &--secondary {
-      color: buttonColors.$button-secondary-color;
-      background-color: buttonColors.$button-secondary-background-color;
+      color: button-colors.$button-secondary-color;
+      background-color: button-colors.$button-secondary-background-color;
     }
   }
 

packages/fuselage/src/components/Button/Button.styles.scss

@@ -5,7 +5,7 @@
 @use '../../styles/primitives/button.scss';
 @use '../../styles/mixins/size.scss';
 @use '../../styles/mixins/interactivity.scss';
-@import '../../styles/mixins/states.scss';
+@use '../../styles/mixins/states.scss';
 
 .rcx-button {
   @mixin with-rectangular-size($height, $padding-x, $line-height) {
@@ -40,7 +40,7 @@
   white-space: nowrap;
   text-decoration: none;
 
-  @include click-animation($excludeRole: 'status');
+  @include interactivity.click-animation($excludeRole: 'status');
 
   .rcx-button--content {
     display: inline-block;
@@ -52,7 +52,7 @@
     @include typography.use-with-truncated-text();
   }
 
-  @include clickable;
+  @include interactivity.clickable;
   @include typography.use-font-scale(p2m);
   @include typography.use-text-ellipsis;
 
@@ -110,7 +110,7 @@
 
   &--icon {
     @include button.kind-variant(colors.$icon);
-    @include click-animation('status');
+    @include interactivity.click-animation('status');
 
     padding: 0;
 

packages/fuselage/src/components/Callout/Callout.styles.scss

@@ -1,29 +1,36 @@
 @use '../../styles/colors.scss';
+@use '../../styles/functions.scss';
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
-$callout-background-color: theme(
+$callout-background-color: functions.theme(
   'callout-background-color',
   colors.surface(light)
 );
-$callout-default-color: theme(
+$callout-default-color: functions.theme(
   'callout-default-color',
   colors.font(secondary-info)
 );
-$callout-info-color: theme('callout-info-color', colors.status-font(on-info));
-$callout-success-color: theme(
+$callout-info-color: functions.theme(
+  'callout-info-color',
+  colors.status-font(on-info)
+);
+$callout-success-color: functions.theme(
   'callout-success-color',
   colors.status-font(on-success)
 );
-$callout-warning-color: theme(
+$callout-warning-color: functions.theme(
   'callout-warning-color',
   colors.status-font(on-warning)
 );
-$callout-danger-color: theme(
+$callout-danger-color: functions.theme(
   'callout-danger-color',
   colors.status-font(on-danger)
 );
-$callout-text-color: theme('callout-text-color', colors.font(default));
+$callout-text-color: functions.theme(
+  'callout-text-color',
+  colors.font(default)
+);
 
 .rcx-callout {
   display: flex;
@@ -36,7 +43,10 @@ $callout-text-color: theme('callout-text-color', colors.font(default));
   border-style: solid;
   border-color: $callout-default-color;
 
-  border-radius: theme('callout-border-radius', lengths.border-radius(medium));
+  border-radius: functions.theme(
+    'callout-border-radius',
+    lengths.border-radius(medium)
+  );
 
   background-color: $callout-background-color;
 

packages/fuselage/src/components/CheckBox/CheckBox.styles.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../../styles/functions.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-check-box {
@@ -12,8 +13,8 @@
     @extend %selection-button__input;
   }
 
-  $icon-smoothness: to-rem(1);
-  $icon-thickness: to-rem(2);
+  $icon-smoothness: functions.to-rem(1);
+  $icon-thickness: functions.to-rem(2);
   $icon-size: 0.6;
 
   &__fake {
@@ -22,7 +23,7 @@
     justify-content: center;
     align-items: center;
 
-    border-radius: theme(
+    border-radius: functions.theme(
       'check-box-border-radius',
       lengths.border-radius(small)
     );

packages/fuselage/src/components/Chip/Chip.styles.scss

@@ -3,6 +3,8 @@
 @use '../../styles/typography.scss';
 @use '../../styles/functions';
 @use '../../styles/primitives/button.scss';
+@use '../../styles/mixins/interactivity.scss';
+@use '../../styles/variables/button-colors.scss';
 
 // to do: replace button with stroke
 
@@ -76,7 +78,7 @@ $chip-disabled-color: functions.theme(
     )
   );
 
-  @include clickable;
+  @include interactivity.clickable;
   @include typography.use-font-scale('p2');
 
   display: flex;
@@ -89,9 +91,9 @@ $chip-disabled-color: functions.theme(
 
   &.disabled,
   &:disabled {
-    color: $button-secondary-color;
-    border-color: $button-secondary-border-color;
-    background-color: $button-secondary-background-color;
+    color: button-colors.$button-secondary-color;
+    border-color: button-colors.$button-secondary-border-color;
+    background-color: button-colors.$button-secondary-background-color;
   }
 
   &__text {