@talelk/newui-tailwind 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talelk/newui-tailwind",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "description": "Tailwind CSS v4 layer: the newui design tokens as @theme, @utility and plugins.",
   "exports": {
@@ -17,7 +17,7 @@
     "src"
   ],
   "dependencies": {
-    "@talelk/newui-tokens": "0.1.0"
+    "@talelk/newui-tokens": "0.2.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.11",

package/src/contrast.test.ts

@@ -59,14 +59,54 @@ const PAIRS: Pair[] = [
     what: 'chart subtitle and card caption',
   },
 
+  // the shared overlay panel (atoms/lib overlayPanel + listboxRow): body ink
+  // and the checked step on the panel and on the highlighted row
+  {
+    fg: 'ink-gray-8',
+    bg: 'surface-elevation-1',
+    what: 'overlay panel body and listbox row',
+  },
+  {
+    fg: 'ink-gray-8',
+    bg: 'surface-gray-3',
+    what: 'highlighted listbox row',
+  },
+  {
+    fg: 'ink-blue-8',
+    bg: 'surface-elevation-1',
+    what: 'checked listbox row',
+  },
+  {
+    fg: 'ink-blue-8',
+    bg: 'surface-gray-3',
+    what: 'checked and highlighted listbox row',
+  },
+
   // a board column is the one tinted region muted text lands on
   { fg: 'ink-gray-8', bg: 'surface-gray-1', what: 'column heading' },
   { fg: 'ink-gray-6', bg: 'surface-gray-1', what: 'muted on a board column' },
 
   { fg: 'ink-blue-link', bg: 'surface-base', what: 'blue link on base' },
   { fg: 'ink-blue-link', bg: 'surface-elevation-1', what: 'blue link on card' },
+  // The Mist frame carries the page header's description and the sidebar.
+  { fg: 'ink-gray-6', bg: 'surface-canvas', what: 'muted text on the frame' },
+  { fg: 'ink-gray-7', bg: 'surface-canvas', what: 'nav label on the frame' },
   { fg: 'ink-blue-link', bg: 'surface-gray-1', what: 'blue link on canvas' },
 
+  // required marker on a label, on the page or a card
+  { fg: 'ink-red-8', bg: 'surface-base', what: 'required marker on base' },
+  // StatGrid deltas are toned text straight on the strip's cells, no pill.
+  {
+    fg: 'ink-green-8',
+    bg: 'surface-elevation-1',
+    what: 'good delta on a stat cell',
+  },
+  {
+    fg: 'ink-red-8',
+    bg: 'surface-elevation-1',
+    what: 'required marker on a card',
+  },
+
   {
     fg: 'ink-blue-8',
     bg: 'surface-blue-1',
@@ -158,3 +198,29 @@ for (const mode of ['light', 'dark'] as Mode[]) {
     ).toBeGreaterThanOrEqual(3)
   })
 }
+
+/**
+ * Solid buttons use the `-9` surface on hover and while open/pressed. The ramp
+ * inverts with the theme: `-9` is darker than the resting `-8` in light mode
+ * and lighter in dark mode. The foreground stays `ink-base`, so both
+ * directions are asserted — this is the pair that ships while the pointer is
+ * on the button, separate from the resting pair above.
+ */
+describe('solid button state contract (WCAG AA)', () => {
+  const SOLID_THEMES = ['gray', 'blue', 'green', 'red'] as const
+
+  for (const theme of SOLID_THEMES) {
+    for (const mode of ['light', 'dark'] as Mode[]) {
+      it(`${mode}: ${theme} solid hover/open ≥ ${AA}`, () => {
+        const ratio = contrast(
+          resolve(mode, 'ink-base'),
+          resolve(mode, `surface-${theme}-9`),
+        )
+        expect(
+          Number(ratio.toFixed(2)),
+          `ink-base on surface-${theme}-9 = ${ratio.toFixed(2)}:1`,
+        ).toBeGreaterThanOrEqual(AA)
+      })
+    }
+  }
+})

package/src/fonts/{Inter → IBMPlexSans}/LICENSE.txt

@@ -1,9 +1,10 @@
-Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 
+
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
@@ -43,7 +44,7 @@ new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 
-PERMISSION AND CONDITIONS
+PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font

package/src/fonts/IBMPlexSans/plex.css

@@ -0,0 +1,48 @@
+/* IBM Plex Sans, variable (wght 100–700, wdth 75–100), self-hosted.
+ * Source: @fontsource-variable/ibm-plex-sans 5.3.0, SIL OFL 1.1 (LICENSE.txt).
+ *
+ * One family, two jobs: the interface face at 100% width, and the condensed
+ * face (`font-stretch: 85%`, the `font-condensed` utility) for table headers
+ * and narrow columns. Its default figures are tabular, so numbers align in
+ * columns without `tnum`. Latin is the common download; Latin Extended loads
+ * only when a page uses it. */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 100 700;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url("IBMPlexSans-latin-normal.var.woff2?v=5.3.0") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 100 700;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url("IBMPlexSans-latin-ext-normal.var.woff2?v=5.3.0") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 100 700;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url("IBMPlexSans-latin-italic.var.woff2?v=5.3.0") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 100 700;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url("IBMPlexSans-latin-ext-italic.var.woff2?v=5.3.0") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}