@tenancy.nz/tokens 1.8.5

package/README.md

@@ -0,0 +1,86 @@
+# @tenancy.nz/tokens
+
+Design tokens for TPS UI. Figma Token Studio is the source of truth — designers
+push/pull the single raw export in [`raw/tokens.json`](./raw/tokens.json). A
+prebuild step fans that out into the Token Studio "pro" multi-file layout under
+`src/`, then Style Dictionary compiles **one theme at a time** into the artifacts
+the component packages consume.
+
+## Folder structure
+
+```
+packages/tokens/
+├── raw/tokens.json           ← Token Studio sync target (single-file export)
+├── scripts/split-tokens.mjs  ← prebuild: raw/tokens.json → src/ (pro layout)
+├── src/                      ← generated, gitignored — one folder per theme
+│   ├── $metadata.json        ← Token Studio: token-set order
+│   ├── $themes.json          ← Token Studio: theme definitions
+│   ├── light/{primitive,semantic,component}.json
+│   └── dark/{primitive,semantic,component}.json
+├── style-dictionary.config.js  ← themeConfig() factory (one instance per theme)
+├── build.mjs                 ← `pnpm build` entry point
+└── dist/                     ← generated, gitignored, rebuilt in CI
+    ├── css/tokens.css        ← :root (light) + [data-theme="dark"] (+ light.css/dark.css)
+    ├── esm/index.js          ← ESM: { light, dark } value trees
+    ├── cjs/index.cjs         ← CommonJS
+    └── types/index.d.ts      ← TypeScript declarations
+```
+
+> `raw/tokens.json` is the **only** hand-off point. Everything under `src/` and
+> `dist/` is machine-owned — the prebuild wipes and regenerates `src/` on every
+> build, so edit tokens in Figma Token Studio and push, not by hand.
+
+Each theme is compiled by its own Style Dictionary instance so the identical
+`primitive`/`semantic`/`component` groups across themes don't collide. Token
+references (`{primitive.colors.blue.Blue500}`) are theme-agnostic and resolve
+within whichever theme is being built.
+
+## Connecting Figma Token Studio
+
+In the Token Studio plugin → **Settings → Sync** add a Git provider (GitLab, to
+match this repo) with:
+
+- **Branch**: a dedicated branch, e.g. `design-tokens`, so designer pushes arrive
+  as merge requests rather than landing on `main`.
+- **File path**: `packages/tokens/raw/tokens.json`
+- **Token format**: **DTCG** (`$value` / `$type`).
+
+Push from the plugin to write the JSON here; a merge to a release branch triggers
+the build below.
+
+## Build
+
+```sh
+pnpm --filter @tenancy.nz/tokens build
+```
+
+`prebuild` runs `scripts/split-tokens.mjs` first (also available standalone as
+`pnpm --filter @tenancy.nz/tokens split`).
+
+## Consuming
+
+Tokens are exported as clean, resolved value trees — one per theme — keyed by
+their Token Studio paths, ready to map into a Material UI theme:
+
+```ts
+import tokens, {light, dark} from '@tenancy.nz/tokens';
+
+tokens.light.primitive.colors.turquoise.Turquoise500;   // "#0cc1a3"
+light.semantic.text['--color--text-accent'];            // "#0cc1a3"
+
+// MUI: feed both schemes (or map the tokens into your palette shape)
+import {createTheme} from '@mui/material/styles';
+const theme = createTheme({
+  colorSchemes: {
+    light: {palette: {primary: {main: light.semantic.text['--color--text-accent']}}},
+    dark: {palette: {primary: {main: dark.semantic.text['--color--text-accent']}}},
+  },
+});
+```
+
+Or use the CSS custom properties (light under `:root`, dark under
+`[data-theme="dark"]`):
+
+```ts
+import '@tenancy.nz/tokens/css';
+```

package/dist/cjs/dark.cjs

