@signozhq/design-tokens 0.0.4

package/README.md

@@ -0,0 +1,181 @@
+# Basic Style Dictionary
+
+This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
+```bash
+style-dictionary build
+```
+
+You should see something like this output:
+```
+Copying starter files...
+
+Source style dictionary starter files created!
+
+Running `style-dictionary build` for the first time to generate build artifacts.
+
+
+scss
+✔︎  build/scss/_variables.scss
+
+android
+✔︎  build/android/font_dimens.xml
+✔︎  build/android/colors.xml
+
+compose
+✔︎ build/compose/StyleDictionaryColor.kt
+✔︎ build/compose/StyleDictionarySize.kt
+
+ios
+✔︎  build/ios/StyleDictionaryColor.h
+✔︎  build/ios/StyleDictionaryColor.m
+✔︎  build/ios/StyleDictionarySize.h
+✔︎  build/ios/StyleDictionarySize.m
+
+ios-swift
+✔︎  build/ios-swift/StyleDictionary.swift
+
+ios-swift-separate-enums
+✔︎  build/ios-swift/StyleDictionaryColor.swift
+✔︎  build/ios-swift/StyleDictionarySize.swift
+```
+
+Good for you! You have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:
+```
+├── README.md
+├── config.json
+├── tokens/
+│   ├── color/
+│       ├── base.json
+│       ├── font.json
+│   ├── size/
+│       ├── font.json
+├── build/
+│   ├── android/
+│      ├── font_dimens.xml
+│      ├── colors.xml
+│   ├── compose/
+│      ├── StyleDictionaryColor.kt
+│      ├── StyleDictionarySize.kt
+│   ├── scss/
+│      ├── _variables.scss
+│   ├── ios/
+│      ├── StyleDictionaryColor.h
+│      ├── StyleDictionaryColor.m
+│      ├── StyleDictionarySize.h
+│      ├── StyleDictionarySize.m
+│   ├── ios-swift/
+│      ├── StyleDictionary.swift
+│      ├── StyleDictionaryColor.swift
+│      ├── StyleDictionarySize.swift
+```
+
+If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
+
+**Android**
+```xml
+<!-- font_dimens.xml -->
+<resources>
+  <dimen name="size_font_small">12.00sp</dimen>
+  <dimen name="size_font_medium">16.00sp</dimen>
+  <dimen name="size_font_large">32.00sp</dimen>
+  <dimen name="size_font_base">16.00sp</dimen>
+</resources>
+
+<!-- colors.xml -->
+<resources>
+  <color name="color_base_gray_light">#ffcccccc</color>
+  <color name="color_base_gray_medium">#ff999999</color>
+  <color name="color_base_gray_dark">#ff111111</color>
+  <color name="color_base_red">#ffff0000</color>
+  <color name="color_base_green">#ff00ff00</color>
+  <color name="color_font_base">#ffff0000</color>
+  <color name="color_font_secondary">#ff00ff00</color>
+  <color name="color_font_tertiary">#ffcccccc</color>
+</resources>
+```
+
+**Compose**
+```kotlin
+object StyleDictionaryColor {
+  val colorBaseGrayDark = Color(0xff111111)
+  val colorBaseGrayLight = Color(0xffcccccc)
+  val colorBaseGrayMedium = Color(0xff999999)
+  val colorBaseGreen = Color(0xff00ff00)
+  val colorBaseRed = Color(0xffff0000)
+  val colorFontBase = Color(0xffff0000)
+  val colorFontSecondary = Color(0xff00ff00)
+  val colorFontTertiary = Color(0xffcccccc)
+}
+
+object StyleDictionarySize {
+  /** the base size of the font */
+  val sizeFontBase = 16.00.sp
+  /** the large size of the font */
+  val sizeFontLarge = 32.00.sp
+  /** the medium size of the font */
+  val sizeFontMedium = 16.00.sp
+  /** the small size of the font */
+  val sizeFontSmall = 12.00.sp
+}
+```
+
+**SCSS**
+```scss
+// variables.scss
+$color-base-gray-light: #cccccc;
+$color-base-gray-medium: #999999;
+$color-base-gray-dark: #111111;
+$color-base-red: #ff0000;
+$color-base-green: #00ff00;
+$color-font-base: #ff0000;
+$color-font-secondary: #00ff00;
+$color-font-tertiary: #cccccc;
+$size-font-small: 0.75rem;
+$size-font-medium: 1rem;
+$size-font-large: 2rem;
+$size-font-base: 1rem;
+```
+
+**iOS**
+```objc
+#import "StyleDictionaryColor.h"
+
+@implementation StyleDictionaryColor
+
++ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
+  return [[self values] objectAtIndex:colorEnum];
+}
+
++ (NSArray *)values {
+  static NSArray* colorArray;
+  static dispatch_once_t onceToken;
+
+  dispatch_once(&onceToken, ^{
+    colorArray = @[
+[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
+[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
+[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]
+    ];
+  });
+
+  return colorArray;
+}
+
+@end
+```
+
+Pretty nifty! This shows a few things happening:
+1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config.json`. This allows you to split up the token JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
+1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.
+1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.
+
+Now let's make a change and see how that affects things. Open up `tokens/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
+
+**Huzzah!**
+
+Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).

