unholy-design-tokens 1.0.0

package/src/tokens/1 - primitives/README.md

@@ -0,0 +1,58 @@
+# Primitives Tokens
+
+Primitives are raw values that will be then used to create a more complex system.
+They are the foundation of the design system.
+
+```css
+/* They can include: */
+
+/* colors */
+--color-arylide-yellow-500: #e3c567;
+--color-night-500: #0b0c0c;
+
+/* spacing */
+--spacing-unit: 1rem;
+
+/* border */
+--border-radius-lg: 8px;
+
+/* shadows */
+--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+/* or it could be some bases for scaled values */
+/* See https://every-layout.dev/rudiments/modular-scale/ */
+
+/* etc. */
+```
+
+Some of these categories might be defined as "foundations" in some design systems, and therefore defined only once.
+The most common important token are **colors**. They are usually defined using a palette (100 to 900 scale)
+
+## How primitives tokens are defined
+
+- **Each individual value is a separate token**
+- **Mostly raw values**
+- **No references to other tokens**
+- **No meaning-based names**
+- **Minimal changes over time**
+
+See this as a "pool" of available raw values that you can pick from later.
+It could technically be a huge base of different colors, spacings, with no direct relation so far.
+
+## Who owns primitives?
+
+Usually:
+
+- **Design**: define the palette, spacing scale, etc. → **they choose and own the raw values**
+- **Development** → implement in code, Style Dictionary, etc. → **they only consume these raw values**
+
+## Generate color palette
+
+- Figma plugin: [Color Palette Generator](https://www.figma.com/color-palette-generator/) to create scales from a base color.
+- [Coolors](https://coolors.co/): can generate color palettes and shades in different formats.
+
+🎨 [Picular](https://www.picular.co/) → type any word and get a related color
+
+## Next Steps
+
+From here, you can create [**semantic tokens**](../2%20-%20semantic/README.md) that will give meaning to these raw values.

package/src/tokens/1 - primitives/border.json

@@ -0,0 +1,54 @@
+{
+  "border": {
+    "width": {
+      "base": {
+        "value": "2px"
+      },
+      "scale": {
+        "value": "1.25"
+      }
+    },
+    "style": {
+      "solid": {
+        "value": "solid"
+      },
+      "dashed": {
+        "value": "dashed"
+      },
+      "dotted": {
+        "value": "dotted"
+      },
+      "double": {
+        "value": "double"
+      },
+      "none": {
+        "value": "none"
+      }
+    },
+    "radius": {
+      "base": {
+        "value": 0
+      },
+      // Inside Primitives, there could be any raw value as needed to build tokens.
+      // If you decide one day to change your branding, updating these values shouldn't bu a high priority.
+      // See Primitives as nothing more than a "pool" of eventual variable that you eventually will use to build your design system.
+      "0.5": {
+        "value": "0.5px"
+      },
+      "1": {
+        "value": "1px"
+      },
+      "2": {
+        "value": "2px"
+      },
+      "4": {
+        "value": "4px"
+      },
+
+      // If you prefer to use a scale for border-radius, you can define it here.
+      "scale": {
+        "value": 1.5
+      }
+    }
+  }
+}

package/src/tokens/1 - primitives/breakpoint.json

@@ -0,0 +1,10 @@
+{
+  "breakpoint": {
+    "xs": { "value": "640px" },
+    "sm": { "value": "768px" },
+    "md": { "value": "1024px" },
+    "lg": { "value": "1280px" },
+    "xl": { "value": "1820px" },
+    "xxl": { "value": "2520px" }
+  }
+}

package/src/tokens/1 - primitives/color-pool.json

@@ -0,0 +1,266 @@
+{
+  "color-pool": {
+    "straw-gold": {
+      "100": {
+        "value": "#FBEFD2FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "200": {
+        "value": "#E3C567FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "300": {
+        "value": "#B79F52FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "400": {
+        "value": "#8D7A3DFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "500": {
+        "value": "#65572AFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "600": {
+        "value": "#403718FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "700": {
+        "value": "#1E1908FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "800": {
+        "value": "#0A0600FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "900": {
+        "value": "#030200FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "base": {
+        "value": "#E3C567FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      }
+    },
+    "graphite": {
+      "100": {
+        "value": "#DCE0DCFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "200": {
+        "value": "#B5B8B5FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "300": {
+        "value": "#8F928FFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "400": {
+        "value": "#6B6D6BFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "500": {
+        "value": "#494B49FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "600": {
+        "value": "#2A2B2AFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "700": {
+        "value": "#101110FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "800": {
+        "value": "#050505FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "900": {
+        "value": "#010101FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "base": {
+        "value": "#2A2B2AFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      }
+    },
+    "intense-cherry": {
+      "100": {
+        "value": "#FBEEEEFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "200": {
+        "value": "#F3CBCCFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "300": {
+        "value": "#EA9799FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "400": {
+        "value": "#E4595DFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "500": {
+        "value": "#B4363BFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "600": {
+        "value": "#7A2225FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "700": {
+        "value": "#450F11FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "800": {
+        "value": "#1C0304FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "900": {
+        "value": "#060001FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "base": {
+        "value": "#B4363BFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      }
+    },
+    "vanilla-custard": {
+      "100": {
+        "value": "#EDDA9FFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "200": {
+        "value": "#C2B382FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "300": {
+        "value": "#998D65FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "400": {
+        "value": "#72694BFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "500": {
+        "value": "#4E4731FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "600": {
+        "value": "#2C271AFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "700": {
+        "value": "#131109FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+
+      "800": {
+        "value": "#040302FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "900": {
+        "value": "#010101FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "base": {
+        "value": "#EDDA9FFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      }
+    },
+    "vanilla-cream": {
+      "100": {
+        "value": "#F7EED3FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "200": {
+        "value": "#D6C68CFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "300": {
+        "value": "#AC9F70FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "400": {
+        "value": "#857A55FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "500": {
+        "value": "#5F573BFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "600": {
+        "value": "#3B3624FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "700": {
+        "value": "#1B180EFF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+
+      "800": {
+        "value": "#060503FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "900": {
+        "value": "#010101FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      },
+      "base": {
+        "value": "#F7EED3FF",
+        "type": "color",
+        "attributes": { "tokenTier": "color-pool" }
+      }
+    }
+  }
+}

package/src/tokens/1 - primitives/color.json

@@ -0,0 +1,266 @@
+{
+  "color": {
+    "yellow": {
+      "100": {
+        "value": "{color-pool.straw-gold.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "200": {
+        "value": "{color-pool.straw-gold.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "300": {
+        "value": "{color-pool.straw-gold.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "400": {
+        "value": "{color-pool.straw-gold.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "500": {
+        "value": "{color-pool.straw-gold.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "600": {
+        "value": "{color-pool.straw-gold.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "700": {
+        "value": "{color-pool.straw-gold.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "800": {
+        "value": "{color-pool.straw-gold.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "900": {
+        "value": "{color-pool.straw-gold.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "base": {
+        "value": "{color-pool.straw-gold.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      }
+    },
+    "graphite": {
+      "100": {
+        "value": "{color-pool.graphite.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "200": {
+        "value": "{color-pool.graphite.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "300": {
+        "value": "{color-pool.graphite.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "400": {
+        "value": "{color-pool.graphite.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "500": {
+        "value": "{color-pool.graphite.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "600": {
+        "value": "{color-pool.graphite.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "700": {
+        "value": "{color-pool.graphite.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "800": {
+        "value": "{color-pool.graphite.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "900": {
+        "value": "{color-pool.graphite.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "base": {
+        "value": "{color-pool.graphite.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      }
+    },
+    "intense-cherry": {
+      "100": {
+        "value": "{color-pool.intense-cherry.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "200": {
+        "value": "{color-pool.intense-cherry.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "300": {
+        "value": "{color-pool.intense-cherry.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "400": {
+        "value": "{color-pool.intense-cherry.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "500": {
+        "value": "{color-pool.intense-cherry.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "600": {
+        "value": "{color-pool.intense-cherry.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "700": {
+        "value": "{color-pool.intense-cherry.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "800": {
+        "value": "{color-pool.intense-cherry.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "900": {
+        "value": "{color-pool.intense-cherry.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "base": {
+        "value": "{color-pool.intense-cherry.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      }
+    },
+    "vanilla-custard": {
+      "100": {
+        "value": "{color-pool.vanilla-custard.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "200": {
+        "value": "{color-pool.vanilla-custard.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "300": {
+        "value": "{color-pool.vanilla-custard.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "400": {
+        "value": "{color-pool.vanilla-custard.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "500": {
+        "value": "{color-pool.vanilla-custard.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "600": {
+        "value": "{color-pool.vanilla-custard.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "700": {
+        "value": "{color-pool.vanilla-custard.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+
+      "800": {
+        "value": "{color-pool.vanilla-custard.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "900": {
+        "value": "{color-pool.vanilla-custard.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "base": {
+        "value": "{color-pool.vanilla-custard.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      }
+    },
+    "vanilla-cream": {
+      "100": {
+        "value": "{color-pool.vanilla-cream.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "200": {
+        "value": "{color-pool.vanilla-cream.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "300": {
+        "value": "{color-pool.vanilla-cream.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "400": {
+        "value": "{color-pool.vanilla-cream.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "500": {
+        "value": "{color-pool.vanilla-cream.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "600": {
+        "value": "{color-pool.vanilla-cream.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "700": {
+        "value": "{color-pool.vanilla-cream.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+
+      "800": {
+        "value": "{color-pool.vanilla-cream.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "900": {
+        "value": "{color-pool.vanilla-cream.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      },
+      "base": {
+        "value": "{color-pool.vanilla-cream.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "primitive" }
+      }
+    }
+  }
+}

package/src/tokens/1 - primitives/font-scale.json

@@ -0,0 +1,27 @@
+{
+  "font": {
+    "scale": {
+      "0": {
+        "value": "clamp(0.875rem, 0.6304347826086957rem + 1.0869565217391304vw, 1.5rem)"
+      },
+      "1": {
+        "value": "clamp(0.984375rem, 0.6652173913043479rem + 1.418478260869565vw, 1.7999999999999998rem)"
+      },
+      "2": {
+        "value": "clamp(1.107421875rem, 0.6955434782608696rem + 1.8305706521739133vw, 2.16rem)"
+      },
+      "3": {
+        "value": "clamp(1.245849609375rem, 0.7190951086956524rem + 2.341131114130434vw, 2.5919999999999996rem)"
+      },
+      "4": {
+        "value": "clamp(1.401580810546875rem, 0.7329124320652175rem + 2.9718594599184778vw, 3.1104rem)"
+      },
+      "5": {
+        "value": "clamp(1.5767784118652344rem, 0.7332430078125004rem + 3.749046240234373vw, 3.732479999999999rem)"
+      },
+      "6": {
+        "value": "clamp(1.7738757133483887rem, 0.7153582098760192rem + 4.704522237654976vw, 4.478975999999999rem)"
+      }
+    }
+  }
+}