unholy-design-tokens 1.0.0

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

@@ -0,0 +1,23 @@
+{
+  "font": {
+    "minFont": { "value": 14 },
+    "maxFont": { "value": 24 },
+
+    "minViewport": { "value": 360 },
+    "maxViewport": { "value": 1280 },
+
+    "scaleMin": { "value": 1.125 },
+    "scaleMax": { "value": 1.2 },
+
+    "steps": {
+      "value": [0, 1, 2, 3, 4, 5, 6]
+    },
+
+    "weight": {
+      "light": { "value": 300 },
+      "normal": { "value": 400 },
+      "medium": { "value": 500 },
+      "bold": { "value": 700 }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "shadow": {
+    // "xs": {
+    //   "value": 0.25
+    // },
+    // "sm": {
+    //   "value": 0.5
+    // },
+    // "md": {
+    //   "value": 1
+    // },
+    // "lg": {
+    //   "value": 2
+    // },
+    // "xl": {
+    //   "value": 4
+    // },
+    // If you prefer rely on a personal scale
+    "base": {
+      "value": 1
+    },
+    "scale": {
+      "value": 1.5
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "space": {
+    "fluid": {
+      "min": { "value": "1rem" },
+      "max": { "value": "1.5rem" },
+      "min_viewport": { "value": "360px" },
+      "max_viewport": { "value": "1280px" }
+    },
+    "unit": {
+      "default": { "value": "1rem" },
+      "fluid": {
+        "value": "clamp(var(--space-fluid-min), calc(var(--space-fluid-min) + (var(--space-fluid-max) - var(--space-fluid-min)) * ((100vw - var(--space-fluid-min-viewport)) / (var(--space-fluid-max-viewport) - var(--space-fluid-min-viewport)))), var(--space-fluid-max))"
+      }
+    },
+
+    "multiplier": {
+      "unit": { "value": "1rem" },
+      "xxs": { "value": 0.25 },
+      "xs": { "value": 0.5 },
+      "sm": { "value": 0.75 },
+      "md": { "value": 1 },
+      "lg": { "value": 2 },
+      "xl": { "value": 3.25 },
+      "xxl": { "value": 5.25 }
+    }
+  }
+}

package/src/tokens/2 - semantic/README.md

@@ -0,0 +1,49 @@
+# Semantic Tokens Tier
+
+Semantic tokens answer the question:
+
+> “What is this thing?”
+
+Semantic tokens define **meaning** inside the design system.
+
+## Why this term "semantic" is confusing designers and developers
+
+These tokens don't define the semantic in the HTML or front-end, they define meaning in the design system tokens hierarchy.
+
+> See [_About HTML semantics and front-end architecture_](https://nicolasgallagher.com/about-html-semantics-front-end-architecture/)
+
+## Why to use semantic tokens
+
+- Use [aliasing](https://designtokens.fyi/#/terms/alias/) to create a presentation interface that is decoupled from raw values.
+- They usually are usued in multiple locations, linked to a common purpose.
+- They create a stable API for theming and branding.
+
+```css
+/* Mostly colors are aliased through different token Tier */
+
+/* colors */
+--color-primary-500: var(--color-arylide-yellow-500); /* will resolve to primitive #e3c567 */
+--color-secondary-500: var(--color-night-500); /* will resolve to primitive #0b0c0c */
+
+/* but depending on system, it can also be aliased for convenience elsewhere */
+--spacing-multiplier: 1.5; /* Semantic value that applies to a specific theming */
+--spacing-xs: calc(var(--spacing-unit) * var(--spacing-multiplier) * 0.5);
+--spacing-md: calc(var(--spacing-unit) * var(--spacing-multiplier) * 1);
+
+/* border */
+--radius-medium: calc(var(--border-radius-base) * var(--border-radius-scale));
+
+/* etc. */
+```
+
+If you wish to change your primary color, you only need to update `--color-primary-500` to point to another primitive color from the pool of colors.
+
+## How semantic tokens are defined
+
+- **Reference primitives, no raw values**
+- **Answer "what is this thing?"**
+- **Ideal Token Tier for changing themes**
+
+## Next Steps
+
+From here, you can create [**intent tokens**](../3%20-%20intent/README.md) that will map these semantic tokens to specific component needs.

package/src/tokens/2 - semantic/border.json

@@ -0,0 +1,27 @@
+{
+  "border": {
+    "$type": "color",
+    "width": {
+      "default": {
+        "value": "var(--border-width-base)"
+      },
+      "xsmall": {
+        "value": "calc(var(--border-width-base) / 2 * var(--border-width-scale))"
+      },
+      "small": {
+        "value": "calc(var(--border-width-base) * var(--border-width-scale))"
+      },
+      "medium": {
+        "value": "var(--border-width-base)"
+      },
+      "large": {
+        "value": "calc(var(--border-width-base) * 2 * var(--border-width-scale))"
+      }
+    },
+    "style": {
+      "default": {
+        "value": "var(--border-style-solid)"
+      }
+    }
+  }
+}

package/src/tokens/2 - semantic/color.json

@@ -0,0 +1,263 @@
+{
+  "color": {
+    "primary": {
+      "100": {
+        "value": "{color.yellow.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "200": {
+        "value": "{color.yellow.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "300": {
+        "value": "{color.yellow.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "400": {
+        "value": "{color.yellow.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "500": {
+        "value": "{color.yellow.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "600": {
+        "value": "{color.yellow.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "700": {
+        "value": "{color.yellow.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "800": {
+        "value": "{color.yellow.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "900": {
+        "value": "{color.yellow.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "base": {
+        "value": "{color.yellow.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      }
+    },
+
+    "secondary": {
+      "100": {
+        "value": "{color.vanilla-custard.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "200": {
+        "value": "{color.vanilla-custard.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "300": {
+        "value": "{color.vanilla-custard.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "400": {
+        "value": "{color.vanilla-custard.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "500": {
+        "value": "{color.vanilla-custard.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "600": {
+        "value": "{color.vanilla-custard.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "700": {
+        "value": "{color.vanilla-custard.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "800": {
+        "value": "{color.vanilla-custard.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "900": {
+        "value": "{color.vanilla-custard.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "base": {
+        "value": "{color.vanilla-custard.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      }
+    },
+
+    "accent": {
+      "100": {
+        "value": "{color.intense-cherry.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "200": {
+        "value": "{color.intense-cherry.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "300": {
+        "value": "{color.intense-cherry.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "400": {
+        "value": "{color.intense-cherry.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "500": {
+        "value": "{color.intense-cherry.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "600": {
+        "value": "{color.intense-cherry.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "700": {
+        "value": "{color.intense-cherry.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "800": {
+        "value": "{color.intense-cherry.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "900": {
+        "value": "{color.intense-cherry.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "base": {
+        "value": "{color.intense-cherry.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      }
+    },
+
+    "neutral": {
+      "100": {
+        "value": "{color.graphite.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "200": {
+        "value": "{color.graphite.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "300": {
+        "value": "{color.graphite.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "400": {
+        "value": "{color.graphite.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "500": {
+        "value": "{color.graphite.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "600": {
+        "value": "{color.graphite.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "700": {
+        "value": "{color.graphite.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "800": {
+        "value": "{color.graphite.800}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "900": {
+        "value": "{color.graphite.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "base": {
+        "value": "{color.graphite.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      }
+    },
+
+    "info": {
+      "100": {
+        "value": "{color.vanilla-cream.300}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "200": {
+        "value": "{color.vanilla-cream.500}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "300": {
+        "value": "{color.vanilla-cream.700}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "400": {
+        "value": "{color.vanilla-cream.900}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "500": {
+        "value": "{color.vanilla-cream.base}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "600": {
+        "value": "{color.vanilla-cream.100}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "700": {
+        "value": "{color.vanilla-cream.200}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "800": {
+        "value": "{color.vanilla-cream.400}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      },
+      "900": {
+        "value": "{color.vanilla-cream.600}",
+        "type": "color",
+        "attributes": { "tokenTier": "semantic" }
+      }
+    }
+  }
+}

package/src/tokens/2 - semantic/details.md

@@ -0,0 +1 @@
+# 

package/src/tokens/2 - semantic/layout.json

@@ -0,0 +1,52 @@
+{
+  "layout": {
+    // Define when layout should switch between different modes (row/column)
+    "breakAt": {
+      "value": "{breakpoint.md}"
+    },
+    "gutter": {
+      "sm": { "value": "{spacing.sm}" },
+      "md": { "value": "{spacing.md}" },
+      "lg": { "value": "{spacing.lg}" },
+      "xl": { "value": "{spacing.xl}" }
+    },
+    "direction": {
+      "value": "column"
+    },
+    "align": {
+      "start": { "value": "flex-start" },
+      "center": { "value": "center" },
+      "end": { "value": "flex-end" }
+    },
+    "justify": {
+      "start": { "value": "flex-start" },
+      "center": { "value": "center" },
+      "end": { "value": "flex-end" },
+      "between": { "value": "space-between" }
+    },
+    "gap": {
+      "xs": { "value": "{spacing.xs}" },
+      "sm": { "value": "{spacing.sm}" },
+      "md": { "value": "{spacing.md}" },
+      "lg": { "value": "{spacing.lg}" },
+      "xl": { "value": "{spacing.xl}" }
+    },
+    "overlay": {
+      "zIndex": { "value": 1000 },
+      "opacity": { "value": 0 },
+      "blur": { "value": "8px" }
+    },
+    "spaceUnit": {
+      // To decide between using {spacing.unit.default} or {spacing.unit.fluid}
+      "value": "{space.unit.fluid}"
+    },
+    "depth-base": {
+      "value": "6px"
+    },
+    "mobile": {
+      "padding": {
+        "value": "{spacing.md}"
+      }
+    }
+  }
+}

package/src/tokens/2 - semantic/radius.json

@@ -0,0 +1,13 @@
+{
+  "radius": {
+    "light": {
+      "value": "calc(var(--border-radius-base) / var(--border-radius-scale))"
+    },
+    "medium": {
+      "value": "calc(var(--border-radius-base) * var(--border-radius-scale))"
+    },
+    "heavy": {
+      "value": "calc(var(--border-radius-base) * 2 * var(--border-radius-scale))"
+    }
+  }
+}

package/src/tokens/2 - semantic/shadow.json

@@ -0,0 +1,19 @@
+{
+  "shadow": {
+    "xs": {
+      "value": "calc(var(--shadow-base) / 3 * var(--shadow-scale))"
+    },
+    "sm": {
+      "value": "calc(var(--shadow-base) / 2 * var(--shadow-scale))"
+    },
+    "md": {
+      "value": "calc(var(--shadow-base) * var(--shadow-scale))"
+    },
+    "lg": {
+      "value": "calc(var(--shadow-base) * 2 * var(--shadow-scale))"
+    },
+    "xl": {
+      "value": "calc(var(--shadow-base) * 4 * var(--shadow-scale))"
+    }
+  }
+}

package/src/tokens/2 - semantic/spacing.json

@@ -0,0 +1,25 @@
+{
+  "spacing": {
+    "xxs": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-xxs))"
+    },
+    "xs": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-xs))"
+    },
+    "sm": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-sm))"
+    },
+    "md": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-md))"
+    },
+    "lg": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-lg))"
+    },
+    "xl": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-xl))"
+    },
+    "xxl": {
+      "value": "calc(var(--_layout-space-unit) * var(--_space-multiplier-xxl))"
+    }
+  }
+}