@@ -0,0 +1,490 @@
+module.exports = {
+  "component": {
+    "button": {
+      "primary": {
+        "backgroundPressed": "#0e0044",
+        "backgroundDisabled": "#eeeeee",
+        "backgroundHover": "#3e3369",
+        "backgroundDefault": "#0e0044"
+      },
+      "secondary": {
+        "borderDisabledColor": "#bdbdbd",
+        "backgroundDefault": "#ffffff",
+        "borderColor": "#0e0044",
+        "backgroundDisabled": "#eeeeee",
+        "backgroundPressed": "#e0e0e0",
+        "backgroundHover": "#eeeeee"
+      },
+      "tertiary": {
+        "backgroundPressed": "rgba(0, 0, 0, 0.12)",
+        "backgroundHover": "rgba(0, 0, 0, 0.04)"
+      },
+      "accent": {
+        "backgroundDisabled": "#eeeeee",
+        "backgroundPressed": "#0a9a82",
+        "backgroundHover": "#0bae93",
+        "backgroundDefault": "#0cc1a3"
+      },
+      "destructive": {
+        "backgroundDisabled": "#eeeeee",
+        "backgroundPressed": "#870000",
+        "backgroundHover": "#b40000",
+        "backgroundDefault": "#e73333"
+      },
+      "destructiveOutline": {
+        "borderDisabledColor": "#bdbdbd",
+        "borderColor": "#e10000",
+        "iconColor": "#e10000",
+        "backgroundPressed": "#f9cccc",
+        "textColor": "#e10000",
+        "backgroundHover": "#fce6e6",
+        "backgroundDisabled": "#eeeeee",
+        "backgroundDefault": "#ffffff"
+      },
+      "favourite": {
+        "backgroundDisabled": "#eeeeee",
+        "backgroundHover": "#cc9200",
+        "backgroundPressed": "#996e00",
+        "backgroundDefault": "#ffb700"
+      },
+      "citation": {
+        "backgroundDisabled": "#eeeeee",
+        "backgroundPressed": "#b6ece3",
+        "backgroundHover": "#cef3ed",
+        "backgroundDefault": "#e7f9f6"
+      }
+    },
+    "switches": {
+      "handleOnDisabled": "#ffffff",
+      "handleOff": "#757575",
+      "handleOn": "#ffffff",
+      "backgroundOffDisabled": "#f5f5f5",
+      "handleOffDisabled": "#bdbdbd",
+      "backgroundOnDisabled": "#e0e0e0",
+      "backgroundOff": "#f5f5f5",
+      "backgroundOn": "#0cc1a3"
+    },
+    "tag": {
+      "backgroundCobalt": "#e6ecf8",
+      "backgroundPurple": "#f6eefd",
+      "backgroundRed": "#fce6e6",
+      "iconGrey": "#9e9e9e",
+      "iconPurple": "#a954ef",
+      "iconRed": "#e10000",
+      "backgroundGold": "#faf2e9",
+      "iconOrange": "#ff6200",
+      "iconYellow": "#c97a20",
+      "iconGreen": "#38a06c",
+      "textWhite": "#ffffff",
+      "textGrey": "#616161",
+      "textGreen": "#226041",
+      "iconBlue": "#4589ff",
+      "borderTrademe": "#4854d3",
+      "textGold": "#794913",
+      "borderRealestate": "#0098ff",
+      "borderDarkGrey": "#616161",
+      "textOrange": "#662700",
+      "textYellow": "#794913",
+      "backgroundBlue": "#ecf3ff",
+      "borderOfficeWebsite": "#616161",
+      "iconCobalt": "#1d58be",
+      "borderOneroof": "#ff8500",
+      "iconGold": "#c97a20",
+      "backgroundYellow": "#fffbde",
+      "borderLightGrey": "#9e9e9e",
+      "borderAllhouse": "#000000",
+      "borderTenantPortal": "#0cc1a3",
+      "textCobalt": "#1c3766",
+      "textBlue": "#0445b7",
+      "backgroundPink": "#db2c73",
+      "backgroundGreen": "#ebf6f0",
+      "backgroundOrange": "#ffefe6",
+      "backgroundGrey": "#f5f5f5",
+      "textRed": "#5a0000",
+      "backgroundPrimary": "#0e0044",
+      "textPurple": "#6f2c91",
+      "backgroundEdit": "#ff8133",
+      "backgroundAccent": "#0cc1a3"
+    },
+    "interactiveSurface": {
+      "primary": {
+        "backgroundPressed": "#eeeeee",
+        "backgroundHover": "#fafafa",
+        "backgroundDisabled": "#ffffff",
+        "backgroundDefault": "#ffffff"
+      },
+      "secondary": {
+        "backgroundDefault": "#fafafa",
+        "backgroundHover": "#f5f5f5",
+        "backgroundPressed": "#eeeeee",
+        "backgroundDisabled": "#fafafa"
+      }
+    },
+    "creditscore": {
+      "borderExcellent": "#38a06c",
+      "borderGood": "#6ac233",
+      "borderAverage": "#ffb700",
+      "borderFair": "#ff6200",
+      "borderPoor": "#b40000",
+      "iconPoor": "#b40000",
+      "iconExcellent": "#38a06c",
+      "iconFair": "#ff6200",
+      "iconGood": "#6ac233",
+      "iconAverage": "#ffb700"
+    },
+    "segmentedControl": {
+      "backgroundColor": "#e7e6ec"
+    },
+    "progressBar": {
+      "incompleteColor": "#e0e0e0",
+      "accentColor": "#0cc1a3",
+      "errorColor": "#870000",
+      "successColor": "#16402b",
+      "warningColor": "#794913"
+    },
+    "chip": {
+      "backgroundHover": "#eeeeee",
+      "backgroundPressed": "#e0e0e0",
+      "backgroundDefault": "#ffffff",
+      "backgroundActive": "#0e0044",
+      "backgroundDisabled": "#ffffff"
+    },
+    "profile": {
+      "border": {
+        "turquoise": "#9ee6da",
+        "gold": "#dfaf79",
+        "orange": "#ffa166",
+        "purple": "#cb98f5",
+        "pink": "#f1abc7",
+        "blue": "#b5d0ff",
+        "cobalt": "#9bb5e2"
+      },
+      "text": {
+        "turquoise": "#0a9a82",
+        "gold": "#c97a20",
+        "orange": "#cc4e00",
+        "purple": "#a954ef",
+        "pink": "#db2c73",
+        "blue": "#376ecc",
+        "cobalt": "#366ac5"
+      },
+      "background": {
+        "turquoise": "#e7f9f6",
+        "yellow": "#fffdef",
+        "orange": "#ffefe6",
+        "purple": "#f6eefd",
+        "pink": "#fbeaf1",
+        "blue": "#ecf3ff",
+        "cobalt": "#e6ecf8"
+      }
+    }
+  },
+  "primitive": {
+    "color": {
+      "orange": {
+        "50": "#ffefe6",
+        "100": "#ffe0cc",
+        "200": "#ffa166",
+        "300": "#ff8133",
+        "400": "#ff6200",
+        "500": "#cc4e00",
+        "600": "#993b00",
+        "700": "#662700",
+        "800": "#331400",
+        "900": "#1a0a00"
+      },
+      "purple": {
+        "50": "#f6eefd",
+        "100": "#eeddfc",
+        "200": "#cb98f5",
+        "300": "#ba76f2",
+        "400": "#a954ef",
+        "500": "#8743bf",
+        "600": "#6f2c91",
+        "700": "#442260",
+        "800": "#221130",
+        "900": "#110818"
+      },
+      "grey": {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#eeeeee",
+        "300": "#e0e0e0",
+        "400": "#bdbdbd",
+        "500": "#9e9e9e",
+        "600": "#757575",
+        "700": "#616161",
+        "800": "#424242",
+        "900": "#212121"
+      },
+      "white": "#ffffff",
+      "turquoise": {
+        "50": "#e7f9f6",
+        "100": "#cef3ed",
+        "150": "#b6ece3",
+        "200": "#9ee6da",
+        "250": "#86e0d1",
+        "300": "#6ddac8",
+        "350": "#55d4bf",
+        "400": "#3dcdb5",
+        "450": "#24c7ac",
+        "500": "#0cc1a3",
+        "550": "#0bae93",
+        "600": "#0a9a82",
+        "650": "#088772",
+        "700": "#077462",
+        "750": "#066152",
+        "800": "#054d41",
+        "850": "#043a31",
+        "900": "#022721",
+        "950": "#011310"
+      },
+      "cobalt": {
+        "50": "#e6ecf8",
+        "100": "#cddaf1",
+        "150": "#b4c7e9",
+        "200": "#9bb5e2",
+        "250": "#82a2db",
+        "300": "#688fd4",
+        "350": "#4f7dcd",
+        "400": "#366ac5",
+        "450": "#1d58be",
+        "500": "#0445b7",
+        "550": "#043ea5",
+        "600": "#033792",
+        "650": "#033080",
+        "700": "#02296e",
+        "750": "#02235c",
+        "800": "#021c49",
+        "850": "#011537",
+        "900": "#010e25",
+        "950": "#000712"
+      },
+      "darkBlue": {
+        "50": "#e7e6ec",
+        "100": "#cfccda",
+        "200": "#b7b3c7",
+        "300": "#9f99b4",
+        "400": "#8780a2",
+        "500": "#6e668f",
+        "600": "#564d7c",
+        "700": "#3e3369",
+        "800": "#261a57",
+        "900": "#261a57",
+        "1000": "#0e0044"
+      },
+      "pink": {
+        "50": "#fbeaf1",
+        "100": "#f8d5e3",
+        "150": "#f4c0d5",
+        "200": "#f1abc7",
+        "250": "#ed96b9",
+        "300": "#e980ab",
+        "350": "#e66b9d",
+        "400": "#e2568f",
+        "450": "#df4181",
+        "500": "#db2c73",
+        "550": "#c52868",
+        "600": "#af235c",
+        "650": "#991f51",
+        "700": "#831a45",
+        "750": "#6e163a",
+        "800": "#58122e",
+        "850": "#420d22",
+        "900": "#2c0917",
+        "950": "#16040b"
+      },
+      "red": {
+        "50": "#fce6e6",
+        "100": "#f9cccc",
+        "200": "#ed6666",
+        "300": "#e73333",
+        "400": "#e10000",
+        "500": "#b40000",
+        "600": "#870000",
+        "700": "#5a0000",
+        "800": "#2d0000",
+        "900": "#170000"
+      },
+      "green": {
+        "50": "#ebf6f0",
+        "100": "#d7ece2",
+        "200": "#afd9c4",
+        "300": "#88c6a7",
+        "400": "#60b389",
+        "500": "#38a06c",
+        "600": "#2d8056",
+        "700": "#226041",
+        "800": "#16402b",
+        "900": "#0b2016"
+      },
+      "gold": {
+        "50": "#faf2e9",
+        "100": "#f4e4d2",
+        "200": "#dfaf79",
+        "300": "#d4954d",
+        "400": "#c97a20",
+        "500": "#a1621a",
+        "600": "#794913",
+        "700": "#50310d",
+        "800": "#281806",
+        "900": "#140c03"
+      },
+      "yellow": {
+        "50": "#fffdef",
+        "100": "#fffbde",
+        "200": "#fef49d",
+        "300": "#fdf17c",
+        "400": "#fded5b",
+        "500": "#cabe49",
+        "600": "#988e37",
+        "700": "#655f24",
+        "800": "#332f12",
+        "900": "#191809"
+      },
+      "blue": {
+        "50": "#ecf3ff",
+        "100": "#dae7ff",
+        "200": "#b5d0ff",
+        "300": "#8fb8ff",
+        "400": "#6aa1ff",
+        "500": "#4589ff",
+        "600": "#376ecc",
+        "700": "#295299",
+        "800": "#1c3766",
+        "900": "#0e1b33",
+        "1000": "#070e1a"
+      },
+      "gradient": {
+        "100": "#0cc1a3",
+        "200": "#0445b7"
+      },
+      "mango": {
+        "50": "#fff8e6",
+        "100": "#ffe299",
+        "200": "#ffd466",
+        "300": "#ffc533",
+        "400": "#ffb700",
+        "500": "#cc9200",
+        "600": "#996e00",
+        "700": "#664900",
+        "800": "#332500",
+        "900": "#1a1200"
+      },
+      "brand": {
+        "mint": "#0cc1a3",
+        "pink": "#db2c73",
+        "cobalt": "#274a9a",
+        "darkBlue": "#0e0044"
+      }
+    },
+    "opacity": {
+      "opacity9": "rgba(0, 0, 0, 0.74)",
+      "opacity8": "rgba(0, 0, 0, 0.62)",
+      "opacity10": "rgba(0, 0, 0, 0.87)",
+      "opacity6": "rgba(0, 0, 0, 0.38)",
+      "opacity3": "rgba(0, 0, 0, 0.07)",
+      "opacity5": "rgba(0, 0, 0, 0.26)",
+      "opacity7": "rgba(0, 0, 0, 0.54)",
+      "opacity1": "rgba(0, 0, 0, 0.02)",
+      "opacity4": "rgba(0, 0, 0, 0.12)",
+      "opacity2": "rgba(0, 0, 0, 0.04)"
+    },
+    "radius": {
+      "radius6": "1.5rem",
+      "radius2": "0.5rem",
+      "radius5": "1.25rem",
+      "radius4": "1rem",
+      "radius3": "0.75rem",
+      "radius1": "0.25rem"
+    },
+    "spacing": {
+      "spacing10": "2.25rem",
+      "spacing9": "2rem",
+      "spacing4": "0.75rem",
+      "spacing6": "1.25rem",
+      "spacing13": "3rem",
+      "spacing17": "4rem",
+      "spacing8": "1.75rem",
+      "spacing15": "3.5rem",
+      "spacing14": "3.25rem",
+      "spacing3": "0.5rem",
+      "spacing12": "2.75rem",
+      "spacing2": "0.25rem",
+      "spacing7": "1.5rem",
+      "spacing5": "1rem",
+      "spacing11": "2.5rem",
+      "spacing16": "3.75rem",
+      "spacing1": "0rem"
+    }
+  },
+  "semantic": {
+    "surface": {
+      "warningColor": "#fffbde",
+      "errorColor": "#fce6e6",
+      "primaryColor": "#0e0044",
+      "infoColor": "#dae7ff",
+      "editColor": "#faf2e9",
+      "background2": "#fafafa",
+      "background3": "#f5f5f5",
+      "successColor": "#d7ece2",
+      "background1": "#ffffff",
+      "accentColor": "#cef3ed",
+      "scrim": "rgba(0, 0, 0, 0.74)"
+    },
+    "icons": {
+      "warningColor": "#794913",
+      "errorColor": "#870000",
+      "iconOnColor": "#ffffff",
+      "disabledColor": "#757575",
+      "primaryColor": "#0e0044",
+      "accentColor": "#0cc1a3",
+      "infoColor": "#043ea5",
+      "successColor": "#16402b",
+      "secondaryColor": "#6e668f",
+      "incompleteStepColor": "#6e668f",
+      "destructiveColor": "#e10000",
+      "archivedColor": "#c97a20"
+    },
+    "selelectionControl": {
+      "selectedDisabled": "#bdbdbd",
+      "selectedHover": "#0bae93",
+      "selectedDefault": "#0cc1a3",
+      "unselectedDefault": "#616161",
+      "unselectedHoverColor": "#212121",
+      "selectedPressed": "#0a9a82",
+      "unselectedPressed": "#212121",
+      "unselectedDisabled": "#bdbdbd"
+    },
+    "border": {
+      "accentColor": "#0cc1a3",
+      "successColor": "#16402b",
+      "errorColor": "#870000",
+      "focusColor": "#0e0044",
+      "mediumColor": "#bdbdbd",
+      "warningColor": "#794913",
+      "subtleColor": "#e0e0e0",
+      "primaryColor": "#0e0044",
+      "strongColor": "#424242",
+      "infoColor": "#043ea5",
+      "editColor": "#ff8133"
+    },
+    "text": {
+      "disabledColor": "#757575",
+      "accentColor": "#0cc1a3",
+      "warningColor": "#794913",
+      "textOnColor": "#ffffff",
+      "successColor": "#16402b",
+      "errorColor": "#870000",
+      "placeholderColor": "#616161",
+      "primaryColor": "#0e0044",
+      "infoColor": "#043ea5",
+      "secondaryColor": "#6e668f",
+      "archivedColor": "#c97a20",
+      "destructiveColor": "#e10000",
+      "linkColor": "#0e0044",
+      "requiredStarColor": "#b40000",
+      "incompleteStepColor": "#6e668f"
+    }
+  }
+};

package/dist/cjs/index.cjs

@@ -0,0 +1,3 @@
+const light = require('./light.cjs');
+const dark = require('./dark.cjs');
+module.exports = {light, dark};