Very early draft of new tokens

packages/design-tokens/src/scss/@global.scss

@@ -0,0 +1 @@
+@forward 'global';

packages/design-tokens/src/scss/@themes.scss

@@ -0,0 +1,17 @@
+@use 'themes/light' as theme-light;
+@use 'themes/light-inverted' as theme-light-inverted;
+
+$themes: (
+    // The first theme is the default theme, as the left column in the Figma table.
+    light:
+        (
+            colors: theme-light.$colors,
+            gradients: theme-light.$gradients,
+            shadows: theme-light.$shadows,
+        ),
+    light-inverted: (
+        colors: theme-light-inverted.$colors,
+        gradients: theme-light-inverted.$gradients,
+        shadows: theme-light-inverted.$shadows,
+    )
+);

packages/design-tokens/src/scss/generated/_borders.scss → packages/design-tokens/src/scss/global/_borders.scss

@@ -1,7 +1,8 @@
 // Generated Borders from Supernova. Do not edit manually.
-$border-style-0: none !default;
-$border-style-100: solid !default;
-$border-style-200: dashed !default;
+// Manually created from Figma
+$border-none: none !default;
+$border-solid: solid !default;
+$border-dashed: dashed !default;
 $border-width-0: 0 !default;
 $border-width-100: 1px !default;
 $border-width-200: 2px !default;

packages/design-tokens/src/scss/generated/_other.scss → packages/design-tokens/src/scss/global/_other.scss

@@ -1,14 +1,19 @@
 // Generated Generic Tokens (Other) from Supernova. Do not edit manually.
+// Manually created from Figma
 $container-max-width: 1280px !default;
-$grid-columns: 12 !default;
+
 $breakpoint-mobile: 0 !default;
-$container-padding-mobile: 16px !default;
-$grid-gutter-mobile: 16px !default;
 $breakpoint-tablet: 768px !default;
-$container-padding-tablet: 32px !default;
-$grid-gutter-tablet: 32px !default;
 $breakpoint-desktop: 1280px !default;
+
+$container-padding-mobile: 16px !default;
+$container-padding-tablet: 32px !default;
 $container-padding-desktop: 32px !default;
+
+$grid-columns: 12 !default;
+
+$grid-gutter-mobile: 16px !default;
+$grid-gutter-tablet: 32px !default;
 $grid-gutter-desktop: 32px !default;
 
 $containers: (

packages/design-tokens/src/scss/global/_radii.scss

@@ -0,0 +1,19 @@
+// Generated Radii from Supernova. Do not edit manually.
+// Manually created from Figma
+$radius-0: 0 !default;
+$radius-100: 2px !default;
+$radius-200: 4px !default;
+$radius-300: 8px !default;
+$radius-400: 12px !default;
+$radius-500: 16px !default;
+$radius-full: 9999px !default;
+
+$radii: (
+    0: $radius-0,
+    100: $radius-100,
+    200: $radius-200,
+    300: $radius-300,
+    400: $radius-400,
+    500: $radius-500,
+    full: $radius-full,
+) !default;

packages/design-tokens/src/scss/global/_spaces.scss

@@ -0,0 +1,41 @@
+// Generated Measures from Supernova. Do not edit manually.
+// Manually created from Figma
+$space-0: 0 !default;
+$space-100: 1px !default;
+$space-200: 2px !default;
+$space-300: 4px !default;
+$space-400: 6px !default;
+$space-500: 8px !default;
+$space-600: 12px !default;
+$space-700: 16px !default;
+$space-800: 20px !default;
+$space-900: 24px !default;
+$space-1000: 32px !default;
+$space-1100: 40px !default;
+$space-1200: 48px !default;
+$space-1300: 56px !default;
+$space-1400: 64px !default;
+$space-1500: 72px !default;
+$space-1600: 80px !default;
+$space-1700: 96px !default;
+
+$spaces: (
+    0: $space-0,
+    100: $space-100,
+    200: $space-200,
+    300: $space-300,
+    400: $space-400,
+    500: $space-500,
+    600: $space-600,
+    700: $space-700,
+    800: $space-800,
+    900: $space-900,
+    1000: $space-1000,
+    1100: $space-1100,
+    1200: $space-1200,
+    1300: $space-1300,
+    1400: $space-1400,
+    1500: $space-1500,
+    1600: $space-1600,
+    1700: $space-1700,
+) !default;

packages/design-tokens/src/scss/generated/_typography.scss → packages/design-tokens/src/scss/global/_typography.scss

@@ -1,4 +1,5 @@
 // Generated Typography from Supernova. Do not edit manually.
+// NOT EDITED YET
 $body-large-text-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",

packages/design-tokens/src/scss/global/index.scss

@@ -0,0 +1,5 @@
+@forward 'global/borders';
+@forward 'global/other';
+@forward 'global/radii';
+@forward 'global/spaces';
+@forward 'global/typography';