npm - unholy-design-tokens - Versions diffs - 1.0.0 - Mend

unholy-design-tokens 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/.github/workflows/lint-format-build.yml +35 -0
package/.github/workflows/publish_release.yml +18 -0
package/.prettierrc +9 -0
package/ANALOGY_HOUSE.md +139 -0
package/ANALOGY_I18NEXT.md +160 -0
package/LICENSE +201 -0
package/README.md +90 -0
package/WHY_THIS_EXISTS.md +74 -0
package/bin/build-tokens.ts +34 -0
package/build/css/bg/bg.css +60 -0
package/build/css/border/border.css +51 -0
package/build/css/colors.css +204 -0
package/build/css/conditional.css +8 -0
package/build/css/cube/cube.block.css +18 -0
package/build/css/cube/cube.composition.css +16 -0
package/build/css/cube/cube.utility.css +185 -0
package/build/css/font/font.css +24 -0
package/build/css/space.css +20 -0
package/build/css/text/text.css +48 -0
package/build/css/themes/private-theme.css +228 -0
package/build/css/themes/public-theme.css +228 -0
package/build/css/variant/variant.css +42 -0
package/build/css/variants.css +167 -0
package/build/types/theme.d.ts +932 -0
package/build/types/tokens.ts +653 -0
package/dist/bin/build-tokens.js +27 -0
package/dist/scripts/build-style-dictionary.js +32 -0
package/dist/scripts/generate-typography-tokens.js +125 -0
package/dist/src/colors/color.config.js +45 -0
package/dist/src/colors/color.filter.js +19 -0
package/dist/src/colors/color.formatter.js +25 -0
package/dist/src/colors/index.js +2 -0
package/dist/src/cube-css/cube.config.js +42 -0
package/dist/src/cube-css/cube.formatter.js +89 -0
package/dist/src/style-dictionary.config.js +143 -0
package/dist/src/type-declarations/type-declarations.config.js +29 -0
package/dist/src/type-declarations/type-declarations.formatter.js +111 -0
package/dist/src/utils/helpers.js +9 -0
package/dist/src/utils/index.js +4 -0
package/dist/src/utils/template.js +83 -0
package/dist/src/utils/tokens.js +80 -0
package/dist/src/utils/utopia.js +19 -0
package/eslint.config.js +67 -0
package/package.json +60 -0
package/scripts/build-style-dictionary.ts +44 -0
package/scripts/generate-typography-tokens.ts +138 -0
package/src/LICENSE +201 -0
package/src/README.md +88 -0
package/src/colors/color.config.ts +48 -0
package/src/colors/color.filter.ts +28 -0
package/src/colors/color.formatter.ts +43 -0
package/src/colors/index.ts +6 -0
package/src/cube-css/cube.config.ts +50 -0
package/src/cube-css/cube.formatter.ts +104 -0
package/src/formatters/spacing.js +95 -0
package/src/style-dictionary.config.ts +151 -0
package/src/theme/README.md +256 -0
package/src/theme/cube-theme-addon.js +44 -0
package/src/theme/helper.js +38 -0
package/src/theme/index.js +6 -0
package/src/theme/theme.config.js +42 -0
package/src/theme/theme.filter.js +42 -0
package/src/theme/theme.formatter.js +71 -0
package/src/tokens/1 - primitives/README.md +58 -0
package/src/tokens/1 - primitives/border.json +54 -0
package/src/tokens/1 - primitives/breakpoint.json +10 -0
package/src/tokens/1 - primitives/color-pool.json +266 -0
package/src/tokens/1 - primitives/color.json +266 -0
package/src/tokens/1 - primitives/font-scale.json +27 -0
package/src/tokens/1 - primitives/font.json +23 -0
package/src/tokens/1 - primitives/shadow.json +26 -0
package/src/tokens/1 - primitives/space.json +27 -0
package/src/tokens/2 - semantic/README.md +49 -0
package/src/tokens/2 - semantic/border.json +27 -0
package/src/tokens/2 - semantic/color.json +263 -0
package/src/tokens/2 - semantic/details.md +1 -0
package/src/tokens/2 - semantic/layout.json +52 -0
package/src/tokens/2 - semantic/radius.json +13 -0
package/src/tokens/2 - semantic/shadow.json +19 -0
package/src/tokens/2 - semantic/spacing.json +25 -0
package/src/tokens/3 - intent/README.md +43 -0
package/src/tokens/3 - intent/background.json +135 -0
package/src/tokens/3 - intent/color.json +265 -0
package/src/tokens/3 - intent/font.json +61 -0
package/src/tokens/3 - intent/text +67 -0
package/src/tokens/README.md +176 -0
package/src/tokens/color/brand.json +316 -0
package/src/tokens/component/theming.json +69 -0
package/src/tokens/conditional.json +40 -0
package/src/tokens/custom/4 - (OPTIONAL) cube css/README.md +38 -0
package/src/tokens/custom/4 - (OPTIONAL) cube css/block.json +24 -0
package/src/tokens/custom/4 - (OPTIONAL) cube css/composition.json +26 -0
package/src/tokens/custom/4 - (OPTIONAL) cube css/global.json +15 -0
package/src/tokens/custom/4 - (OPTIONAL) cube css/utility.json +224 -0
package/src/tokens/custom/OKlch/color.json +61 -0
package/src/tokens/custom/OKlch/state.json +107 -0
package/src/tokens/custom/OKlch/theme-color.json +34 -0
package/src/tokens/custom/OKlch/variant.json +67 -0
package/src/tokens/custom/components/highlighted.json +16 -0
package/src/tokens/state.js +29 -0
package/src/tokens/theme-color.json +34 -0
package/src/type-declarations/type-declarations.config.ts +34 -0
package/src/type-declarations/type-declarations.formatter.ts +122 -0
package/src/utils/helpers.ts +11 -0
package/src/utils/index.ts +4 -0
package/src/utils/template.ts +110 -0
package/src/utils/tokens.ts +95 -0
package/src/utils/utopia.ts +36 -0
package/tailwind.md +720 -0
package/tsconfig.json +19 -0
package/turbowatch.ts +14 -0