package/build/scss/_variables.scss

@@ -0,0 +1,133 @@
+
+// Do not edit directly
+// Generated on Tue, 19 Dec 2023 12:28:05 GMT
+
+$bg-robin-100: #CAD5FD;
+$bg-robin-200: #B8C7FC;
+$bg-robin-300: #95ACFB;
+$bg-robin-400: #7190F9;
+$bg-robin-500: #4E74F8;
+$bg-robin-600: #3F5ECC;
+$bg-sienna-100: #E6D9CD;
+$bg-sienna-200: #DECCBC;
+$bg-sienna-300: #CEB29B;
+$bg-sienna-400: #BD9979;
+$bg-sienna-500: #AD7F58;
+$bg-sienna-600: #8A6646;
+$bg-cherry-100: #FADADB;
+$bg-cherry-200: #F7C8CA;
+$bg-cherry-300: #F5B6B8;
+$bg-cherry-400: #EA6D71;
+$bg-cherry-500: #E5484D;
+$bg-cherry-600: #B83A3E;
+$bg-aqua-100: #C1EEFD;
+$bg-aqua-200: #9AE4FC;
+$bg-aqua-300: #72D9FB;
+$bg-aqua-400: #4BCFF9;
+$bg-aqua-500: #23C4F8;
+$bg-aqua-600: #07AFE6;
+$bg-sakura-100: #FBC8D2;
+$bg-sakura-200: #FAB5C3;
+$bg-sakura-300: #F791A5;
+$bg-sakura-400: #F56C87;
+$bg-sakura-500: #F24769;
+$bg-sakura-600: #C53955;
+$bg-amber-100: #FFF0CC;
+$bg-amber-200: #FFEBBB;
+$bg-amber-300: #FFE19A;
+$bg-amber-400: #FFD778;
+$bg-amber-500: #FFCD56;
+$bg-amber-600: #D5AA45;
+$bg-ink-100: #2A2E37;
+$bg-ink-200: #23262E;
+$bg-ink-300: #16181D;
+$bg-ink-400: #121317;
+$bg-ink-500: #0B0C0E;
+$bg-vanilla-100: #FFFFFF;
+$bg-vanilla-200: #F5F5F5;
+$bg-vanilla-300: #E9E9E9;
+$bg-vanilla-400: #C0C1C3;
+$bg-slate-200: #2C3140;
+$bg-slate-300: #242834;
+$bg-slate-400: #1D212D;
+$bg-slate-500: #161922;
+$bg-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);
+$bg-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%);
+$bg-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);
+$bg-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);
+$bg-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);
+$bg-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);
+$bg-forest-200: #A8F3D3;
+$bg-forest-300: #7CEDBE;
+$bg-forest-400: #51E7A8;
+$bg-forest-500: #25E192;
+$bg-forest-600: #1EB475;
+$text-robin-100: #CAD5FD;
+$text-robin-200: #B8C7FC;
+$text-robin-300: #95ACFB;
+$text-robin-400: #7190F9;
+$text-robin-500: #4E74F8;
+$text-robin-600: #3F5ECC;
+$text-sienna-100: #E6D9CD;
+$text-sienna-200: #DECCBC;
+$text-sienna-300: #CEB29B;
+$text-sienna-400: #BD9979;
+$text-sienna-500: #AD7F58;
+$text-sienna-600: #8A6646;
+$text-cherry-100: #FADADB;
+$text-cherry-200: #F7C8CA;
+$text-cherry-300: #F5B6B8;
+$text-cherry-400: #EA6D71;
+$text-cherry-500: #E5484D;
+$text-cherry-600: #B83A3E;
+$text-aqua-100: #C1EEFD;
+$text-aqua-200: #9AE4FC;
+$text-aqua-300: #72D9FB;
+$text-aqua-400: #4BCFF9;
+$text-aqua-500: #23C4F8;
+$text-aqua-600: #07AFE6;
+$text-sakura-100: #FBC8D2;
+$text-sakura-200: #FAB5C3;
+$text-sakura-300: #F791A5;
+$text-sakura-400: #F56C87;
+$text-sakura-500: #F24769;
+$text-sakura-600: #C53955;
+$text-amber-100: #FFF0CC;
+$text-amber-200: #FFEBBB;
+$text-amber-300: #FFE19A;
+$text-amber-400: #FFD778;
+$text-amber-500: #FFCD56;
+$text-amber-600: #D5AA45;
+$text-ink-100: #2A2E37;
+$text-ink-200: #23262E;
+$text-ink-300: #16181D;
+$text-ink-400: #121317;
+$text-ink-500: #0B0C0E;
+$text-vanilla-100: #FFFFFF;
+$text-vanilla-200: #F5F5F5;
+$text-vanilla-300: #E9E9E9;
+$text-vanilla-400: #C0C1C3;
+$text-slate-200: #2C3140;
+$text-slate-300: #242834;
+$text-slate-400: #1D212D;
+$text-slate-500: #161922;
+$text-gradient-coral: linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%);
+$text-gradient-dark-shadow: linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%);
+$text-gradient-dawn: linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%);
+$text-gradient-ocean: linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%);
+$text-gradient-splash: linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%);
+$text-gradient-flamingo: linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%);
+$text-forest-200: #A8F3D3;
+$text-forest-300: #7CEDBE;
+$text-forest-400: #51E7A8;
+$text-forest-500: #25E192;
+$text-forest-600: #1EB475;
+$padding-lg: 24px;
+$padding-md: 16px;
+$padding-sm: 12px;
+$margin-lg: 24px;
+$margin-md: 16px;
+$margin-sm: 12px;
+$font-lg: 24px;
+$font-md: 16px;
+$font-sm: 12px;

