unholy-design-tokens 1.0.0

package/src/tokens/custom/4 - (OPTIONAL) cube css/utility.json

@@ -0,0 +1,224 @@
+{
+  "cube": {
+    "utility": {
+      "margin": {
+        "t-0": { "value": "margin-block-start: 0" },
+        "t-xs": { "value": "margin-block-start: var(--spacing-xs)" },
+        "t-sm": { "value": "margin-block-start: var(--spacing-sm)" },
+        "t-md": { "value": "margin-block-end: var(--spacing-md)" },
+        "t-lg": { "value": "margin-block-end: var(--spacing-lg)" },
+        "t-xl": { "value": "margin-block-start: var(--spacing-xl)" },
+        "b-0": { "value": "margin-block-end: 0" },
+        "b-xs": { "value": "margin-block-end: var(--spacing-xs)" },
+        "b-sm": { "value": "margin-block-end: var(--spacing-sm)" },
+        "b-md": { "value": "margin-block-end: var(--spacing-md)" },
+        "b-lg": { "value": "margin-block-end: var(--spacing-lg)" },
+        "b-xl": { "value": "margin-block-end: var(--spacing-xl)" },
+        "auto": { "value": "margin: auto" }
+      },
+      "position": {
+        "relative": { "value": "position: relative" },
+        "absolute": { "value": "position: absolute" },
+        "fixed": { "value": "position: fixed" },
+        "top-0": { "value": "top: 0" },
+        "right-0": { "value": "right: 0" },
+        "bottom-0": { "value": "bottom: 0" },
+        "left-0": { "value": "left: 0" }
+      },
+      "display": {
+        "none": { "value": "display: none" },
+        "block": { "value": "display: block" },
+        "inline-block": { "value": "display: inline-block" },
+        "grid": { "value": "display: grid" },
+        "flex": { "value": "display: flex" },
+        "sticky": { "value": "position: sticky" }
+      },
+      "align": {
+        "start": { "value": "--layout-align: flex-start" },
+        "end": { "value": "--layout-align: flex-end" },
+        "center": { "value": "--layout-align: center" }
+      },
+      "justify": {
+        "start": { "value": "--layout-justify: flex-start" },
+        "end": { "value": "--layout-justify: flex-end" },
+        "center": { "value": "--layout-justify: center" },
+        "between": { "value": "--layout-justify: space-between" }
+      },
+      "flex": {
+        "column": { "value": "--layout-direction: column" },
+        "row": { "value": "--layout-direction: row" },
+        "wrap": { "value": "flex-wrap: wrap" }
+      },
+      "gap": {
+        "xs": { "value": "gap: var(--spacing-xs)" },
+        "sm": { "value": "gap: var(--spacing-sm)" },
+        "md": { "value": "gap: var(--spacing-md)" },
+        "lg": { "value": "gap: var(--spacing-lg)" },
+        "xl": { "value": "gap: var(--spacing-xl)" }
+      },
+      "padding": {
+        "xs": { "value": "padding: var(--spacing-xs)" },
+        "sm": { "value": "padding: var(--spacing-sm)" },
+        "md": { "value": "padding: var(--spacing-md)" },
+        "lg": { "value": "padding: var(--spacing-lg)" },
+        "xl": { "value": "padding: var(--spacing-xl)" },
+        "x-0": { "value": "padding-inline: 0" },
+        "x-xs": { "value": "padding-inline: var(--spacing-xs)" },
+        "x-sm": { "value": "padding-inline: var(--spacing-sm)" },
+        "x-md": { "value": "padding-inline: var(--spacing-md)" },
+        "x-lg": { "value": "padding-inline: var(--spacing-lg)" },
+        "x-xl": { "value": "padding-inline: var(--spacing-xl)" },
+        "y-0": { "value": "padding-block: 0" },
+        "y-xs": { "value": "padding-block: var(--spacing-xs)" },
+        "y-sm": { "value": "padding-block: var(--spacing-sm)" },
+        "y-md": { "value": "padding-block: var(--spacing-md)" },
+        "y-lg": { "value": "padding-block: var(--spacing-lg)" },
+        "y-xl": { "value": "padding-block: var(--spacing-xl)" },
+
+        "auto": { "value": "padding: 0" },
+
+        // Specific sides
+        "top-0": { "value": "padding-top: 0" },
+        "top-xs": { "value": "padding-top: var(--spacing-xs)" },
+        "top-sm": { "value": "padding-top: var(--spacing-sm)" },
+        "top-md": { "value": "padding-top: var(--spacing-md)" },
+        "top-lg": { "value": "padding-top: var(--spacing-lg)" },
+        "top-xl": { "value": "padding-top: var(--spacing-xl)" },
+
+        "bottom-0": { "value": "padding-bottom: 0" }
+      },
+
+      "text": {
+        "center": { "value": "text-align: center" },
+        "dim": { "value": "opacity: 0.7" }
+      },
+      "border": {
+        "solid": { "value": "border-style: solid" },
+        "dashed": { "value": "border-style: dashed" },
+        "dotted": { "value": "border-style: dotted" },
+        "none": { "value": "border-style: none" },
+        "primary": {
+          "value": "border-color: var(--color-border-primary)"
+        },
+        "secondary": {
+          "value": "border-color: var(--color-border-secondary)"
+        },
+        "accent": {
+          "value": "border-color: var(--color-border-accent)"
+        },
+        "neutral": {
+          "value": "border-color: var(--color-border-neutral)"
+        },
+        "info": {
+          "value": "border-color: var(--color-border-info)"
+        },
+        "success": {
+          "value": "border-color: var(--color-border-success)"
+        },
+        "top": {
+          "value": "border-top-width: var(--border-width-default)"
+        },
+        "bottom": {
+          "value": "border-bottom-width: var(--border-width-default)"
+        },
+        "left": {
+          "value": "border-left-width: var(--border-width-default)"
+        },
+        "right": {
+          "value": "border-right-width: var(--border-width-default)"
+        },
+        "all": {
+          "value": "border-width: var(--border-width-default)"
+        },
+        "theme": {
+          "light": {
+            "value": "border: var(--border-width-small) solid var(--theme-color)"
+          },
+          "medium": {
+            "value": "border: var(--border-width-medium) solid var(--theme-color)"
+          },
+          "large": {
+            "value": "border: var(--border-width-large) solid var(--theme-color)"
+          },
+          "10": {
+            "value": "border: var(--border-width-10) solid var(--theme-color)"
+          },
+          "25": {
+            "value": "border: var(--border-width-25) solid var(--theme-color)"
+          },
+          "50": {
+            "value": "border: var(--border-width-50) solid var(--theme-color)"
+          },
+          "75": {
+            "value": "border: var(--border-width-75) solid var(--theme-color)"
+          },
+          "100": {
+            "value": "border: var(--border-width-100) solid var(--theme-color)"
+          }
+        },
+        "width": {
+          "xsmall": {
+            "value": "border-width: var(--border-width-xsmall)"
+          },
+          "small": {
+            "value": "border-width: var(--border-width-small)"
+          },
+          "medium": {
+            "value": "border-width: var(--border-width-medium)"
+          },
+          "large": {
+            "value": "border-width: var(--border-width-large)"
+          }
+        }
+      },
+      "radius": {
+        "light": { "value": "border-radius: var(--radius-light)" },
+        "medium": { "value": "border-radius: var(--radius-medium)" },
+        "heavy": { "value": "border-radius: var(--radius-heavy)" }
+      },
+      "height": {
+        "auto": { "value": "height: auto" },
+        "full": { "value": "height: 100%" },
+        "half": { "value": "height: 50%" },
+        "quarter": { "value": "height: 25%" },
+        "screen": { "value": "height: 100svh" }
+      },
+      "width": {
+        "auto": { "value": "width: auto" },
+        "full": { "value": "width: 100%" },
+        "half": { "value": "width: 50%" },
+        "quarter": { "value": "width: 25%" },
+        "screen": { "value": "width: 100svw" }
+      },
+      "overflow": {
+        "auto": { "value": "overflow: auto" },
+        "hidden": { "value": "overflow: hidden" },
+        "scroll": { "value": "overflow: scroll" },
+        "visible": { "value": "overflow: visible" },
+        "x-hidden": { "value": "overflow-x: hidden" },
+        "y-hidden": { "value": "overflow-y: hidden" }
+      },
+      "bg": {
+        "primary": { "value": "background-color: var(--color-bg-primary)" },
+        "secondary": { "value": "background-color: var(--color-bg-secondary)" },
+        "accent": { "value": "background-color: var(--color-bg-accent)" },
+        "accent-subtle": { "value": "background-color: var(--color-bg-accent-subtle)" },
+        "neutral": { "value": "background-color: var(--color-bg-neutral)" },
+        "page": { "value": "background-color: var(--color-bg-page)" },
+        "subtle": { "value": "background-color: var(--color-bg-subtle)" },
+        "elevated": { "value": "background-color: var(--color-bg-elevated)" },
+        "inset": { "value": "background-color: var(--color-bg-inset)" },
+        "info": { "value": "background-color: var(--color-bg-info)" },
+        "success": { "value": "background-color: var(--color-bg-success)" }
+      }
+      // "keyframes": {
+      //   "checked-in": {
+      //     "value": "@keyframes checked-in \\{ from \\{ transform: scale(0); \\} to \\{ transform: scale(1); \\} \\}"
+      //   },
+      //   "checked-out": {
+      //     "value": "@keyframes checked-out \\{ from \\{ transform: scale(1);  \\} to \\{ transform: scale(0); \\} \\}"
+      //   }
+      // }
+    }
+  }
+}