package/src/tokens/3 - intent/README.md

@@ -0,0 +1,43 @@
+# 📂 Intent Tokens
+
+Intent tokens translate UI states like "success" or "danger" (designer language) into consistent visual.
+
+They answer the question:
+
+> “Why am I using it?”
+
+This is the **developer-facing API** for stateful components.
+
+```css
+--color-bg-primary: var(--color-primary-500); /* will resolve to semantic var */
+--color-bg-secondary: var(--color-secondary-500); /* will resolve to semantic var */
+/* ... */
+```
+
+## Why to use intent tokens
+
+- Create a stable interface for components that need to convey UI meaning and semantic (see [_About HTML semantics and front-end architecture_](https://nicolasgallagher.com/about-html-semantics-front-end-architecture/)).
+- They do not change with themes (light/dark/brand), only with UX meaning.
+- You don't think in term of color anymore (see [🏠 House-Building Analogy](../../../ANALOGY_HOUSE.md)).
+
+## 💡 The 3 things that actually matter
+
+For 99% of components, you only care about:
+
+### 1. **Background color (`bg`)**
+
+### 2. **Text color (`text`)**
+
+### 3. **Border color (`border`)**
+
+Everything else (shadows, spacing, radii…) is usually standardized in the previous tiers.
+
+## How intent tokens are (or can be) defined
+
+- **Usually reference semantic**
+- **Names reflect UX meaning, not visual result**
+- **Schema: `purpose.priority.property` or `purpose.priority.property.state`**
+
+## Next Steps
+
+(Optional) you can create specific token as related to [CUBE CSS](https://cube.fyi/) based on these intent tokens. See [src/tokens/4 - (OPTIONAL) cube](<../custom/4%20-%20(OPTIONAL)%20cube%20css/README.md>)