@signozhq/design-tokens 0.0.9 → 1.0.0

package/README.md

@@ -1,181 +1 @@
-# 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).
+# `design-tokens`

package/dist/Color.d.ts

@@ -0,0 +1,126 @@
+export declare const Color: {
+    BG_ROBIN_100: string;
+    BG_ROBIN_200: string;
+    BG_ROBIN_300: string;
+    BG_ROBIN_400: string;
+    BG_ROBIN_500: string;
+    BG_ROBIN_600: string;
+    BG_SIENNA_100: string;
+    BG_SIENNA_200: string;
+    BG_SIENNA_300: string;
+    BG_SIENNA_400: string;
+    BG_SIENNA_500: string;
+    BG_SIENNA_600: string;
+    BG_CHERRY_100: string;
+    BG_CHERRY_200: string;
+    BG_CHERRY_300: string;
+    BG_CHERRY_400: string;
+    BG_CHERRY_500: string;
+    BG_CHERRY_600: string;
+    BG_AQUA_100: string;
+    BG_AQUA_200: string;
+    BG_AQUA_300: string;
+    BG_AQUA_400: string;
+    BG_AQUA_500: string;
+    BG_AQUA_600: string;
+    BG_SAKURA_100: string;
+    BG_SAKURA_200: string;
+    BG_SAKURA_300: string;
+    BG_SAKURA_400: string;
+    BG_SAKURA_500: string;
+    BG_SAKURA_600: string;
+    BG_AMBER_100: string;
+    BG_AMBER_200: string;
+    BG_AMBER_300: string;
+    BG_AMBER_400: string;
+    BG_AMBER_500: string;
+    BG_AMBER_600: string;
+    BG_INK_100: string;
+    BG_INK_200: string;
+    BG_INK_300: string;
+    BG_INK_400: string;
+    BG_INK_500: string;
+    BG_VANILLA_100: string;
+    BG_VANILLA_200: string;
+    BG_VANILLA_300: string;
+    BG_VANILLA_400: string;
+    BG_SLATE_50: string;
+    BG_SLATE_100: string;
+    BG_SLATE_200: string;
+    BG_SLATE_300: string;
+    BG_SLATE_400: string;
+    BG_SLATE_500: string;
+    BG_GRADIENT_CORAL: string;
+    "BG_GRADIENT_DARK-SHADOW": string;
+    BG_GRADIENT_DAWN: string;
+    BG_GRADIENT_OCEAN: string;
+    BG_GRADIENT_SPLASH: string;
+    BG_GRADIENT_FLAMINGO: string;
+    BG_FOREST_200: string;
+    BG_FOREST_300: string;
+    BG_FOREST_400: string;
+    BG_FOREST_500: string;
+    BG_FOREST_600: string;
+    TEXT_ROBIN_100: string;
+    TEXT_ROBIN_200: string;
+    TEXT_ROBIN_300: string;
+    TEXT_ROBIN_400: string;
+    TEXT_ROBIN_500: string;
+    TEXT_ROBIN_600: string;
+    TEXT_SIENNA_100: string;
+    TEXT_SIENNA_200: string;
+    TEXT_SIENNA_300: string;
+    TEXT_SIENNA_400: string;
+    TEXT_SIENNA_500: string;
+    TEXT_SIENNA_600: string;
+    TEXT_CHERRY_100: string;
+    TEXT_CHERRY_200: string;
+    TEXT_CHERRY_300: string;
+    TEXT_CHERRY_400: string;
+    TEXT_CHERRY_500: string;
+    TEXT_CHERRY_600: string;
+    TEXT_AQUA_100: string;
+    TEXT_AQUA_200: string;
+    TEXT_AQUA_300: string;
+    TEXT_AQUA_400: string;
+    TEXT_AQUA_500: string;
+    TEXT_AQUA_600: string;
+    TEXT_SAKURA_100: string;
+    TEXT_SAKURA_200: string;
+    TEXT_SAKURA_300: string;
+    TEXT_SAKURA_400: string;
+    TEXT_SAKURA_500: string;
+    TEXT_SAKURA_600: string;
+    TEXT_AMBER_100: string;
+    TEXT_AMBER_200: string;
+    TEXT_AMBER_300: string;
+    TEXT_AMBER_400: string;
+    TEXT_AMBER_500: string;
+    TEXT_AMBER_600: string;
+    TEXT_INK_100: string;
+    TEXT_INK_200: string;
+    TEXT_INK_300: string;
+    TEXT_INK_400: string;
+    TEXT_INK_500: string;
+    TEXT_VANILLA_100: string;
+    TEXT_VANILLA_200: string;
+    TEXT_VANILLA_300: string;
+    TEXT_VANILLA_400: string;
+    TEXT_SLATE_200: string;
+    TEXT_SLATE_300: string;
+    TEXT_SLATE_400: string;
+    TEXT_SLATE_500: string;
+    TEXT_GRADIENT_CORAL: string;
+    "TEXT_GRADIENT_DARK-SHADOW": string;
+    TEXT_GRADIENT_DAWN: string;
+    TEXT_GRADIENT_OCEAN: string;
+    TEXT_GRADIENT_SPLASH: string;
+    TEXT_GRADIENT_FLAMINGO: string;
+    TEXT_FOREST_200: string;
+    TEXT_FOREST_300: string;
+    TEXT_FOREST_400: string;
+    TEXT_FOREST_500: string;
+    TEXT_FOREST_600: string;
+};
+export type ColorKeys = keyof typeof Color;
+//# sourceMappingURL=Color.d.ts.map