package/build.js

@@ -0,0 +1,92 @@
+const StyleDictionary = require('style-dictionary');
+const fs = require('fs-extra');
+const webPath = `build/tokens/`;
+fs.removeSync(webPath);
+
+function removeTitle(dictionary) {
+  dictionary.allTokens = dictionary.allTokens.map(token => {
+      token.name = token.name.substring(token.name.indexOf("-") + 1);
+      return token;
+  });
+}
+
+/**
+ * This function will wrap a built-in format and replace `.value` with `.darkValue`
+ * if a token has a `.darkValue`.
+ * @param {String} format - the name of the built-in format
+ * @returns {Function}
+ */
+function darkFormatWrapper(format) {
+  return function (args) {
+    const dictionary = Object.assign({}, args.dictionary);
+    dictionary.allProperties = dictionary.allProperties.map(token => {
+      const { darkValue } = token;
+      if (darkValue) {
+        const returnToken = Object.assign({}, token, {
+          value: token.darkValue
+        });
+        return returnToken;
+      } else {
+        return token;
+      }
+    });
+    dictionary.allTokens = dictionary.allTokens.map(token => {
+      const { darkValue } = token;
+      if (darkValue) {
+        const returnToken = Object.assign({}, token, {
+          value: token.darkValue
+        });
+        return returnToken;
+      } else {
+        return token;
+      }
+    });
+
+    removeTitle(dictionary);
+    args.dictionary = dictionary;
+    // Use the built-in format but with our customized dictionary object
+    // so it will output the darkValue instead of the value
+    return StyleDictionary.format[format]({ ...args, dictionary })
+  }
+}
+
+function lightFormatWrapper(format) {
+  return function (args) {
+    const dictionary = Object.assign({}, args.dictionary);
+    removeTitle(dictionary);
+    args.dictionary = dictionary;
+    return StyleDictionary.format[format]({ ...args, dictionary })
+  }
+}
+
+
+
+StyleDictionary.extend({
+  // custom formats
+  format: {
+    scssDark: darkFormatWrapper(`scss/variables`),
+    scssLight: lightFormatWrapper(`scss/variables`),
+  },
+
+  source: [
+    `tokens/**/*.json`
+  ],
+
+  platforms: {
+    css: {
+      transformGroup: `scss`,
+      buildPath: webPath,
+      files: [{
+        destination: `variables.scss`,
+        format: `scssLight`,
+        options: {
+          outputReferences: true
+        }
+      }, {
+        destination: `variables-dark.scss`,
+        format: `scssDark`,
+        filter: (token) => token.darkValue && token.attributes.category === `color`
+      }]
+    }
+  }
+}).buildAllPlatforms();