package/src/tokens/color/brand.json ADDED Viewed

@@ -0,0 +1,316 @@
+{
+  "color": {
+    "bg": {
+      "primary": {
+        "lightness": {
+          "value": "var(--color-primary-lightness, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-primary-chroma, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-primary-hue, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-primary-opacity, 1)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-bg-primary-lightness) var(--color-bg-primary-chroma) var(--color-bg-primary-hue) / var(--color-bg-primary-opacity))",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "lightness": {
+          "value": "var(--color-secondary-lightness, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-secondary-chroma, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-secondary-hue, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-secondary-opacity, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-bg-secondary-lightness) var(--color-bg-secondary-chroma) var(--color-bg-secondary-hue) / var(--color-bg-secondary-opacity))",
+          "type": "color"
+        }
+      },
+      "danger": {
+        "lightness": {
+          "value": "var(--color-danger-lightness, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-danger-chroma, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-danger-hue, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-danger-opacity, 1)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-bg-danger-lightness) var(--color-bg-danger-chroma) var(--color-bg-danger-hue) / var(--color-bg-danger-opacity))",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "lightness": {
+          "value": "var(--color-primary-lightness, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-primary-chroma, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-primary-hue, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-primary-opacity, 1)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-border-primary-lightness) var(--color-border-primary-chroma) var(--color-border-primary-hue) / var(--color-border-primary-opacity))",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "lightness": {
+          "value": "var(--color-secondary-lightness, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-secondary-chroma, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-secondary-hue, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-secondary-opacity, 1)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-border-secondary-lightness) var(--color-border-secondary-chroma) var(--color-border-secondary-hue) / var(--color-border-secondary-opacity))",
+          "type": "color"
+        }
+      },
+      "danger": {
+        "lightness": {
+          "value": "var(--color-danger-lightness, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-danger-chroma, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-danger-hue, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-danger-opacity, 1)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-border-danger-lightness) var(--color-border-danger-chroma) var(--color-border-danger-hue) / var(--color-border-danger-opacity))",
+          "type": "color"
+        }
+      }
+    },
+    "text": {
+      "primary": {
+        "lightness": {
+          "value": "var(--color-primary-lightness, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-primary-chroma, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-primary-hue, 0)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-primary-opacity, 1)",
+          "attribute": {
+            "type": "primary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-text-primary-lightness) var(--color-text-primary-chroma) var(--color-text-primary-hue) / var(--color-text-primary-opacity))",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "lightness": {
+          "value": "var(--color-secondary-lightness, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-secondary-chroma, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-secondary-hue, 0)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-secondary-opacity, 1)",
+          "attribute": {
+            "type": "secondary-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-text-secondary-lightness) var(--color-text-secondary-chroma) var(--color-text-secondary-hue) / var(--color-text-secondary-opacity))",
+          "type": "color"
+        }
+      },
+      "danger": {
+        "lightness": {
+          "value": "var(--color-danger-lightness, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "lightness"
+          }
+        },
+        "chroma": {
+          "value": "var(--color-danger-chroma, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "chroma"
+          }
+        },
+        "hue": {
+          "value": "var(--color-danger-hue, 0)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "hue"
+          }
+        },
+        "opacity": {
+          "value": "var(--color-danger-opacity, 1)",
+          "attribute": {
+            "type": "danger-oklch",
+            "item": "opacity"
+          }
+        },
+        "_": {
+          "value": "oklch(var(--color-text-danger-lightness) var(--color-text-danger-chroma) var(--color-text-danger-hue) / var(--color-text-danger-opacity))",
+          "type": "color"
+        }
+      }
+    }
+  }
+}

package/src/tokens/component/theming.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "component": {
+    "bg": {
+      "lightness": {
+        "value": "calc(var(--color-bg-lightness) + var(--variant-bg-lightness) + var(--state-bg-lightness))"
+      },
+      "chroma": {
+        "value": "calc(var(--color-bg-chroma) + var(--variant-bg-chroma) + var(--state-bg-chroma))"
+      },
+      "hue": {
+        "value": "calc(var(--color-bg-hue))"
+      },
+      "opacity": {
+        "value": "calc(var(--color-bg-opacity) + var(--variant-bg-opacity) + var(--state-bg-opacity))"
+      }
+    },
+    "border": {
+      "lightness": {
+        "value": "calc(var(--color-border-lightness) + var(--variant-border-lightness) + var(--state-border-lightness))"
+      },
+      "chroma": {
+        "value": "calc(var(--color-border-chroma) + var(--variant-border-chroma) + var(--state-border-chroma))"
+      },
+      "hue": {
+        "value": "calc(var(--color-border-hue))"
+      },
+      "opacity": {
+        "value": "calc(var(--color-border-opacity) + var(--variant-border-opacity) + var(--state-border-opacity))"
+      }
+    },
+    "text": {
+      "lightness": {
+        "value": "calc(var(--color-text-lightness) + var(--variant-text-lightness) + var(--state-text-lightness))"
+      },
+      "chroma": {
+        "value": "calc(var(--color-text-chroma) + var(--variant-text-chroma) + var(--state-text-chroma))"
+      },
+      "hue": {
+        "value": "calc(var(--color-text-hue))"
+      },
+      "opacity": {
+        "value": "calc(var(--color-text-opacity) + var(--variant-text-opacity) + var(--state-text-opacity))"
+      }
+    },
+    "opacity": {
+      "bg": {
+        "value": "var(--component-bg-opacity)",
+        "type": "opacity",
+        "attribute": {
+          "type": "base-component"
+        }
+      },
+      "border": {
+        "value": "var(--component-border-opacity)",
+        "type": "opacity",
+        "attribute": {
+          "type": "base-component"
+        }
+      },
+      "text": {
+        "value": "var(--component-text-opacity)",
+        "type": "opacity",
+        "attribute": {
+          "type": "base-component"
+        }
+      }
+    }
+  }
+}

package/src/tokens/conditional.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "conditional": {
+    "not-primary": {
+      "value": "calc(var(--secondary) + var(--danger))",
+      "attribute": {
+        "type": "conditional"
+      }
+    },
+    "not-secondary": {
+      "value": "calc(var(--primary) + var(--danger))",
+      "attribute": {
+        "type": "conditional"
+      }
+    },
+    "not-danger": {
+      "value": "calc(var(--primary) + var(--secondary))",
+      "attribute": {
+        "type": "conditional"
+      }
+    },
+    "light": {
+      "value": 80,
+      "attribute": {
+        "type": "conditional"
+      }
+    },
+    "threshold": {
+      "value": 10,
+      "attribute": {
+        "type": "conditional"
+      }
+    },
+    "switch": {
+      "value": "calc((var(--light) - var(--threshold)) * 100%)",
+      "attribute": {
+        "type": "conditional"
+      }
+    }
+  }
+}

package/src/tokens/custom/4 - (OPTIONAL) cube css/README.md ADDED Viewed

@@ -0,0 +1,38 @@
+# Cube CSS Layer (Optional)
+This folder contains Cube CSS–style abstractions built _on top of_ design tokens.
+Cube CSS is not a token layer.
+It is a **mapping layer** that consumes tokens to produce:
+- Blocks (components)
+- Composition patterns (layout primitives)
+- Utility rules (atomic shortcuts)
+The goal is to make high-level UI glue fully token-driven and consistent.
+---
+## Layer Position
+Cube lives _after_ design tokens:
+```text
+Design Tokens → Cube CSS → Components
+```
+## Naming Schema
+Cube CSS tokens follow this pattern:
+- **Blocks**
+```text
+--<component>-<property>-<state?>
+```
+- **Composition**
+```text
+--<high-level-recipe/component>-<property>-<state?>
+```

package/src/tokens/custom/4 - (OPTIONAL) cube css/block.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "cube": {
+    "block": {
+      "card": {
+        "bg": { "value": "var(--_color-bg-neutral)" },
+        "border": { "value": "var(--_color-border-subtle)" },
+        "radius": { "value": "var(--_border-radius-medium)" },
+        "padding": { "value": "var(--_spacing-md)" }
+      },
+      "button": {
+        "paddingX": { "value": "var(--_spacing-sm)" },
+        "paddingY": { "value": "var(--_spacing-xs)" },
+        "radius": { "value": "var(--_border-radius-medium)" },
+        "text": { "value": "var(--_color-text-primary)" },
+        "bg": { "value": "var(--_color-bg-primary)" },
+        "bg-hover": { "value": "var(--_color-bg-primary-hover)" }
+      },
+      "checkbox": {
+        "bg": { "value": "var(--_color-bg-primary)" },
+        "padding": { "value": "var(--_spacing-xs)" }
+      }
+    }
+  }
+}

package/src/tokens/custom/4 - (OPTIONAL) cube css/composition.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "cube": {
+    "composition": {
+      "flow": {
+        "space": { "value": "var(--gutter)" }
+      },
+      "stack": {
+        "gap": { "value": "var(--gutter)" },
+        "align": { "value": "start" },
+        "direction": { "value": "var(--layout-direction)" }
+      },
+      "cluster": {
+        "gap": { "value": "var(--gutter)" },
+        "align": { "value": "center" }
+      },
+      "center": {
+        "maxWidth": { "value": "72ch" },
+        "paddingInline": { "value": "var(--gutter)" }
+      },
+      "switcher": {
+        "modifier": { "value": "var(--layout-break-at)" },
+        "gap": { "value": "var(--gutter)" }
+      }
+    }
+  }
+}

package/src/tokens/custom/4 - (OPTIONAL) cube css/global.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "cube": {
+    "global": {
+      "gutter": {
+        "value": "var(--layout-gutter-sm)"
+      },
+      "on": {
+        "value": "initial"
+      },
+      "off": {
+        "value": ""
+      }
+    }
+  }
+}