@hug/hospitality 0.0.3-alpha → 0.0.4-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hug/hospitality",
-    "version": "0.0.3-alpha",
+    "version": "0.0.4-alpha.1",
     "description": "Hospitality Design System",
     "homepage": "https://github.com/dsi-hug/hospitality",
     "license": "GPL-3.0-only",
@@ -20,9 +20,8 @@
         "./tokens": {
             "require": "./src/tokens/index.mjs",
             "types": "./src/tokens/index.d.ts",
-            "default": "./src/tokens/index.mjs"
+            "default": "./src/tokens/tokens.css"
         },
-        "./tokens/tokens.css": "./src/tokens/tokens.css",
         "./package.json": "./package.json"
     },
     "files": [
@@ -81,4 +80,4 @@
         "yarn": "Please use Npm instead of Yarn."
     },
     "packageManager": "npm@11.2.0"
-}
+}

package/src/tokens/colors.css

@@ -0,0 +1,431 @@
+:root {
+    --hy-ref-color-primary-100: #ffffffff;
+    --hy-ref-color-primary-99: #fcfcffff;
+    --hy-ref-color-primary-98: #f7f9ffff;
+    --hy-ref-color-primary-95: #e8f1ffff;
+    --hy-ref-color-primary-90: #cfe5ffff;
+    --hy-ref-color-primary-80: #99cbffff;
+    --hy-ref-color-primary-70: #6bb0f2ff;
+    --hy-ref-color-primary-60: #4e96d5ff;
+    --hy-ref-color-primary-50: #2e7cbaff;
+    --hy-ref-color-primary-40: #00629eff;
+    --hy-ref-color-primary-35: #00568bff;
+    --hy-ref-color-primary-30: #004a78ff;
+    --hy-ref-color-primary-25: #003e66ff;
+    --hy-ref-color-primary-20: #003355ff;
+    --hy-ref-color-primary-15: #002844ff;
+    --hy-ref-color-primary-10: #001d34ff;
+    --hy-ref-color-primary-5: #001223ff;
+    --hy-ref-color-primary-0: #000000ff;
+    --hy-ref-color-secondary-100: #ffffffff;
+    --hy-ref-color-secondary-99: #fcfcffff;
+    --hy-ref-color-secondary-98: #f7f9ffff;
+    --hy-ref-color-secondary-95: #e8f1ffff;
+    --hy-ref-color-secondary-90: #d6e4f6ff;
+    --hy-ref-color-secondary-80: #bac8daff;
+    --hy-ref-color-secondary-70: #9facbeff;
+    --hy-ref-color-secondary-60: #8492a3ff;
+    --hy-ref-color-secondary-50: #6b7888ff;
+    --hy-ref-color-secondary-40: #52606fff;
+    --hy-ref-color-secondary-35: #465463ff;
+    --hy-ref-color-secondary-30: #3b4857ff;
+    --hy-ref-color-secondary-25: #303d4bff;
+    --hy-ref-color-secondary-20: #24323fff;
+    --hy-ref-color-secondary-15: #1a2734ff;
+    --hy-ref-color-secondary-10: #0f1d2aff;
+    --hy-ref-color-secondary-5: #05121fff;
+    --hy-ref-color-secondary-0: #000000ff;
+    --hy-ref-color-tertiary-100: #ffffffff;
+    --hy-ref-color-tertiary-99: #f2fffbff;
+    --hy-ref-color-tertiary-98: #e4fff9ff;
+    --hy-ref-color-tertiary-95: #b3fff3ff;
+    --hy-ref-color-tertiary-90: #7df6e6ff;
+    --hy-ref-color-tertiary-80: #5edacaff;
+    --hy-ref-color-tertiary-70: #3cbeafff;
+    --hy-ref-color-tertiary-60: #02a294ff;
+    --hy-ref-color-tertiary-50: #00867aff;
+    --hy-ref-color-tertiary-40: #006a61ff;
+    --hy-ref-color-tertiary-35: #005d55ff;
+    --hy-ref-color-tertiary-30: #005049ff;
+    --hy-ref-color-tertiary-25: #00443dff;
+    --hy-ref-color-tertiary-20: #003732ff;
+    --hy-ref-color-tertiary-15: #002b27ff;
+    --hy-ref-color-tertiary-10: #00201cff;
+    --hy-ref-color-tertiary-5: #001412ff;
+    --hy-ref-color-tertiary-0: #000000ff;
+    --hy-ref-color-error-100: #ffffffff;
+    --hy-ref-color-error-99: #fffbffff;
+    --hy-ref-color-error-98: #fff8f7ff;
+    --hy-ref-color-error-95: #ffedeaff;
+    --hy-ref-color-error-90: #ffdad6ff;
+    --hy-ref-color-error-80: #ffb4abff;
+    --hy-ref-color-error-70: #ff897dff;
+    --hy-ref-color-error-60: #ff5449ff;
+    --hy-ref-color-error-50: #de3730ff;
+    --hy-ref-color-error-40: #ba1a1aff;
+    --hy-ref-color-error-35: #a80710ff;
+    --hy-ref-color-error-30: #93000aff;
+    --hy-ref-color-error-25: #7e0007ff;
+    --hy-ref-color-error-20: #690005ff;
+    --hy-ref-color-error-15: #540003ff;
+    --hy-ref-color-error-10: #410002ff;
+    --hy-ref-color-error-5: #2d0001ff;
+    --hy-ref-color-error-0: #000000ff;
+    --hy-ref-color-neutral-100: #ffffffff;
+    --hy-ref-color-neutral-99: #fcfcffff;
+    --hy-ref-color-neutral-98: #f9f9fcff;
+    --hy-ref-color-neutral-95: #f1f0f4ff;
+    --hy-ref-color-neutral-90: #e2e2e5ff;
+    --hy-ref-color-neutral-80: #c6c6c9ff;
+    --hy-ref-color-neutral-70: #ababaeff;
+    --hy-ref-color-neutral-60: #909094ff;
+    --hy-ref-color-neutral-50: #76777aff;
+    --hy-ref-color-neutral-40: #5d5e61ff;
+    --hy-ref-color-neutral-35: #515255ff;
+    --hy-ref-color-neutral-30: #45474aff;
+    --hy-ref-color-neutral-25: #3a3b3eff;
+    --hy-ref-color-neutral-20: #2f3033ff;
+    --hy-ref-color-neutral-15: #242628ff;
+    --hy-ref-color-neutral-10: #1a1c1eff;
+    --hy-ref-color-neutral-5: #0f1113ff;
+    --hy-ref-color-neutral-0: #000000ff;
+    --hy-ref-color-neutral-variant-100: #ffffffff;
+    --hy-ref-color-neutral-variant-99: #fcfcffff;
+    --hy-ref-color-neutral-variant-98: #f7f9ffff;
+    --hy-ref-color-neutral-variant-95: #edf1f9ff;
+    --hy-ref-color-neutral-variant-90: #dfe3ebff;
+    --hy-ref-color-neutral-variant-80: #c2c7ceff;
+    --hy-ref-color-neutral-variant-70: #a7abb3ff;
+    --hy-ref-color-neutral-variant-60: #8c9198ff;
+    --hy-ref-color-neutral-variant-50: #73777eff;
+    --hy-ref-color-neutral-variant-40: #5a5f65ff;
+    --hy-ref-color-neutral-variant-35: #4e5359ff;
+    --hy-ref-color-neutral-variant-30: #42474eff;
+    --hy-ref-color-neutral-variant-25: #373c42ff;
+    --hy-ref-color-neutral-variant-20: #2c3137ff;
+    --hy-ref-color-neutral-variant-15: #21262cff;
+    --hy-ref-color-neutral-variant-10: #171c22ff;
+    --hy-ref-color-neutral-variant-5: #0c1117ff;
+    --hy-ref-color-neutral-variant-0: #000000ff;
+    --hy-ref-color-warning-100: #ffffffff;
+    --hy-ref-color-warning-99: #fffbffff;
+    --hy-ref-color-warning-98: #fff8f4ff;
+    --hy-ref-color-warning-95: #fff0eaff;
+    --hy-ref-color-warning-90: #ffe3d7ff;
+    --hy-ref-color-warning-80: #ffc8b1ff;
+    --hy-ref-color-warning-70: #ffaa85ff;
+    --hy-ref-color-warning-60: #ff8a55ff;
+    --hy-ref-color-warning-50: #ff6925ff;
+    --hy-ref-color-warning-40: #ca4700ff;
+    --hy-ref-color-warning-35: #7a4600ff;
+    --hy-ref-color-warning-30: #772f00ff;
+    --hy-ref-color-warning-25: #593200ff;
+    --hy-ref-color-warning-20: #4b2200ff;
+    --hy-ref-color-warning-15: #3b1f00ff;
+    --hy-ref-color-warning-10: #2c1600ff;
+    --hy-ref-color-warning-5: #1d0d00ff;
+    --hy-ref-color-warning-0: #000000ff;
+    --hy-ref-color-blue-100: #ffffffff;
+    --hy-ref-color-blue-99: #fffbffff;
+    --hy-ref-color-blue-98: #fbf8ffff;
+    --hy-ref-color-blue-95: #f1efffff;
+    --hy-ref-color-blue-90: #e0e0ffff;
+    --hy-ref-color-blue-80: #bec2ffff;
+    --hy-ref-color-blue-70: #9da3ffff;
+    --hy-ref-color-blue-60: #7c84ffff;
+    --hy-ref-color-blue-50: #5a64ffff;
+    --hy-ref-color-blue-40: #343dffff;
+    --hy-ref-color-blue-35: #1a21ffff;
+    --hy-ref-color-blue-30: #0000efff;
+    --hy-ref-color-blue-25: #0001cdff;
+    --hy-ref-color-blue-20: #0001acff;
+    --hy-ref-color-blue-15: #00018dff;
+    --hy-ref-color-blue-10: #00006eff;
+    --hy-ref-color-blue-5: #000037ff;
+    --hy-ref-color-blue-0: #000000ff;
+    --hy-ref-color-red-100: #ffffffff;
+    --hy-ref-color-red-99: #fffbfbff;
+    --hy-ref-color-red-98: #fffbfbff;
+    --hy-ref-color-red-95: #fff1f1ff;
+    --hy-ref-color-red-90: #ffe0e0ff;
+    --hy-ref-color-red-80: #ffbebeff;
+    --hy-ref-color-red-70: #ff9d9dff;
+    --hy-ref-color-red-60: #ff7c7cff;
+    --hy-ref-color-red-50: #ff5a5aff;
+    --hy-ref-color-red-40: #ff3434ff;
+    --hy-ref-color-red-35: #ff1a1aff;
+    --hy-ref-color-red-30: #ef0000ff;
+    --hy-ref-color-red-25: #cd0000ff;
+    --hy-ref-color-red-20: #ac0000ff;
+    --hy-ref-color-red-10: #6e0000ff;
+    --hy-ref-color-red-0: #000000ff;
+    --hy-ref-color-green-100: #ffffffff;
+    --hy-ref-color-green-99: #fbfffbff;
+    --hy-ref-color-green-98: #fbfffbff;
+    --hy-ref-color-green-95: #f1fff1ff;
+    --hy-ref-color-green-90: #e0ffe0ff;
+    --hy-ref-color-green-80: #beffbeff;
+    --hy-ref-color-green-70: #9dff9dff;
+    --hy-ref-color-green-60: #7cff7cff;
+    --hy-ref-color-green-50: #5aff5aff;
+    --hy-ref-color-green-40: #34ff34ff;
+    --hy-ref-color-green-35: #1aff1aff;
+    --hy-ref-color-green-30: #00ef00ff;
+    --hy-ref-color-green-25: #00cd00ff;
+    --hy-ref-color-green-20: #00ac00ff;
+    --hy-ref-color-green-10: #006e00ff;
+    --hy-ref-color-green-0: #000000ff;
+    --hy-ref-color-yellow-100: #ffffffff;
+    --hy-ref-color-yellow-99: #fffffbff;
+    --hy-ref-color-yellow-98: #fffffbff;
+    --hy-ref-color-yellow-95: #fffff1ff;
+    --hy-ref-color-yellow-90: #ffffe0ff;
+    --hy-ref-color-yellow-80: #ffffbeff;
+    --hy-ref-color-yellow-70: #ffff9dff;
+    --hy-ref-color-yellow-60: #ffff7cff;
+    --hy-ref-color-yellow-50: #ffff5aff;
+    --hy-ref-color-yellow-40: #ffff34ff;
+    --hy-ref-color-yellow-35: #ffff1aff;
+    --hy-ref-color-yellow-30: #efef00ff;
+    --hy-ref-color-yellow-25: #cdcd00ff;
+    --hy-ref-color-yellow-20: #acac00ff;
+    --hy-ref-color-yellow-10: #6e6e00ff;
+    --hy-ref-color-yellow-0: #000000ff;
+    --hy-ref-color-cyan-100: #ffffffff;
+    --hy-ref-color-cyan-99: #fbffffff;
+    --hy-ref-color-cyan-98: #fbffffff;
+    --hy-ref-color-cyan-95: #f1ffffff;
+    --hy-ref-color-cyan-90: #e0ffffff;
+    --hy-ref-color-cyan-80: #beffffff;
+    --hy-ref-color-cyan-70: #9dffffff;
+    --hy-ref-color-cyan-60: #7cffffff;
+    --hy-ref-color-cyan-50: #5affffff;
+    --hy-ref-color-cyan-40: #34ffffff;
+    --hy-ref-color-cyan-35: #1affffff;
+    --hy-ref-color-cyan-30: #00efefff;
+    --hy-ref-color-cyan-25: #00cdcdff;
+    --hy-ref-color-cyan-20: #00acacff;
+    --hy-ref-color-cyan-10: #006e6eff;
+    --hy-ref-color-cyan-0: #000000ff;
+    --hy-ref-color-magenta-100: #ffffffff;
+    --hy-ref-color-magenta-99: #fffbffff;
+    --hy-ref-color-magenta-98: #fffbffff;
+    --hy-ref-color-magenta-95: #fff1ffff;
+    --hy-ref-color-magenta-90: #ffe0ffff;
+    --hy-ref-color-magenta-80: #ffbeffff;
+    --hy-ref-color-magenta-70: #ff9dffff;
+    --hy-ref-color-magenta-60: #ff7cffff;
+    --hy-ref-color-magenta-50: #ff5affff;
+    --hy-ref-color-magenta-40: #ff34ffff;
+    --hy-ref-color-magenta-35: #ff1affff;
+    --hy-ref-color-magenta-30: #ef00efff;
+    --hy-ref-color-magenta-25: #cd00cdff;
+    --hy-ref-color-magenta-20: #ac00acff;
+    --hy-ref-color-magenta-10: #6e006eff;
+    --hy-ref-color-magenta-0: #000000ff;
+    --hy-ref-color-orange-100: #ffffffff;
+    --hy-ref-color-orange-99: #fffbffff;
+    --hy-ref-color-orange-98: #fff8f5ff;
+    --hy-ref-color-orange-95: #ffede4ff;
+    --hy-ref-color-orange-90: #ffdcc7ff;
+    --hy-ref-color-orange-80: #ffb787ff;
+    --hy-ref-color-orange-70: #ff8e36ff;
+    --hy-ref-color-orange-60: #e37100ff;
+    --hy-ref-color-orange-50: #bc5d00ff;
+    --hy-ref-color-orange-40: #964900ff;
+    --hy-ref-color-orange-35: #843f00ff;
+    --hy-ref-color-orange-30: #723600ff;
+    --hy-ref-color-orange-25: #612d00ff;
+    --hy-ref-color-orange-20: #502400ff;
+    --hy-ref-color-orange-10: #311300ff;
+    --hy-ref-color-orange-0: #000000ff;
+    --hy-ref-color-chartreuse-100: #ffffffff;
+    --hy-ref-color-chartreuse-99: #f8ffebff;
+    --hy-ref-color-chartreuse-98: #eeffdcff;
+    --hy-ref-color-chartreuse-95: #cfffa9ff;
+    --hy-ref-color-chartreuse-90: #82ff10ff;
+    --hy-ref-color-chartreuse-80: #70e000ff;
+    --hy-ref-color-chartreuse-70: #60c100ff;
+    --hy-ref-color-chartreuse-60: #50a400ff;
+    --hy-ref-color-chartreuse-50: #418700ff;
+    --hy-ref-color-chartreuse-40: #326b00ff;
+    --hy-ref-color-chartreuse-35: #2b5e00ff;
+    --hy-ref-color-chartreuse-30: #245100ff;
+    --hy-ref-color-chartreuse-25: #1e4400ff;
+    --hy-ref-color-chartreuse-20: #173800ff;
+    --hy-ref-color-chartreuse-10: #0b2000ff;
+    --hy-ref-color-chartreuse-0: #000000ff;
+    --hy-ref-color-spring-green-100: #ffffffff;
+    --hy-ref-color-spring-green-99: #f5fff2ff;
+    --hy-ref-color-spring-green-98: #eaffe9ff;
+    --hy-ref-color-spring-green-95: #c4ffcbff;
+    --hy-ref-color-spring-green-90: #63ff94ff;
+    --hy-ref-color-spring-green-80: #00e472ff;
+    --hy-ref-color-spring-green-70: #00c561ff;
+    --hy-ref-color-spring-green-60: #00a751ff;
+    --hy-ref-color-spring-green-50: #008942ff;
+    --hy-ref-color-spring-green-40: #006d33ff;
+    --hy-ref-color-spring-green-35: #00602cff;
+    --hy-ref-color-spring-green-30: #005225ff;
+    --hy-ref-color-spring-green-25: #00461eff;
+    --hy-ref-color-spring-green-20: #003917ff;
+    --hy-ref-color-spring-green-10: #00210bff;
+    --hy-ref-color-spring-green-0: #000000ff;
+    --hy-ref-color-azure-100: #ffffffff;
+    --hy-ref-color-azure-99: #fdfbffff;
+    --hy-ref-color-azure-98: #f9f9ffff;
+    --hy-ref-color-azure-95: #ecf0ffff;
+    --hy-ref-color-azure-90: #d7e3ffff;
+    --hy-ref-color-azure-80: #abc7ffff;
+    --hy-ref-color-azure-70: #7cabffff;
+    --hy-ref-color-azure-60: #438fffff;
+    --hy-ref-color-azure-50: #0074e9ff;
+    --hy-ref-color-azure-40: #005cbbff;
+    --hy-ref-color-azure-35: #0050a5ff;
+    --hy-ref-color-azure-30: #00458fff;
+    --hy-ref-color-azure-25: #003a7aff;
+    --hy-ref-color-azure-20: #002f65ff;
+    --hy-ref-color-azure-10: #001b3fff;
+    --hy-ref-color-azure-0: #000000ff;
+    --hy-ref-color-violet-100: #ffffffff;
+    --hy-ref-color-violet-99: #fffbffff;
+    --hy-ref-color-violet-98: #fef7ffff;
+    --hy-ref-color-violet-95: #f7edffff;
+    --hy-ref-color-violet-90: #ecdcffff;
+    --hy-ref-color-violet-80: #d5baffff;
+    --hy-ref-color-violet-70: #bf98ffff;
+    --hy-ref-color-violet-60: #a974ffff;
+    --hy-ref-color-violet-50: #944affff;
+    --hy-ref-color-violet-40: #7d00faff;
+    --hy-ref-color-violet-35: #6e00dcff;
+    --hy-ref-color-violet-30: #5f00c0ff;
+    --hy-ref-color-violet-25: #5000a4ff;
+    --hy-ref-color-violet-20: #42008aff;
+    --hy-ref-color-violet-10: #270057ff;
+    --hy-ref-color-violet-0: #000000ff;
+    --hy-ref-color-rose-100: #ffffffff;
+    --hy-ref-color-rose-99: #fffbffff;
+    --hy-ref-color-rose-98: #fff8f8ff;
+    --hy-ref-color-rose-95: #ffecefff;
+    --hy-ref-color-rose-90: #ffd9e1ff;
+    --hy-ref-color-rose-80: #ffb1c5ff;
+    --hy-ref-color-rose-70: #ff84a9ff;
+    --hy-ref-color-rose-60: #ff4a8eff;
+    --hy-ref-color-rose-50: #e80074ff;
+    --hy-ref-color-rose-40: #ba005cff;
+    --hy-ref-color-rose-35: #a40050ff;
+    --hy-ref-color-rose-30: #8f0045ff;
+    --hy-ref-color-rose-25: #7a003aff;
+    --hy-ref-color-rose-20: #65002fff;
+    --hy-ref-color-rose-10: #3f001bff;
+    --hy-ref-color-rose-0: #000000ff;
+    --hy-color-primary: var(--hy-ref-color-primary-40);
+    --hy-color-on-primary: var(--hy-ref-color-primary-100);
+    --hy-color-primary-container: var(--hy-ref-color-primary-90);
+    --hy-color-on-primary-container: var(--hy-ref-color-primary-10);
+    --hy-color-secondary: var(--hy-ref-color-secondary-40);
+    --hy-color-on-secondary: var(--hy-ref-color-secondary-100);
+    --hy-color-secondary-container: var(--hy-ref-color-secondary-90);
+    --hy-color-on-secondary-container: var(--hy-ref-color-secondary-10);
+    --hy-color-tertiary: var(--hy-ref-color-tertiary-40);
+    --hy-color-on-tertiary: var(--hy-ref-color-tertiary-100);
+    --hy-color-tertiary-container: var(--hy-ref-color-tertiary-90);
+    --hy-color-on-tertiary-container: var(--hy-ref-color-tertiary-10);
+    --hy-color-error: var(--hy-ref-color-error-40);
+    --hy-color-on-error: var(--hy-ref-color-error-100);
+    --hy-color-error-container: var(--hy-ref-color-error-90);
+    --hy-color-on-error-container: var(--hy-ref-color-error-10);
+    --hy-color-warning: var(--hy-ref-color-warning-40);
+    --hy-color-on-warning: var(--hy-ref-color-warning-100);
+    --hy-color-warning-container: var(--hy-ref-color-warning-90);
+    --hy-color-on-warning-container: var(--hy-ref-color-warning-10);
+    --hy-color-background: var(--hy-ref-color-neutral-99);
+    --hy-color-on-background: var(--hy-ref-color-neutral-10);
+    --hy-color-surface: var(--hy-ref-color-neutral-98);
+    --hy-color-on-surface: var(--hy-ref-color-neutral-10);
+    --hy-color-surface-variant: var(--hy-ref-color-neutral-variant-90);
+    --hy-color-on-surface-variant: var(--hy-ref-color-neutral-variant-30);
+    --hy-color-inverse-surface: var(--hy-ref-color-neutral-20);
+    --hy-color-inverse-on-surface: var(--hy-ref-color-neutral-95);
+    --hy-color-inverse-primary: var(--hy-ref-color-primary-80);
+    --hy-color-outline: var(--hy-ref-color-neutral-50);
+    --hy-color-outline-variant: var(--hy-ref-color-neutral-variant-80);
+    --hy-color-shadow: var(--hy-ref-color-neutral-0);
+    --hy-color-scrim: var(--hy-ref-color-neutral-0);
+    --hy-color-surface-tint: var(--hy-ref-color-primary-40);
+    --hy-color-primary-fixed: var(--hy-ref-color-primary-90);
+    --hy-color-on-primary-fixed: var(--hy-ref-color-primary-10);
+    --hy-color-primary-fixed-dim: var(--hy-ref-color-primary-80);
+    --hy-color-on-primary-fixed-variant: var(--hy-ref-color-primary-30);
+    --hy-color-secondary-fixed: var(--hy-ref-color-secondary-90);
+    --hy-color-on-secondary-fixed: var(--hy-ref-color-secondary-10);
+    --hy-color-secondary-fixed-dim: var(--hy-ref-color-secondary-80);
+    --hy-color-on-secondary-fixed-variant: var(--hy-ref-color-secondary-30);
+    --hy-color-tertiary-fixed: var(--hy-ref-color-tertiary-90);
+    --hy-color-on-tertiary-fixed: var(--hy-ref-color-tertiary-10);
+    --hy-color-tertiary-fixed-dim: var(--hy-ref-color-tertiary-80);
+    --hy-color-on-tertiary-fixed-variant: var(--hy-ref-color-tertiary-30);
+    --hy-color-surface-dim: var(--hy-ref-color-neutral-90);
+    --hy-color-surface-bright: var(--hy-ref-color-neutral-98);
+    --hy-color-surface-container-lowest: var(--hy-ref-color-neutral-100);
+    --hy-color-surface-container-low: var(--hy-ref-color-neutral-95);
+    --hy-color-surface-container: var(--hy-ref-color-neutral-95);
+    --hy-color-surface-container-high: var(--hy-ref-color-neutral-90);
+    --hy-color-surface-container-highest: var(--hy-ref-color-neutral-90);
+}
+
+:root.dark {
+    --hy-color-primary: var(--hy-ref-color-primary-80);
+    --hy-color-on-primary: var(--hy-ref-color-primary-20);
+    --hy-color-primary-container: var(--hy-ref-color-primary-30);
+    --hy-color-on-primary-container: var(--hy-ref-color-primary-90);
+    --hy-color-secondary: var(--hy-ref-color-secondary-80);
+    --hy-color-on-secondary: var(--hy-ref-color-secondary-20);
+    --hy-color-secondary-container: var(--hy-ref-color-secondary-30);
+    --hy-color-on-secondary-container: var(--hy-ref-color-secondary-90);
+    --hy-color-tertiary: var(--hy-ref-color-tertiary-80);
+    --hy-color-on-tertiary: var(--hy-ref-color-tertiary-20);
+    --hy-color-tertiary-container: var(--hy-ref-color-tertiary-30);
+    --hy-color-on-tertiary-container: var(--hy-ref-color-tertiary-90);
+    --hy-color-error: var(--hy-ref-color-error-80);
+    --hy-color-on-error: var(--hy-ref-color-error-20);
+    --hy-color-error-container: var(--hy-ref-color-error-30);
+    --hy-color-on-error-container: var(--hy-ref-color-error-90);
+    --hy-color-warning: var(--hy-ref-color-warning-80);
+    --hy-color-on-warning: var(--hy-ref-color-warning-20);
+    --hy-color-warning-container: var(--hy-ref-color-warning-30);
+    --hy-color-on-warning-container: var(--hy-ref-color-warning-90);
+    --hy-color-background: var(--hy-ref-color-neutral-10);
+    --hy-color-on-background: var(--hy-ref-color-neutral-90);
+    --hy-color-surface: var(--hy-ref-color-neutral-10);
+    --hy-color-on-surface: var(--hy-ref-color-neutral-90);
+    --hy-color-surface-variant: var(--hy-ref-color-neutral-variant-30);
+    --hy-color-on-surface-variant: var(--hy-ref-color-neutral-variant-80);
+    --hy-color-inverse-surface: var(--hy-ref-color-neutral-90);
+    --hy-color-inverse-on-surface: var(--hy-ref-color-neutral-20);
+    --hy-color-inverse-primary: var(--hy-ref-color-primary-40);
+    --hy-color-outline: var(--hy-ref-color-neutral-60);
+    --hy-color-outline-variant: var(--hy-ref-color-neutral-variant-30);
+    --hy-color-shadow: var(--hy-ref-color-neutral-0);
+    --hy-color-scrim: var(--hy-ref-color-neutral-0);
+    --hy-color-surface-tint: var(--hy-ref-color-primary-80);
+    --hy-color-primary-fixed: var(--hy-ref-color-primary-90);
+    --hy-color-on-primary-fixed: var(--hy-ref-color-primary-10);
+    --hy-color-primary-fixed-dim: var(--hy-ref-color-primary-80);
+    --hy-color-on-primary-fixed-variant: var(--hy-ref-color-primary-30);
+    --hy-color-secondary-fixed: var(--hy-ref-color-secondary-90);
+    --hy-color-on-secondary-fixed: var(--hy-ref-color-secondary-10);
+    --hy-color-secondary-fixed-dim: var(--hy-ref-color-secondary-80);
+    --hy-color-on-secondary-fixed-variant: var(--hy-ref-color-secondary-30);
+    --hy-color-tertiary-fixed: var(--hy-ref-color-tertiary-90);
+    --hy-color-on-tertiary-fixed: var(--hy-ref-color-tertiary-10);
+    --hy-color-tertiary-fixed-dim: var(--hy-ref-color-tertiary-80);
+    --hy-color-on-tertiary-fixed-variant: var(--hy-ref-color-tertiary-30);
+    --hy-color-surface-dim: var(--hy-ref-color-neutral-10);
+    --hy-color-surface-bright: var(--hy-ref-color-neutral-20);
+    --hy-color-surface-container-lowest: var(--hy-ref-color-neutral-5);
+    --hy-color-surface-container-low: var(--hy-ref-color-neutral-10);
+    --hy-color-surface-container: var(--hy-ref-color-neutral-15);
+    --hy-color-surface-container-high: var(--hy-ref-color-neutral-15);
+    --hy-color-surface-container-highest: var(--hy-ref-color-neutral-20);
+}

package/src/tokens/index.css

@@ -0,0 +1 @@
+@import "./colors.css";

package/src/tokens/index.d.ts

@@ -0,0 +1,14 @@
+interface Token {
+    id: string;
+    name: string;
+    type: 'COLOR' | 'TYPO';
+    value: string;
+}
+
+interface Tokens {
+    references: Token[];
+    systems: Token[];
+}
+
+declare const tokens: Tokens;
+export { tokens };

package/src/tokens/index.mjs

@@ -0,0 +1,3 @@
+import tokens from './tokens.json';
+
+export { tokens };