package/dist/Color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../src/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/dist/Spacing.d.ts

@@ -0,0 +1,40 @@
+export declare const Spacing: {
+    PADDING_1: string;
+    PADDING_2: string;
+    PADDING_3: string;
+    PADDING_4: string;
+    PADDING_5: string;
+    PADDING_6: string;
+    PADDING_7: string;
+    PADDING_8: string;
+    PADDING_10: string;
+    PADDING_12: string;
+    PADDING_16: string;
+    PADDING_20: string;
+    PADDING_24: string;
+    PADDING_32: string;
+    PADDING_40: string;
+    PADDING_48: string;
+    PADDING_56: string;
+    PADDING_64: string;
+    MARGIN_1: string;
+    MARGIN_2: string;
+    MARGIN_3: string;
+    MARGIN_4: string;
+    MARGIN_5: string;
+    MARGIN_6: string;
+    MARGIN_7: string;
+    MARGIN_8: string;
+    MARGIN_10: string;
+    MARGIN_12: string;
+    MARGIN_16: string;
+    MARGIN_20: string;
+    MARGIN_24: string;
+    MARGIN_32: string;
+    MARGIN_40: string;
+    MARGIN_48: string;
+    MARGIN_56: string;
+    MARGIN_64: string;
+};
+export type SpacingKeys = keyof typeof Spacing;
+//# sourceMappingURL=Spacing.d.ts.map

package/dist/Spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../src/Spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/dist/Typography.d.ts

@@ -0,0 +1,25 @@
+export declare const Typography: {
+    FONTSIZE_XS: string;
+    FONTSIZE_SM: string;
+    FONTSIZE_LG: string;
+    FONTSIZE_XL: string;
+    FONTSIZE_2XL: string;
+    FONTSIZE_3XL: string;
+    FONTSIZE_4XL: string;
+    FONTSIZE_5XL: string;
+    FONTSIZE_6XL: string;
+    FONTSIZE_7XL: string;
+    FONTSIZE_8XL: string;
+    FONTSIZE_9XL: string;
+    FONTWEIGHT_THIN: string;
+    FONTWEIGHT_EXTRALIGHT: string;
+    FONTWEIGHT_LIGHT: string;
+    FONTWEIGHT_NORMAL: string;
+    FONTWEIGHT_MEDIUM: string;
+    FONTWEIGHT_SEMIBOLD: string;
+    FONTWEIGHT_BOLD: string;
+    FONTWEIGHT_EXTRABOLD: string;
+    FONTWEIGHT_BLACK: string;
+};
+export type TypographyKeys = keyof typeof Typography;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/design-tokens.js

