chore: clean up css tools

packages/ui-stencil/.prettierrc.json

@@ -1,14 +1,14 @@
 {
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "jsxSingleQuote": false,
-  "quoteProps": "consistent",
-  "printWidth": 180,
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 6,
-  "trailingComma": "all",
-  "useTabs": false,
-  "editorConfig": true
+      "arrowParens": "avoid",
+      "bracketSpacing": true,
+      "jsxBracketSameLine": false,
+      "jsxSingleQuote": false,
+      "quoteProps": "consistent",
+      "printWidth": 180,
+      "semi": true,
+      "singleQuote": true,
+      "tabWidth": 6,
+      "trailingComma": "all",
+      "useTabs": false,
+      "editorConfig": true
 }

packages/ui-stencil/src/components/internal/Typography/typography.scss

@@ -1,4 +1,37 @@
 .paragraph {
-  color: var(--text-color-primary, text-color('primary'));
-  font-size: 12px;
+  color: var(--text-color-secondary, text-color('secondary'));
+  font-size: var(--font-size-md, $font-size-md);
+  line-height: var(--font-line-height-m, 1.5);
+
+  &--bold {
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  @media (--md-min) {
+    font-size: var(--font-size-sm, $font-size-sm);
+  }
+}
+
+.span {
+  color:  var(--text-color-tertiary, text-color('tertiary'));
+  font-size: var(--font-size-sm, $font-size-sm);
+  line-height: var(--font-line-height-m, 1.25);
+
+  &--bold {
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  @media (--md-min) {
+    font-size: var(--font-size-xs, $font-size-xs);
+  }
+}
+
+.small {
+  color: var(--text-color-tertiary, text-color('tertiary'));
+  font-size: var(--font-size-xs, $font-size-xs);
+  line-height: var(--font-line-height-s, $font-line-height-s);
+
+  &--bold {
+    font-weight: var(--font-weight-semibold, $font-weight-semibold);
+  }
 }

packages/ui-stencil/src/styles/_mq.scss

@@ -1,9 +1,9 @@
 $grid-breakpoints: (
-  xs: 480px,
-  sm: 768px,
-  md: 1024px,
-  lg: 1200px,
-  xl: 1400px
+  xs: rem-value(480),
+  sm: rem-value(768),
+  md: rem-value(1024),
+  lg: rem-value(1200), // max width
+  xl: rem-value(1400)
 );
 
 // MOBILE DEVICES
@@ -21,8 +21,16 @@ $lg: map($grid-breakpoints, lg);
 // EXTRA LARGE SCREENS, TV
 $xl: map($grid-breakpoints, xl);
 
+$mediaquery: (
+  '--xs': $xs,
+  '--sm': $sm,
+  '--md': $md,
+  '--lg': $lg,
+  '--xl': $xl
+);
+
 /* TABLET PORTRAIT */
-@custom-media --xs-min (width > #{$xs});
+@custom-media --xs-min (width > var(--xs, #{$xs}));
 @custom-media --xs-only (#{$xs} < width <= #{$sm});
 @custom-media --xs-max (width <= #{$xs});
 
@@ -34,7 +42,7 @@ $xl: map($grid-breakpoints, xl);
 @custom-media --md-only (#{$md} < width <= #{$lg});
 @custom-media --md-max (width <= #{$md});
 
-@custom-media --lg-min (width > #{$lg});
+@custom-media --lg-min (width > var(--lg, #{$lg}));
 @custom-media --lg-only (#{$lg} < width <= #{$xl});
 @custom-media --lg-max (width <= #{$lg});
 

packages/ui-stencil/src/styles/_radius.scss

@@ -1,9 +1,6 @@
-$radius-none: 0;
-$radius-2xs: rem-value(2);
-$radius-xs: rem-value(4);
-$radius-sm: rem-value(6);
-$radius-md: rem-value(8);
-$radius-lg: rem-value(12);
-$radius-xl: rem-value(16);
-$radius-2xl: rem-value(24);
-$radius-full: rem-value(50);
+$base: 8;
+
+$radiusS: rem-value($base); // 8px
+$radiusM: rem-value($base * 1.5); // 12px
+$radiusL: rem-value($base * 2); // 16px
+$radius3XL: rem-value($base * 5); // 40px

packages/ui-stencil/src/styles/_spacing.scss

@@ -1,21 +1,10 @@
 $base: 8;
 
-$spacing3XS: rem-value($base * 0.25); // 2px
-$spacingXXS: rem-value($base * 0.5); // 4px
-$spacingXS: rem-value($base); // 8px
-$spacingSM: rem-value($base * 1.5); // 8px
-$spacingS: rem-value($base * 2); // 16px
-$spacingM: rem-value($base * 3); // 24px
-$spacingL: rem-value($base * 4); // 32px
-$spacingXL: rem-value($base * 5); // 40px
-$spacingXXL: rem-value($base * 6); // 48px
-$spacing3XL: rem-value($base * 7); // 56px
-$spacing4XL: rem-value($base * 8); // 64px
-$spacing5XL: rem-value($base * 9); // 72px
-$spacing6XL: rem-value($base * 10); // 80px
-$spacing7XL: rem-value($base * 11); // 88px
-$spacing8XL: rem-value($base * 12); // 96px
-$spacing9XL: rem-value($base * 13); // 104px
-$spacing10XL: rem-value($base * 14); // 112px
-$spacing11XL: rem-value($base * 15); // 120px
-$spacing12XL: rem-value($base * 16); // 128px
+$spacing2XS: rem-value($base * 0.25); // 2px
+$spacingXS: rem-value($base * 0.5); // 4px
+$spacingS: rem-value($base); // 8px
+$spacingM: rem-value($base * 1.5); // 12px
+$spacingL: rem-value($base * 2); // 16px
+$spacingXL: rem-value($base * 3); // 24px
+$spacing2XL: rem-value($base * 4); // 32px
+$spacing3XL: rem-value($base * 5); // 40px

packages/ui-stencil/src/styles/_typography.scss

@@ -1,34 +1,15 @@
 // FONT FAMILY
-$font-primary: var(--font-primary, 'Inter', sans-serif);
-$font-secondary: var(--font-secondary, 'Norm', sans-serif);
-$font-tertiary: var(--font-tertiary, 'JetBrains Mono', monospace);
+$font-primary: var(--font-primary, 'Instrument', sans-serif); // TODO: handle Instrument
 
 // FONT SIZE
-$font-size-2xs: rem-value(10);
 $font-size-xs: rem-value(12);
 $font-size-sm: rem-value(14);
 $font-size-md: rem-value(16);
-$font-size-lg: rem-value(18);
-$font-size-xl: rem-value(20);
-$font-size-2xl: rem-value(24);
-$font-size-3xl: rem-value(30);
-$font-size-4xl: rem-value(36);
-$font-size-5xl: rem-value(48);
-$font-size-6xl: rem-value(60);
-$font-size-7xl: rem-value(72);
-$font-size-8xl: rem-value(96);
-$font-size-9xl: rem-value(128);
 
 // FONT WEIGHT
-$font-weight-light: 300;
 $font-weight-normal: 400;
-$font-weight-medium: 700;
+$font-weight-semibold: 600;
 
 // LINE HEIGHT
-$font-line-height-xs: 1;
 $font-line-height-s: 1.25;
 $font-line-height-m: 1.5;
-$font-line-height-l: 1.75;
-
-// FONT TRACKING - letter-spacing
-$font-tracking-normal: 0;

packages/ui-stencil/src/styles/_zindex.scss

@@ -1,7 +1,7 @@
-$zindex: 'tag', 'menu', 'popoverSupport', 'header', 'configurator';
+// $zindex: 'tag', 'menu', 'popoverSupport', 'header', 'configurator';
 
-$zindex-header: index($zindex, 'header') * 10;
-$zindex-popoverSupport: index($zindex, 'popoverSupport') * 10;
-$zindex-tag: index($zindex, 'tag') * 10;
-$zindex-menu: index($zindex, 'menu') * 10;
-$zindex-configurator: index($zindex, 'configurator') * 10;
+// $zindex-header: index($zindex, 'header') * 10;
+// $zindex-popoverSupport: index($zindex, 'popoverSupport') * 10;
+// $zindex-tag: index($zindex, 'tag') * 10;
+// $zindex-menu: index($zindex, 'menu') * 10;
+// $zindex-configurator: index($zindex, 'configurator') * 10;