WIP New Tokens

apps/demo/assets/index.scss

@@ -1,2 +1,3 @@
+@forward '@lmc-eu/spirit-web/src/scss/themes';
 @forward '@lmc-eu/spirit-web/src/scss';
 @forward '@lmc-eu/spirit-demo/scss';

packages/design-tokens/README.md

@@ -184,7 +184,7 @@ your design tokens compatible with Spirit, just create a `@tokens.scss` file and
 @forward 'gradients';
 @forward 'measures';
 @forward 'other';
-@forward 'radii';
+@forward 'src/scss/radii';
 @forward 'shadows';
 @forward 'typography';
 ```
@@ -277,13 +277,13 @@ See the [LICENSE](LICENSE.md) file for information.
 [supernova]: https://spirit.supernova-docs.io
 [`@tokens.scss`]: src/scss/@tokens.scss
 [`index.scss`]: src/scss/index.scss
-[`_borders.sass`]: src/scss/generated/_borders.scss
+[`_borders.sass`]: src/scss/_borders.scss
 [`_colors.sass`]: src/scss/generated/_colors.scss
 [`_gradients.sass`]: src/scss/generated/_gradients.scss
 [`_measures.sass`]: src/scss/generated/_measures.scss
-[`_other.sass`]: src/scss/generated/_other.scss
-[`_radii.sass`]: src/scss/generated/_radii.scss
+[`_other.sass`]: src/scss/_other.scss
+[`_radii.sass`]: src/scss/_radii.scss
 [`_shadows.sass`]: src/scss/generated/_shadows.scss
-[`_typography.sass`]: src/scss/generated/_typography.scss
+[`_typography.sass`]: src/scss/_typography.scss
 [`spirit-web`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web
 [migrate-to-spirit]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/CONTRIBUTING.md#migrating-your-components-to-spirit

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

@@ -0,0 +1,2 @@
+@forward 'themes/light';
+@forward 'themes/light-inverted';

packages/design-tokens/src/scss/generated/_borders.scss → packages/design-tokens/src/scss/_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/_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/_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/_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/_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",