classify colors, rename default theme

src/css/_functions.scss

@@ -8,7 +8,7 @@
  * use a custom property that wasn't defined.
  */
 
-@use "../../build/tokens/scss/tokens.default.scss" as t;
+@use "../../build/tokens/scss/tokens.light.scss" as t;
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";

src/css/base/_general.scss

@@ -11,8 +11,8 @@ body {
   font-family: f.font-family(main);
   font-size: f.base-size();
   line-height: f.lines(1);
-  color: f.color(text);
-  background: f.color(background);
+  color: f.color(text, default);
+  background: f.color(background, foundation);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

src/css/themes/_index.scss

@@ -1,2 +1,2 @@
-@use "default";
+@use "light";
 @use "dark";

src/css/themes/light.scss

@@ -0,0 +1,5 @@
+@use "../../../build/tokens/scss/mixin.light" as tm;
+
+:root {
+  @include tm.tokens;
+}

src/tokens/color/theme.dark.js

@@ -4,9 +4,32 @@
 export default {
   color: {
     $type: "color",
-    text: { $value: "{color.base.white}" },
-    primary: { $value: "{color.base.white}" },
-    secondary: { $value: "{color.base.white}" },
-    background: { $value: "{color.base.black}" },
+    text: {
+      default: {
+        $value: "{color.base.white}",
+      },
+      primary: {
+        $value: "{color.base.white}",
+      },
+    },
+    background: {
+      foundation: {
+        $value: "{color.base.black}",
+      },
+      primary: {
+        $value: "{color.base.black}",
+      },
+      secondary: {
+        $value: "{color.base.black}",
+      },
+    },
+    border: {
+      primary: {
+        $value: "{color.base.white}",
+      },
+      secondary: {
+        $value: "{color.base.white}",
+      },
+    },
   },
 };

src/tokens/color/theme.light.js

@@ -0,0 +1,35 @@
+// Colors for the light theme. You can add more themes by adding files named
+// `theme.{name}.js`.
+
+export default {
+  color: {
+    $type: "color",
+    text: {
+      default: {
+        $value: "{color.base.black}",
+      },
+      primary: {
+        $value: "{color.base.black}",
+      },
+    },
+    background: {
+      foundation: {
+        $value: "{color.base.white}",
+      },
+      primary: {
+        $value: "{color.base.white}",
+      },
+      secondary: {
+        $value: "{color.base.white}",
+      },
+    },
+    border: {
+      primary: {
+        $value: "{color.base.black}",
+      },
+      secondary: {
+        $value: "{color.base.black}",
+      },
+    },
+  },
+};

src/tokens/size/other.js

@@ -11,7 +11,7 @@ export default {
   },
   internal: {
     size: {
-      $type: "dimension",
+      $type: "number",
       spacer: {
         factors: {
           $value: [1, 2, 3, 4, 5, 6, 7, 8],

style-dictionary.js

@@ -2,14 +2,14 @@ import StyleDictionary from "style-dictionary";
 import { fileHeader, formattedVariables } from "style-dictionary/utils";
 
 /*
-Set themes here. The SCSS code uses the default theme to define the accessor
+Set themes here. The SCSS code uses the light theme to define the accessor
 functions. Token files for a specific theme should be named `*.{theme}.json` or
 `*.{theme}.js`. Files without the theme in the name are included in all themes.
 
 When you add a theme, you will also need to add a theme file to `src/css/themes`
 and use it in `src/css/themes/_index.scss`.
 */
-const themes = ["default", "dark"];
+const themes = ["light", "dark"];
 
 const isInternal = (token) => {
   return token.attributes.category == "internal";