@@ -0,0 +1,200 @@
+const F = {
+  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_50: "#62687C",
+  BG_SLATE_100: "#3C4152",
+  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"
+}, B = {
+  PADDING_1: "0.25rem",
+  PADDING_2: "0.5rem",
+  PADDING_3: "0.75rem",
+  PADDING_4: "1rem",
+  PADDING_5: "1.25rem",
+  PADDING_6: "1.5rem",
+  PADDING_7: "1.75rem",
+  PADDING_8: "2rem",
+  PADDING_10: "2.5rem",
+  PADDING_12: "3rem",
+  PADDING_16: "4rem",
+  PADDING_20: "5rem",
+  PADDING_24: "6rem",
+  PADDING_32: "8rem",
+  PADDING_40: "10rem",
+  PADDING_48: "12rem",
+  PADDING_56: "14rem",
+  PADDING_64: "16rem",
+  MARGIN_1: "0.25rem",
+  MARGIN_2: "0.5rem",
+  MARGIN_3: "0.75rem",
+  MARGIN_4: "1rem",
+  MARGIN_5: "1.25rem",
+  MARGIN_6: "1.5rem",
+  MARGIN_7: "1.75rem",
+  MARGIN_8: "2rem",
+  MARGIN_10: "2.5rem",
+  MARGIN_12: "3rem",
+  MARGIN_16: "4rem",
+  MARGIN_20: "5rem",
+  MARGIN_24: "6rem",
+  MARGIN_32: "8rem",
+  MARGIN_40: "10rem",
+  MARGIN_48: "12rem",
+  MARGIN_56: "14rem",
+  MARGIN_64: "16rem"
+}, N = {
+  FONTSIZE_XS: "0.75rem",
+  FONTSIZE_SM: "0.875rem",
+  FONTSIZE_LG: "1.125rem",
+  FONTSIZE_XL: "1.25rem",
+  FONTSIZE_2XL: "1.5rem",
+  FONTSIZE_3XL: "1.875rem",
+  FONTSIZE_4XL: "2.25rem",
+  FONTSIZE_5XL: "3rem",
+  FONTSIZE_6XL: "3.75rem",
+  FONTSIZE_7XL: "4.5rem",
+  FONTSIZE_8XL: "6rem",
+  FONTSIZE_9XL: "8rem",
+  FONTWEIGHT_THIN: "100",
+  FONTWEIGHT_EXTRALIGHT: "200",
+  FONTWEIGHT_LIGHT: "300",
+  FONTWEIGHT_NORMAL: "400",
+  FONTWEIGHT_MEDIUM: "500",
+  FONTWEIGHT_SEMIBOLD: "600",
+  FONTWEIGHT_BOLD: "700",
+  FONTWEIGHT_EXTRABOLD: "800",
+  FONTWEIGHT_BLACK: "900"
+};
+function D() {
+  const _ = (A) => Object.entries(A).map(([E, T]) => `${`--${E.toLowerCase().replace(/_/g, "-")}`}: ${T};`);
+  return `:root {
+  ${[
+    ..._(F),
+    ..._(N),
+    ..._(B)
+  ].join(`
+  `)}
+}`;
+}
+export {
+  F as Color,
+  B as Spacing,
+  N as Typography,
+  D as generateCSSVariables
+};

package/dist/design-tokens.umd.cjs

