@primitiv-ui/tokens 0.1.29 → 0.1.30

package/src/palette.json

@@ -138,23 +138,23 @@
       "brand": {
         "50": {
           "$type": "color",
-          "$value": "#eff8ff"
+          "$value": "#f0f5ff"
         },
         "100": {
           "$type": "color",
-          "$value": "#cbe5ff"
+          "$value": "#d2e3fe"
         },
         "200": {
           "$type": "color",
-          "$value": "#9bcaff"
+          "$value": "#aac9fc"
         },
         "300": {
           "$type": "color",
-          "$value": "#7ab3ff"
+          "$value": "#86b3fb"
         },
         "400": {
           "$type": "color",
-          "$value": "#5594fd"
+          "$value": "#5794fa"
         },
         "500": {
           "$type": "color",
@@ -162,41 +162,83 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#1150b2"
+          "$value": "#104fb2"
         },
         "700": {
           "$type": "color",
-          "$value": "#002c7d"
+          "$value": "#032e71"
         },
         "800": {
           "$type": "color",
-          "$value": "#001352"
+          "$value": "#011841"
         },
         "900": {
           "$type": "color",
-          "$value": "#000532"
+          "$value": "#000923"
+        }
+      },
+      "brand-alpha": {
+        "50": {
+          "$type": "color",
+          "$value": "#236ce108"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#236ce10f"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#236ce11a"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#236ce124"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#236ce133"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#236ce14d"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#236ce16b"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#236ce18c"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#236ce1b8"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#236ce1eb"
         }
       },
       "danger": {
         "50": {
           "$type": "color",
-          "$value": "#fff6f3"
+          "$value": "#fff2f0"
         },
         "100": {
           "$type": "color",
-          "$value": "#ffd8cf"
+          "$value": "#fed8d3"
         },
         "200": {
           "$type": "color",
-          "$value": "#ffac9f"
+          "$value": "#fdb5ac"
         },
         "300": {
           "$type": "color",
-          "$value": "#ff8b7d"
+          "$value": "#fc9487"
         },
         "400": {
           "$type": "color",
-          "$value": "#fc6358"
+          "$value": "#f96156"
         },
         "500": {
           "$type": "color",
@@ -204,19 +246,19 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#ad0b12"
+          "$value": "#a91215"
         },
         "700": {
           "$type": "color",
-          "$value": "#780000"
+          "$value": "#680709"
         },
         "800": {
           "$type": "color",
-          "$value": "#4e0000"
+          "$value": "#3b0203"
         },
         "900": {
           "$type": "color",
-          "$value": "#300000"
+          "$value": "#1e0101"
         }
       },
       "success": {
@@ -226,19 +268,19 @@
         },
         "100": {
           "$type": "color",
-          "$value": "#c8edc8"
+          "$value": "#caedc8"
         },
         "200": {
           "$type": "color",
-          "$value": "#96dc98"
+          "$value": "#9bdb98"
         },
         "300": {
           "$type": "color",
-          "$value": "#71c976"
+          "$value": "#79c976"
         },
         "400": {
           "$type": "color",
-          "$value": "#45af4f"
+          "$value": "#50af4f"
         },
         "500": {
           "$type": "color",
@@ -246,41 +288,41 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#006b00"
+          "$value": "#0e6913"
         },
         "700": {
           "$type": "color",
-          "$value": "#004300"
+          "$value": "#053f08"
         },
         "800": {
           "$type": "color",
-          "$value": "#002600"
+          "$value": "#022202"
         },
         "900": {
           "$type": "color",
-          "$value": "#001300"
+          "$value": "#001001"
         }
       },
       "warning": {
         "50": {
           "$type": "color",
-          "$value": "#fffaec"
+          "$value": "#fef3e9"
         },
         "100": {
           "$type": "color",
-          "$value": "#fff7cd"
+          "$value": "#fee5cc"
         },
         "200": {
           "$type": "color",
-          "$value": "#fff1a0"
+          "$value": "#fdd1a5"
         },
         "300": {
           "$type": "color",
-          "$value": "#ffd971"
+          "$value": "#fdbf7f"
         },
         "400": {
           "$type": "color",
-          "$value": "#ffb92d"
+          "$value": "#f8a84e"
         },
         "500": {
           "$type": "color",
@@ -288,41 +330,41 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#be7300"
+          "$value": "#aa6a14"
         },
         "700": {
           "$type": "color",
-          "$value": "#8e5000"
+          "$value": "#643c07"
         },
         "800": {
           "$type": "color",
-          "$value": "#683800"
+          "$value": "#321c02"
         },
         "900": {
           "$type": "color",
-          "$value": "#4d2a00"
+          "$value": "#140800"
         }
       },
       "info": {
         "50": {
           "$type": "color",
-          "$value": "#e5fafb"
+          "$value": "#edf7f9"
         },
         "100": {
           "$type": "color",
-          "$value": "#b0eff2"
+          "$value": "#caeaef"
         },
         "200": {
           "$type": "color",
-          "$value": "#55dee5"
+          "$value": "#9bd8e1"
         },
         "300": {
           "$type": "color",
-          "$value": "#00cbd5"
+          "$value": "#7ac6d1"
         },
         "400": {
           "$type": "color",
-          "$value": "#00b1bd"
+          "$value": "#52aebb"
         },
         "500": {
           "$type": "color",
@@ -330,19 +372,19 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#006c79"
+          "$value": "#106a75"
         },
         "700": {
           "$type": "color",
-          "$value": "#00444f"
+          "$value": "#063f46"
         },
         "800": {
           "$type": "color",
-          "$value": "#002730"
+          "$value": "#022125"
         },
         "900": {
           "$type": "color",
-          "$value": "#00131a"
+          "$value": "#000e10"
         }
       },
       "transparent": {
@@ -506,15 +548,15 @@
         },
         "200": {
           "$type": "color",
-          "$value": "#022968"
+          "$value": "#032967"
         },
         "300": {
           "$type": "color",
-          "$value": "#033a8c"
+          "$value": "#053a8a"
         },
         "400": {
           "$type": "color",
-          "$value": "#1453b5"
+          "$value": "#1452b5"
         },
         "500": {
           "$type": "color",
@@ -526,15 +568,57 @@
         },
         "700": {
           "$type": "color",
-          "$value": "#7cb5ff"
+          "$value": "#8bb6fb"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#bed6fd"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#e1ecfe"
+        }
+      },
+      "brand-alpha": {
+        "50": {
+          "$type": "color",
+          "$value": "#236ce108"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#236ce10f"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#236ce11a"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#236ce124"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#236ce133"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#236ce14d"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#236ce16b"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#236ce18c"
         },
         "800": {
           "$type": "color",
-          "$value": "#a6d6ff"
+          "$value": "#236ce1b8"
         },
         "900": {
           "$type": "color",
-          "$value": "#c8edff"
+          "$value": "#236ce1eb"
         }
       },
       "danger": {
@@ -548,15 +632,15 @@
         },
         "200": {
           "$type": "color",
-          "$value": "#620000"
+          "$value": "#5d0607"
         },
         "300": {
           "$type": "color",
-          "$value": "#850001"
+          "$value": "#7f0b0d"
         },
         "400": {
           "$type": "color",
-          "$value": "#ae0e14"
+          "$value": "#ad1316"
         },
         "500": {
           "$type": "color",
@@ -568,37 +652,37 @@
         },
         "700": {
           "$type": "color",
-          "$value": "#ff8a7c"
+          "$value": "#fc988c"
         },
         "800": {
           "$type": "color",
-          "$value": "#ffb3a5"
+          "$value": "#fdc6bf"
         },
         "900": {
           "$type": "color",
-          "$value": "#ffd1c6"
+          "$value": "#fee4e1"
         }
       },
       "success": {
         "50": {
           "$type": "color",
-          "$value": "#121b12"
+          "$value": "#131b12"
         },
         "100": {
           "$type": "color",
-          "$value": "#0a290d"
+          "$value": "#0d290c"
         },
         "200": {
           "$type": "color",
-          "$value": "#003b00"
+          "$value": "#043906"
         },
         "300": {
           "$type": "color",
-          "$value": "#005100"
+          "$value": "#084f0c"
         },
         "400": {
           "$type": "color",
-          "$value": "#006e00"
+          "$value": "#0f6c14"
         },
         "500": {
           "$type": "color",
@@ -606,41 +690,41 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#42ac4c"
+          "$value": "#4dab4c"
         },
         "700": {
           "$type": "color",
-          "$value": "#75cc79"
+          "$value": "#7ccc78"
         },
         "800": {
           "$type": "color",
-          "$value": "#a3e9a4"
+          "$value": "#a7e8a4"
         },
         "900": {
           "$type": "color",
-          "$value": "#c6fcc6"
+          "$value": "#c9fbc6"
         }
       },
       "warning": {
         "50": {
           "$type": "color",
-          "$value": "#1e170d"
+          "$value": "#1e170f"
         },
         "100": {
           "$type": "color",
-          "$value": "#382100"
+          "$value": "#382105"
         },
         "200": {
           "$type": "color",
-          "$value": "#5b2c00"
+          "$value": "#533105"
         },
         "300": {
           "$type": "color",
-          "$value": "#824400"
+          "$value": "#79490b"
         },
         "400": {
           "$type": "color",
-          "$value": "#b36800"
+          "$value": "#ad6c14"
         },
         "500": {
           "$type": "color",
@@ -648,41 +732,41 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#f5a600"
+          "$value": "#f5a54b"
         },
         "700": {
           "$type": "color",
-          "$value": "#ffbd52"
+          "$value": "#fdbe7e"
         },
         "800": {
           "$type": "color",
-          "$value": "#ffd382"
+          "$value": "#fdd7b0"
         },
         "900": {
           "$type": "color",
-          "$value": "#ffe3a7"
+          "$value": "#fee7d0"
         }
       },
       "info": {
         "50": {
           "$type": "color",
-          "$value": "#0b1b1c"
+          "$value": "#121a1b"
         },
         "100": {
           "$type": "color",
-          "$value": "#002a2d"
+          "$value": "#0c272b"
         },
         "200": {
           "$type": "color",
-          "$value": "#003c45"
+          "$value": "#05383e"
         },
         "300": {
           "$type": "color",
-          "$value": "#00525d"
+          "$value": "#094e57"
         },
         "400": {
           "$type": "color",
-          "$value": "#006f7c"
+          "$value": "#116d78"
         },
         "500": {
           "$type": "color",
@@ -690,19 +774,19 @@
         },
         "600": {
           "$type": "color",
-          "$value": "#00aeba"
+          "$value": "#4fabb8"
         },
         "700": {
           "$type": "color",
-          "$value": "#00cfd8"
+          "$value": "#7cc8d4"
         },
         "800": {
           "$type": "color",
-          "$value": "#64ebf3"
+          "$value": "#a6e3ec"
         },
         "900": {
           "$type": "color",
-          "$value": "#9ffeff"
+          "$value": "#c7f5fc"
         }
       },
       "transparent": {

package/src/primitives.json

@@ -456,6 +456,14 @@
       "$type": "number",
       "$value": 1.2000000476837158
     },