package/config.json

@@ -0,0 +1,16 @@
+{
+  "source": ["src/**/*.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "build/scss/",
+
+      "files": [
+        {
+          "destination": "_variables.scss",
+          "format": "scss/variables"
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@signozhq/design-tokens",
+  "version": "0.0.4",
+  "main": "build/scss/_variables.scss",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "style-dictionary build"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "style-dictionary": "3.8.0"
+  },
+  "gitHead": "8cad5e6ea30db1b54f16e80fa18ba880decabf58"
+}

package/src/colors.json

@@ -0,0 +1,410 @@
+{
+  "bg": {
+    "Robin": {
+      "600": {
+        "value": "#3F5ECC"
+      },
+      "500": {
+        "value": "#4E74F8"
+      },
+      "400": {
+        "value": "#7190F9"
+      },
+      "300": {
+        "value": "#95ACFB"
+      },
+      "200": {
+        "value": "#B8C7FC"
+      },
+      "100": {
+        "value": "#CAD5FD"
+      }
+    },
+    "Sienna": {
+      "600": {
+        "value": "#8A6646"
+      },
+      "500": {
+        "value": "#AD7F58"
+      },
+      "400": {
+        "value": "#BD9979"
+      },
+      "300": {
+        "value": "#CEB29B"
+      },
+      "200": {
+        "value": "#DECCBC"
+      },
+      "100": {
+        "value": "#E6D9CD"
+      }
+    },
+    "Cherry": {
+      "600": {
+        "value": "#B83A3E"
+      },
+      "500": {
+        "value": "#E5484D"
+      },
+      "400": {
+        "value": "#EA6D71"
+      },
+      "300": {
+        "value": "#F5B6B8"
+      },
+      "200": {
+        "value": "#F7C8CA"
+      },
+      "100": {
+        "value": "#FADADB"
+      }
+    },
+    "Aqua": {
+      "600": {
+        "value": "#07AFE6"
+      },
+      "500": {
+        "value": "#23C4F8"
+      },
+      "400": {
+        "value": "#4BCFF9"
+      },
+      "300": {
+        "value": "#72D9FB"
+      },
+      "200": {
+        "value": "#9AE4FC"
+      },
+      "100": {
+        "value": "#C1EEFD"
+      }
+    },
+    "Sakura": {
+      "600": {
+        "value": "#C53955"
+      },
+      "500": {
+        "value": "#F24769"
+      },
+      "400": {
+        "value": "#F56C87"
+      },
+      "300": {
+        "value": "#F791A5"
+      },
+      "200": {
+        "value": "#FAB5C3"
+      },
+      "100": {
+        "value": "#FBC8D2"
+      }
+    },
+    "Amber": {
+      "600": {
+        "value": "#D5AA45"
+      },
+      "500": {
+        "value": "#FFCD56"
+      },
+      "400": {
+        "value": "#FFD778"
+      },
+      "300": {
+        "value": "#FFE19A"
+      },
+      "200": {
+        "value": "#FFEBBB"
+      },
+      "100": {
+        "value": "#FFF0CC"
+      }
+    },
+    "Ink": {
+      "500": {
+        "value": "#0B0C0E"
+      },
+      "400": {
+        "value": "#121317"
+      },
+      "300": {
+        "value": "#16181D"
+      },
+      "200": {
+        "value": "#23262E"
+      },
+      "100": {
+        "value": "#2A2E37"
+      }
+    },
+    "Vanilla": {
+      "400": {
+        "value": "#C0C1C3"
+      },
+      "300": {
+        "value": "#E9E9E9"
+      },
+      "200": {
+        "value": "#F5F5F5"
+      },
+      "100": {
+        "value": "#FFFFFF"
+      }
+    },
+    "Slate": {
+      "500": {
+        "value": "#161922"
+      },
+      "400": {
+        "value": "#1D212D"
+      },
+      "300": {
+        "value": "#242834"
+      },
+      "200": {
+        "value": "#2C3140"
+      }
+    },
+    "Gradient": {
+      "Coral": {
+        "value": "linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%)"
+      },
+      "Dark-Shadow": {
+        "value": "linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%)"
+      },
+      "Dawn": {
+        "value": "linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%)"
+      },
+      "Ocean": {
+        "value": "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)"
+      },
+      "Splash": {
+        "value": "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)"
+      },
+      "Flamingo": {
+        "value": "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
+      }
+    },
+    "Forest": {
+      "600": {
+        "value": "#1EB475"
+      },
+      "500": {
+        "value": "#25E192"
+      },
+      "400": {
+        "value": "#51E7A8"
+      },
+      "300": {
+        "value": "#7CEDBE"
+      },
+      "200": {
+        "value": "#A8F3D3"
+      }
+    }
+  },
+  "text": {
+    "Robin": {
+      "600": {
+        "value": "#3F5ECC"
+      },
+      "500": {
+        "value": "#4E74F8"
+      },
+      "400": {
+        "value": "#7190F9"
+      },
+      "300": {
+        "value": "#95ACFB"
+      },
+      "200": {
+        "value": "#B8C7FC"
+      },
+      "100": {
+        "value": "#CAD5FD"
+      }
+    },
+    "Sienna": {
+      "600": {
+        "value": "#8A6646"
+      },
+      "500": {
+        "value": "#AD7F58"
+      },
+      "400": {
+        "value": "#BD9979"
+      },
+      "300": {
+        "value": "#CEB29B"
+      },
+      "200": {
+        "value": "#DECCBC"
+      },
+      "100": {
+        "value": "#E6D9CD"
+      }
+    },
+    "Cherry": {
+      "600": {
+        "value": "#B83A3E"
+      },
+      "500": {
+        "value": "#E5484D"
+      },
+      "400": {
+        "value": "#EA6D71"
+      },
+      "300": {
+        "value": "#F5B6B8"
+      },
+      "200": {
+        "value": "#F7C8CA"
+      },
+      "100": {
+        "value": "#FADADB"
+      }
+    },
+    "Aqua": {
+      "600": {
+        "value": "#07AFE6"
+      },
+      "500": {
+        "value": "#23C4F8"
+      },
+      "400": {
+        "value": "#4BCFF9"
+      },
+      "300": {
+        "value": "#72D9FB"
+      },
+      "200": {
+        "value": "#9AE4FC"
+      },
+      "100": {
+        "value": "#C1EEFD"
+      }
+    },
+    "Sakura": {
+      "600": {
+        "value": "#C53955"
+      },
+      "500": {
+        "value": "#F24769"
+      },
+      "400": {
+        "value": "#F56C87"
+      },
+      "300": {
+        "value": "#F791A5"
+      },
+      "200": {
+        "value": "#FAB5C3"
+      },
+      "100": {
+        "value": "#FBC8D2"
+      }
+    },
+    "Amber": {
+      "600": {
+        "value": "#D5AA45"
+      },
+      "500": {
+        "value": "#FFCD56"
+      },
+      "400": {
+        "value": "#FFD778"
+      },
+      "300": {
+        "value": "#FFE19A"
+      },
+      "200": {
+        "value": "#FFEBBB"
+      },
+      "100": {
+        "value": "#FFF0CC"
+      }
+    },
+    "Ink": {
+      "500": {
+        "value": "#0B0C0E"
+      },
+      "400": {
+        "value": "#121317"
+      },
+      "300": {
+        "value": "#16181D"
+      },
+      "200": {
+        "value": "#23262E"
+      },
+      "100": {
+        "value": "#2A2E37"
+      }
+    },
+    "Vanilla": {
+      "400": {
+        "value": "#C0C1C3"
+      },
+      "300": {
+        "value": "#E9E9E9"
+      },
+      "200": {
+        "value": "#F5F5F5"
+      },
+      "100": {
+        "value": "#FFFFFF"
+      }
+    },
+    "Slate": {
+      "500": {
+        "value": "#161922"
+      },
+      "400": {
+        "value": "#1D212D"
+      },
+      "300": {
+        "value": "#242834"
+      },
+      "200": {
+        "value": "#2C3140"
+      }
+    },
+    "Gradient": {
+      "Coral": {
+        "value": "linear-gradient(114deg, #ED6D68 14.99%, #FCA083 77.27%)"
+      },
+      "Dark-Shadow": {
+        "value": "linear-gradient(139deg, rgba(18, 19, 23, 0.80) 0%, rgba(18, 19, 23, 0.90) 98.68%)"
+      },
+      "Dawn": {
+        "value": "linear-gradient(99deg, #7A97FA 4.42%, #F977FF 96.6%)"
+      },
+      "Ocean": {
+        "value": "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)"
+      },
+      "Splash": {
+        "value": "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)"
+      },
+      "Flamingo": {
+        "value": "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
+      }
+    },
+    "Forest": {
+      "600": {
+        "value": "#1EB475"
+      },
+      "500": {
+        "value": "#25E192"
+      },
+      "400": {
+        "value": "#51E7A8"
+      },
+      "300": {
+        "value": "#7CEDBE"
+      },
+      "200": {
+        "value": "#A8F3D3"
+      }
+    }
+  }
+}

package/src/spacing.json

@@ -0,0 +1,24 @@
+{
+  "padding": {
+    "lg": {
+      "value": "24px"
+    },
+    "md": {
+      "value": "16px"
+    },
+    "sm": {
+      "value": "12px"
+    }
+  },
+  "margin": {
+    "lg": {
+      "value": "24px"
+    },
+    "md": {
+      "value": "16px"
+    },
+    "sm": {
+      "value": "12px"
+    }
+  }
+}

package/src/typography.json

@@ -0,0 +1,13 @@
+{
+  "font": {
+    "lg": {
+      "value": "24px"
+    },
+    "md": {
+      "value": "16px"
+    },
+    "sm": {
+      "value": "12px"
+    }
+  }
+}