@@ -0,0 +1,4 @@
+(function(_,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(_=typeof globalThis<"u"?globalThis:_||self,A(_.designTokens={}))})(this,function(_){"use strict";const A={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_50:"#62687C",BG_SLATE_100:"#3C4152",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"},T={PADDING_1:"0.25rem",PADDING_2:"0.5rem",PADDING_3:"0.75rem",PADDING_4:"1rem",PADDING_5:"1.25rem",PADDING_6:"1.5rem",PADDING_7:"1.75rem",PADDING_8:"2rem",PADDING_10:"2.5rem",PADDING_12:"3rem",PADDING_16:"4rem",PADDING_20:"5rem",PADDING_24:"6rem",PADDING_32:"8rem",PADDING_40:"10rem",PADDING_48:"12rem",PADDING_56:"14rem",PADDING_64:"16rem",MARGIN_1:"0.25rem",MARGIN_2:"0.5rem",MARGIN_3:"0.75rem",MARGIN_4:"1rem",MARGIN_5:"1.25rem",MARGIN_6:"1.5rem",MARGIN_7:"1.75rem",MARGIN_8:"2rem",MARGIN_10:"2.5rem",MARGIN_12:"3rem",MARGIN_16:"4rem",MARGIN_20:"5rem",MARGIN_24:"6rem",MARGIN_32:"8rem",MARGIN_40:"10rem",MARGIN_48:"12rem",MARGIN_56:"14rem",MARGIN_64:"16rem"},F={FONTSIZE_XS:"0.75rem",FONTSIZE_SM:"0.875rem",FONTSIZE_LG:"1.125rem",FONTSIZE_XL:"1.25rem",FONTSIZE_2XL:"1.5rem",FONTSIZE_3XL:"1.875rem",FONTSIZE_4XL:"2.25rem",FONTSIZE_5XL:"3rem",FONTSIZE_6XL:"3.75rem",FONTSIZE_7XL:"4.5rem",FONTSIZE_8XL:"6rem",FONTSIZE_9XL:"8rem",FONTWEIGHT_THIN:"100",FONTWEIGHT_EXTRALIGHT:"200",FONTWEIGHT_LIGHT:"300",FONTWEIGHT_NORMAL:"400",FONTWEIGHT_MEDIUM:"500",FONTWEIGHT_SEMIBOLD:"600",FONTWEIGHT_BOLD:"700",FONTWEIGHT_EXTRABOLD:"800",FONTWEIGHT_BLACK:"900"};function B(){const E=N=>Object.entries(N).map(([e,G])=>`${`--${e.toLowerCase().replace(/_/g,"-")}`}: ${G};`);return`:root {
+  ${[...E(A),...E(F),...E(T)].join(`
+  `)}
+}`}_.Color=A,_.Spacing=T,_.Typography=F,_.generateCSSVariables=B,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { Color } from './Color';
+import { Spacing } from './Spacing';
+import { Typography } from './Typography';
+
+export { Color, Spacing, Typography };
+export declare function generateCSSVariables(): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtC,wBAAgB,oBAAoB,IAAI,MAAM,CAc7C"}

package/package.json

@@ -1,34 +1,28 @@
 {
   "name": "@signozhq/design-tokens",
-  "version": "0.0.9",
-  "module": "./dist/design-tokens.js",
-  "private": false,
+  "version": "1.0.0",
   "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "exports": {
-    ".": "./dist/design-tokens.js",
-    "./dist/style.css": "./dist/index.css"
-  },
+  "main": "./dist/design-tokens.js",
+  "module": "./dist/design-tokens.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "vite build",
-    "build-style-dictionary": "style-dictionary build",
-    "generate-tokens": "node ./scripts/generate-types-from-json.mjs"
-  },
   "files": [
     "dist"
   ],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "style-dictionary": "3.8.0",
-    "vite-plugin-dts": "^3.6.4"
-  },
-  "gitHead": "dd9c59b3fa68b5b363aa74e56de9445a0f1433ca",
   "devDependencies": {
-    "vite": "^5.0.8",
-    "vite-plugin-lib-inject-css": "^1.3.0"
+    "@changesets/cli": "^2.27.8",
+    "@types/node": "^22.5.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist node_modules",
+    "update-version": "changeset && changeset version",
+    "release": "pnpm build && changeset publish"
   }
-}
+}