+    "normal": {
+      "$type": "number",
+      "$value": 0
+    },
+    "snug": {
+      "$type": "number",
+      "$value": -0.6000000238418579
+    },
     "tight": {
       "$type": "number",
       "$value": -1.2000000476837158

package/src/swatch-sizing.test.ts

@@ -0,0 +1,76 @@
+import context from './context.json'
+import primitives from './primitives.json'
+
+/*
+ * `swatch.*` — the geometry of a Harmoni colour swatch.
+ *
+ * Why it needs its own family rather than borrowing one: a swatch is not a
+ * control (`framed-control.*` is a thing you click) and not a surface
+ * (`surface.*` is a thing you put content on). It is a specimen — a colour
+ * box that prints facts about itself — and its box wants to grow far past any
+ * control height at `xl` while its padding stays tight. Borrowing either
+ * family would have coupled it to a scale chosen for a different job.
+ *
+ * The two ladders below are what make the `Size` and density axes mean
+ * anything. They are asserted rather than eyeballed because a single
+ * mis-keyed alias — `{space.space-8}` where `{space.space-4}` belongs — is
+ * invisible in a 120-cell table and shows up only as one size looking wrong.
+ */
+
+type Mode = 'dense' | 'compact' | 'comfortable' | 'spacious'
+type DtcgNode = { $type?: string; $value?: unknown; [key: string]: unknown }
+
+/** Ascending by design: each mode is roomier than the one before it. */
+const MODES: Mode[] = ['dense', 'compact', 'comfortable', 'spacious']
+/** Ascending by design: each size is larger than the one before it. */
+const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+const MEMBERS = ['box', 'panel-cap', 'sample-size', 'sample-caption-size', 'min-height', 'radius', 'padding-inline', 'padding-block', 'gap'] as const
+
+function member(mode: Mode, size: string, name: string): DtcgNode | undefined {
+  const swatch = (context as Record<Mode, DtcgNode>)[mode].swatch as DtcgNode | undefined
+  return (swatch?.[size] as DtcgNode | undefined)?.[name] as DtcgNode | undefined
+}
+
+/** Resolve a DTCG alias (`{space.space-8}`) against the primitive tree. */
+function resolvePrimitive(ref: string): number {
+  const path = ref.slice(1, -1).split('.')
+  let node: DtcgNode = primitives as DtcgNode
+  for (const key of path) node = node[key] as DtcgNode
+  return node.$value as number
+}
+
+function value(mode: Mode, size: string, name: string): number {
+  return resolvePrimitive(member(mode, size, name)?.$value as string)
+}
+
+describe('swatch sizing', () => {
+  for (const mode of MODES) {
+    for (const size of SIZES) {
+      it(`${mode} / swatch / ${size} carries every member, aliased to a primitive`, () => {
+        for (const name of MEMBERS) {
+          const node = member(mode, size, name)
+          expect(node, `${mode}.swatch.${size}.${name} is missing`).toBeDefined()
+          expect(node?.$type).toBe('number')
+          expect(String(node?.$value)).toMatch(/^\{[a-z-]+\.[a-z0-9-]+\}$/)
+          expect(typeof resolvePrimitive(node?.$value as string)).toBe('number')
+        }
+      })
+    }
+  }
+
+  for (const name of MEMBERS) {
+    it(`${name} never shrinks as the size grows`, () => {
+      for (const mode of MODES) {
+        const ladder = SIZES.map((size) => value(mode, size, name))
+        expect(ladder, `${mode}.swatch.*.${name}`).toEqual([...ladder].sort((a, b) => a - b))
+      }
+    })
+
+    it(`${name} never shrinks as the density loosens`, () => {
+      for (const size of SIZES) {
+        const ladder = MODES.map((mode) => value(mode, size, name))
+        expect(ladder, `*.swatch.${size}.${name}`).toEqual([...ladder].sort((a, b) => a - b))
+      }
+    })
+  }
+})