package/src/tokens/custom/OKlch/color.json

@@ -0,0 +1,61 @@
+{
+  "color": {
+    "primary": {
+      "bg": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "attribute": {
+        "type": "lolol"
+      }
+    },
+    "secondary": {
+      "bg": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      }
+    },
+    "danger": {
+      "bg": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "hue": { "value": "0deg" },
+        "lightness": { "value": "0%" },
+        "opacity": { "value": 1 }
+      }
+    },
+    "attributes": {
+      "type": "variants"
+    }
+  }
+}

package/src/tokens/custom/OKlch/state.json

@@ -0,0 +1,107 @@
+{
+  "state": {
+    "base": {
+      "bg": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "hover": {
+      "bg": {
+        "lightness": { "value": 0.05 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "active": {
+      "bg": {
+        "lightness": { "value": 0.1 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "focus": {
+      "bg": {
+        "lightness": { "value": 0.05 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "disabled": {
+      "bg": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "attributes": {
+      "type": "variants"
+    }
+  }
+}

package/src/tokens/custom/OKlch/theme-color.json

@@ -0,0 +1,34 @@
+{
+  "color": {
+    "bg": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "h": { "value": "var(--theme-color-bg-hue)" },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "l": { "value": "var(--theme-color-bg-lightness)" },
+      "opacity": { "value": "var(--color-primary-opacity)" },
+      "o": { "value": "var(--theme-color-bg-opacity)" }
+    },
+    "border": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "opacity": { "value": "var(--color-primary-opacity)" }
+    },
+    "text": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "opacity": { "value": "var(--color-primary-opacity)" }
+    }
+  }
+}

package/src/tokens/custom/OKlch/variant.json

@@ -0,0 +1,67 @@
+{
+  "variant": {
+    "contained": {
+      "bg": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "outlined": {
+      "bg": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 0 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "text": {
+      "bg": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 0 }
+      },
+      "border": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 0 }
+      },
+      "text": {
+        "lightness": { "value": 0 },
+        "chroma": { "value": 0 },
+        "hue": { "value": 0 },
+        "opacity": { "value": 1 }
+      }
+    },
+    "attributes": {
+      "type": "variants"
+    }
+  }
+}

package/src/tokens/custom/components/highlighted.json

@@ -0,0 +1,16 @@
+{
+  "highlighted-text": {
+    "gap": {
+      "min": { "value": "var(--_spacing-xxs)" },
+      "max": { "value": "var(--_spacing-lg)" },
+      "scaler": { "value": "1.4svw" },
+      "left": {
+        "value": "clamp(var(--_highlighted-text-gap-min), var(--_highlighted-text-gap-scaler), var(--_highlighted-text-gap-max))"
+      }
+    }
+  },
+  "attributes": {
+    "category": "component",
+    "tokenTier": "component"
+  }
+}

package/src/tokens/state.js

@@ -0,0 +1,29 @@
+export default {
+  state: {
+    base: {
+      bg: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      border: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      text: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+    },
+    hover: {
+      bg: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      border: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      text: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+    },
+    active: {
+      bg: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      border: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      text: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+    },
+    focus: {
+      bg: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      border: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      text: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+    },
+    disabled: {
+      bg: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      border: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+      text: { hue: 0, saturation: 0, lightness: 0, opacity: 1 },
+    },
+  },
+}

package/src/tokens/theme-color.json

@@ -0,0 +1,34 @@
+{
+  "color": {
+    "bg": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "h": { "value": "var(--theme-color-bg-hue)" },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "l": { "value": "var(--theme-color-bg-lightness)" },
+      "opacity": { "value": "var(--color-primary-opacity)" },
+      "o": { "value": "var(--theme-color-bg-opacity)" }
+    },
+    "border": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "opacity": { "value": "var(--color-primary-opacity)" }
+    },
+    "text": {
+      "hue": {
+        "value": "var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0)"
+      },
+      "lightness": {
+        "value": "var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0)"
+      },
+      "opacity": { "value": "var(--color-primary-opacity)" }
+    }
+  }
+}

package/src/type-declarations/type-declarations.config.ts

@@ -0,0 +1,34 @@
+import StyleDictionary from 'style-dictionary'
+import {
+  tokensDeclarationFormatter,
+  typesDeclarationFormatter,
+} from './type-declarations.formatter'
+
+StyleDictionary.registerFormat(typesDeclarationFormatter)
+StyleDictionary.registerFormat(tokensDeclarationFormatter)
+
+export default {
+  ts: {
+    // transformGroup: "js",
+    // transformGroup: "js",
+    buildPath: 'types/',
+    files: [
+      {
+        destination: 'theme.d.ts',
+        format: 'typescript/types-declaration',
+        transformGroup: 'js',
+      },
+    ],
+  },
+  // Tokens declarations
+  tokens: {
+    transformGroup: 'css',
+    buildPath: 'types/',
+    files: [
+      {
+        destination: 'tokens.ts',
+        format: 'typescript/tokens-declaration',
+      },
+    ],
+  },
+}