@lerianstudio/sindarian-ui 2.0.0-beta.20 → 2.0.0-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/lerian-wordmark/index.d.ts +6 -0
- package/dist/components/ui/lerian-wordmark/index.d.ts.map +1 -0
- package/dist/components/ui/lerian-wordmark/index.js +7 -0
- package/dist/components/ui/sidebar/sidebar-root.js +1 -1
- package/dist/esm/components/ui/lerian-wordmark/index.d.ts +6 -0
- package/dist/esm/components/ui/lerian-wordmark/index.d.ts.map +1 -0
- package/dist/esm/components/ui/lerian-wordmark/index.js +4 -0
- package/dist/esm/components/ui/sidebar/sidebar-root.js +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/fonts/OFL.txt +96 -0
- package/dist/fonts/ibm-plex-mono-latin-400.woff2 +0 -0
- package/dist/fonts/ibm-plex-mono-latin-500.woff2 +0 -0
- package/dist/fonts/ibm-plex-serif-latin-400.woff2 +0 -0
- package/dist/fonts/ibm-plex-serif-latin-500.woff2 +0 -0
- package/dist/fonts/inter-latin.woff2 +0 -0
- package/dist/fonts.css +46 -0
- package/dist/globals.css +7 -357
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/public/wordmark.svg +1 -0
- package/dist/standalone.css +10 -0
- package/dist/tokens.css +367 -0
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/lerian-wordmark/index.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAgB,EACjB,EAAE,mBAAmB,+BAiBrB"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.LerianWordmark = LerianWordmark;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
function LerianWordmark({ className, title = 'Lerian' }) {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { "data-slot": "lerian-wordmark", viewBox: "0 0 1090.88 280", role: "img", "aria-label": title, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: className, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M619.42,29.69c0,15.43-10.87,27.93-27.93,27.93s-27.93-12.51-27.93-27.93,10.86-27.93,27.92-27.93,27.93,12.51,27.93,27.93h0ZM158.64,242.4v33.54H12.13v-33.55h48.36c3.16,0,5.73-2.57,5.73-5.73V87.77c0-3.16-2.57-5.73-5.73-5.73H7.85v-34.31h98.33v188.94c0,3.16,2.57,5.73,5.73,5.73h46.74ZM168.85,179.86c0,58.52,37.29,98.33,99.47,98.33,49.15,0,79.7-30.6,86.27-67.08h-40.69c-6.29,24.54-26.97,33.91-48.61,33.91-48.85,0-53.41-45.18-53.83-55-.04-1.02.77-1.87,1.79-1.87h143.61c.76-5.26,1.13-10.42,1.13-15.44,0-32.71-20.25-91.92-95.33-91.92-57.04,0-93.8,41.26-93.81,99.07ZM314.47,158.39l-99.49.02c-1.08,0-1.94-.96-1.78-2.02,4.49-31.28,30.98-42.82,50.98-42.82,33.88,0,48.71,21.59,52.08,42.79.17,1.08-.69,2.04-1.78,2.04h0ZM867.2,83.16h0s0,0,0,0h0ZM826.87,83.16h40.33v192.83h-40.32v-24.53c0-3.09-3.92-4.41-5.79-1.95-.18.23-.35.47-.53.71h0s0,.02,0,.02h0c-.11.16-.23.32-.35.47-7.92,10.56-20.68,27.53-56.24,27.53-60.83,0-91.19-46.33-91.19-98.7,0-61.42,40.37-98.72,91.17-98.72,36.73,0,48.44,15.73,56.64,26.75l.49.66c1.86,2.49,5.81,1.18,5.81-1.93v-23.14ZM770.75,115.48c34.78,0,56.14,27.81,56.14,64.8h0c0,42-26.32,63.68-56.14,63.68-34.83,0-56.14-27.43-56.14-64.43,0-42.07,26.11-64.05,56.14-64.05ZM1063.39,101.7c14.42,14.06,21.64,36.67,21.64,67.8v106.25h-41.06v-103.99c0-43.98-22.35-56.14-45.96-56.14-31.99,0-51.6,23.22-51.6,62.92v97.21h-40.68V83.15h39.93v25.07c0,3.11,3.95,4.4,5.82,1.92,8.55-11.4,26.72-29.52,55.98-29.52,37.55,0,55.75,20.88,55.93,21.08ZM657.42,275.94v-33.54h0s-37.37,0-37.37,0c-3.16,0-5.73-2.57-5.73-5.73V83.14h-81.34v34.31h37.54c3.16,0,5.73,2.57,5.73,5.73v113.48c0,3.16-2.57,5.73-5.73,5.73h-38.14v33.55h125.03ZM499.27,119.27c0,.13-.1.23-.23.23h0s-36.31,0-36.31,0c-28.68,0-28.65,24.99-28.64,43.62,0,.46,0,.92,0,1.37v111.24c0,.13-.1.23-.23.23h-41.01c-.13,0-.23-.1-.23-.23V83.27c0-.13.1-.23.23-.23h36.49c.13,0,.23.1.23.23v24.03c0,4.05,5.24,5.65,7.49,2.28.22-.32.43-.64.65-.97,8.18-12.25,18.71-28.02,52.51-28.02h9.05v38.68Z" }) }));
|
|
7
|
+
}
|
|
@@ -12,7 +12,7 @@ const sheet_1 = require("../sheet");
|
|
|
12
12
|
*
|
|
13
13
|
* They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
|
|
14
14
|
* winning a specificity argument with `cn`. `--sidebar-width` and
|
|
15
|
-
* `--sidebar-width-collapsed` are declared in `
|
|
15
|
+
* `--sidebar-width-collapsed` are declared in `tokens.css`, so the default
|
|
16
16
|
* still ships with the stylesheet, and a consumer re-points either one with
|
|
17
17
|
* `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
|
|
18
18
|
* the mobile drawer together (see `liftWidthOverrides` below), or with a rule
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/lerian-wordmark/index.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAgB,EACjB,EAAE,mBAAmB,+BAiBrB"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function LerianWordmark({ className, title = 'Lerian' }) {
|
|
3
|
+
return (_jsx("svg", { "data-slot": "lerian-wordmark", viewBox: "0 0 1090.88 280", role: "img", "aria-label": title, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: className, children: _jsx("path", { fillRule: "evenodd", d: "M619.42,29.69c0,15.43-10.87,27.93-27.93,27.93s-27.93-12.51-27.93-27.93,10.86-27.93,27.92-27.93,27.93,12.51,27.93,27.93h0ZM158.64,242.4v33.54H12.13v-33.55h48.36c3.16,0,5.73-2.57,5.73-5.73V87.77c0-3.16-2.57-5.73-5.73-5.73H7.85v-34.31h98.33v188.94c0,3.16,2.57,5.73,5.73,5.73h46.74ZM168.85,179.86c0,58.52,37.29,98.33,99.47,98.33,49.15,0,79.7-30.6,86.27-67.08h-40.69c-6.29,24.54-26.97,33.91-48.61,33.91-48.85,0-53.41-45.18-53.83-55-.04-1.02.77-1.87,1.79-1.87h143.61c.76-5.26,1.13-10.42,1.13-15.44,0-32.71-20.25-91.92-95.33-91.92-57.04,0-93.8,41.26-93.81,99.07ZM314.47,158.39l-99.49.02c-1.08,0-1.94-.96-1.78-2.02,4.49-31.28,30.98-42.82,50.98-42.82,33.88,0,48.71,21.59,52.08,42.79.17,1.08-.69,2.04-1.78,2.04h0ZM867.2,83.16h0s0,0,0,0h0ZM826.87,83.16h40.33v192.83h-40.32v-24.53c0-3.09-3.92-4.41-5.79-1.95-.18.23-.35.47-.53.71h0s0,.02,0,.02h0c-.11.16-.23.32-.35.47-7.92,10.56-20.68,27.53-56.24,27.53-60.83,0-91.19-46.33-91.19-98.7,0-61.42,40.37-98.72,91.17-98.72,36.73,0,48.44,15.73,56.64,26.75l.49.66c1.86,2.49,5.81,1.18,5.81-1.93v-23.14ZM770.75,115.48c34.78,0,56.14,27.81,56.14,64.8h0c0,42-26.32,63.68-56.14,63.68-34.83,0-56.14-27.43-56.14-64.43,0-42.07,26.11-64.05,56.14-64.05ZM1063.39,101.7c14.42,14.06,21.64,36.67,21.64,67.8v106.25h-41.06v-103.99c0-43.98-22.35-56.14-45.96-56.14-31.99,0-51.6,23.22-51.6,62.92v97.21h-40.68V83.15h39.93v25.07c0,3.11,3.95,4.4,5.82,1.92,8.55-11.4,26.72-29.52,55.98-29.52,37.55,0,55.75,20.88,55.93,21.08ZM657.42,275.94v-33.54h0s-37.37,0-37.37,0c-3.16,0-5.73-2.57-5.73-5.73V83.14h-81.34v34.31h37.54c3.16,0,5.73,2.57,5.73,5.73v113.48c0,3.16-2.57,5.73-5.73,5.73h-38.14v33.55h125.03ZM499.27,119.27c0,.13-.1.23-.23.23h0s-36.31,0-36.31,0c-28.68,0-28.65,24.99-28.64,43.62,0,.46,0,.92,0,1.37v111.24c0,.13-.1.23-.23.23h-41.01c-.13,0-.23-.1-.23-.23V83.27c0-.13.1-.23.23-.23h36.49c.13,0,.23.1.23.23v24.03c0,4.05,5.24,5.65,7.49,2.28.22-.32.43-.64.65-.97,8.18-12.25,18.71-28.02,52.51-28.02h9.05v38.68Z" }) }));
|
|
4
|
+
}
|
|
@@ -9,7 +9,7 @@ import { Sheet, SheetContent, SheetTitle } from '../sheet/index.js';
|
|
|
9
9
|
*
|
|
10
10
|
* They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
|
|
11
11
|
* winning a specificity argument with `cn`. `--sidebar-width` and
|
|
12
|
-
* `--sidebar-width-collapsed` are declared in `
|
|
12
|
+
* `--sidebar-width-collapsed` are declared in `tokens.css`, so the default
|
|
13
13
|
* still ships with the stylesheet, and a consumer re-points either one with
|
|
14
14
|
* `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
|
|
15
15
|
* the mobile drawer together (see `liftWidthOverrides` below), or with a rule
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from './components/ui/dropdown-menu/index.js';
|
|
|
18
18
|
export * from './components/ui/input/index.js';
|
|
19
19
|
export * from './components/ui/otp-input/index.js';
|
|
20
20
|
export * from './components/ui/label/index.js';
|
|
21
|
+
export * from './components/ui/lerian-wordmark/index.js';
|
|
21
22
|
export * from './components/ui/loading-button/index.js';
|
|
22
23
|
export * from './components/ui/multiple-select/index.js';
|
|
23
24
|
export * from './components/ui/paper/index.js';
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
|
package/dist/esm/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export * from './components/ui/dropdown-menu/index.js';
|
|
|
20
20
|
export * from './components/ui/input/index.js';
|
|
21
21
|
export * from './components/ui/otp-input/index.js';
|
|
22
22
|
export * from './components/ui/label/index.js';
|
|
23
|
+
export * from './components/ui/lerian-wordmark/index.js';
|
|
23
24
|
export * from './components/ui/loading-button/index.js';
|
|
24
25
|
export * from './components/ui/multiple-select/index.js';
|
|
25
26
|
export * from './components/ui/paper/index.js';
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
IBM Plex Sans: Copyright 2019 IBM Corp. All rights reserved. With Reserved Font Name "Plex".
|
|
2
|
+
IBM Plex Serif: Copyright 2020 IBM Corp. All rights reserved. With Reserved Font Name "Plex".
|
|
3
|
+
IBM Plex Mono: Copyright 2017 IBM Corp. All rights reserved. With Reserved Font Name "Plex".
|
|
4
|
+
Inter: Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter).
|
|
5
|
+
|
|
6
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
7
|
+
This license is copied below, and is also available with a FAQ at:
|
|
8
|
+
http://scripts.sil.org/OFL
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
-----------------------------------------------------------
|
|
12
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
13
|
+
-----------------------------------------------------------
|
|
14
|
+
|
|
15
|
+
PREAMBLE
|
|
16
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
17
|
+
development of collaborative font projects, to support the font creation
|
|
18
|
+
efforts of academic and linguistic communities, and to provide a free and
|
|
19
|
+
open framework in which fonts may be shared and improved in partnership
|
|
20
|
+
with others.
|
|
21
|
+
|
|
22
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
|
23
|
+
redistributed freely as long as they are not sold by themselves. The
|
|
24
|
+
fonts, including any derivative works, can be bundled, embedded,
|
|
25
|
+
redistributed and/or sold with any software provided that any reserved
|
|
26
|
+
names are not used by derivative works. The fonts and derivatives,
|
|
27
|
+
however, cannot be released under any other type of license. The
|
|
28
|
+
requirement for fonts to remain under this license does not apply
|
|
29
|
+
to any document created using the fonts or their derivatives.
|
|
30
|
+
|
|
31
|
+
DEFINITIONS
|
|
32
|
+
"Font Software" refers to the set of files released by the Copyright
|
|
33
|
+
Holder(s) under this license and clearly marked as such. This may
|
|
34
|
+
include source files, build scripts and documentation.
|
|
35
|
+
|
|
36
|
+
"Reserved Font Name" refers to any names specified as such after the
|
|
37
|
+
copyright statement(s).
|
|
38
|
+
|
|
39
|
+
"Original Version" refers to the collection of Font Software components as
|
|
40
|
+
distributed by the Copyright Holder(s).
|
|
41
|
+
|
|
42
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
43
|
+
or substituting -- in part or in whole -- any of the components of the
|
|
44
|
+
Original Version, by changing formats or by porting the Font Software to a
|
|
45
|
+
new environment.
|
|
46
|
+
|
|
47
|
+
"Author" refers to any designer, engineer, programmer, technical
|
|
48
|
+
writer or other person who contributed to the Font Software.
|
|
49
|
+
|
|
50
|
+
PERMISSION & CONDITIONS
|
|
51
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
52
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
53
|
+
redistribute, and sell modified and unmodified copies of the Font
|
|
54
|
+
Software, subject to the following conditions:
|
|
55
|
+
|
|
56
|
+
1) Neither the Font Software nor any of its individual components,
|
|
57
|
+
in Original or Modified Versions, may be sold by itself.
|
|
58
|
+
|
|
59
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
|
60
|
+
redistributed and/or sold with any software, provided that each copy
|
|
61
|
+
contains the above copyright notice and this license. These can be
|
|
62
|
+
included either as stand-alone text files, human-readable headers or
|
|
63
|
+
in the appropriate machine-readable metadata fields within text or
|
|
64
|
+
binary files as long as those fields can be easily viewed by the user.
|
|
65
|
+
|
|
66
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
|
67
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
|
68
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
|
69
|
+
presented to the users.
|
|
70
|
+
|
|
71
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
72
|
+
Software shall not be used to promote, endorse or advertise any
|
|
73
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
|
74
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
75
|
+
permission.
|
|
76
|
+
|
|
77
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
|
78
|
+
must be distributed entirely under this license, and must not be
|
|
79
|
+
distributed under any other license. The requirement for fonts to
|
|
80
|
+
remain under this license does not apply to any document created
|
|
81
|
+
using the Font Software.
|
|
82
|
+
|
|
83
|
+
TERMINATION
|
|
84
|
+
This license becomes null and void if any of the above conditions are
|
|
85
|
+
not met.
|
|
86
|
+
|
|
87
|
+
DISCLAIMER
|
|
88
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
89
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
90
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
91
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
92
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
93
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
94
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
95
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
96
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/fonts.css
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* Inter latin, fetched from https://fonts.googleapis.com/css2?family=Inter:wght@100..900 */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: 'Lerian Inter';
|
|
4
|
+
font-style: normal;
|
|
5
|
+
font-weight: 100 900;
|
|
6
|
+
font-display: swap;
|
|
7
|
+
src: url('./fonts/inter-latin.woff2') format('woff2');
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: 'Lerian Plex Serif';
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
font-display: swap;
|
|
15
|
+
src: url('./fonts/ibm-plex-serif-latin-400.woff2') format('woff2');
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@font-face {
|
|
19
|
+
font-family: 'Lerian Plex Serif';
|
|
20
|
+
font-style: normal;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
font-display: swap;
|
|
23
|
+
src: url('./fonts/ibm-plex-serif-latin-500.woff2') format('woff2');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: 'Lerian Plex Mono';
|
|
28
|
+
font-style: normal;
|
|
29
|
+
font-weight: 400;
|
|
30
|
+
font-display: swap;
|
|
31
|
+
src: url('./fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@font-face {
|
|
35
|
+
font-family: 'Lerian Plex Mono';
|
|
36
|
+
font-style: normal;
|
|
37
|
+
font-weight: 500;
|
|
38
|
+
font-display: swap;
|
|
39
|
+
src: url('./fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:root {
|
|
43
|
+
--font-inter: 'Lerian Inter';
|
|
44
|
+
--font-plex-serif: 'Lerian Plex Serif';
|
|
45
|
+
--font-plex-mono: 'Lerian Plex Mono';
|
|
46
|
+
}
|
package/dist/globals.css
CHANGED
|
@@ -10,11 +10,18 @@
|
|
|
10
10
|
@import './components/ui/stepper/styles.css';
|
|
11
11
|
@import './components/ui/tabs/styles.css';
|
|
12
12
|
@import './components/ui/dialog/styles.css';
|
|
13
|
+
@import './tokens.css';
|
|
13
14
|
@custom-variant dark (&:is(.dark *));
|
|
14
15
|
|
|
15
16
|
@theme inline {
|
|
16
17
|
--font-sans:
|
|
17
18
|
var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
19
|
+
--font-serif:
|
|
20
|
+
var(--font-plex-serif, ui-serif), ui-serif, Georgia, Cambria,
|
|
21
|
+
'Times New Roman', Times, serif;
|
|
22
|
+
--font-mono:
|
|
23
|
+
var(--font-plex-mono, ui-monospace), ui-monospace, SFMono-Regular, Menlo,
|
|
24
|
+
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
18
25
|
|
|
19
26
|
--shadow-sidebar: 5px 0px 15px -3px hsl(var(--shadow-color) / 0.05);
|
|
20
27
|
--shadow-data-table:
|
|
@@ -210,363 +217,6 @@
|
|
|
210
217
|
}
|
|
211
218
|
}
|
|
212
219
|
|
|
213
|
-
@layer base {
|
|
214
|
-
:root {
|
|
215
|
-
color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
|
|
216
|
-
|
|
217
|
-
/*
|
|
218
|
-
Sidebar geometry. These were literals inside SidebarRoot's cva
|
|
219
|
-
(`w-[244px]` / `w-[72px]`), which a consumer could only override by
|
|
220
|
-
winning a specificity argument with `cn`. As custom properties the
|
|
221
|
-
default still ships with this sheet.
|
|
222
|
-
|
|
223
|
-
TWO places to re-point them, and only these two:
|
|
224
|
-
- on the rail, via `className="[--sidebar-width:280px]"`. SidebarRoot
|
|
225
|
-
copies exactly these two arbitrary-property classes onto the mobile
|
|
226
|
-
drawer's own element, so one class moves the rail AND the drawer.
|
|
227
|
-
- on `:root` or `html`, which every layout inherits from.
|
|
228
|
-
|
|
229
|
-
NOT on a React-tree wrapper above the rail: that reaches the rail, but
|
|
230
|
-
the mobile drawer is portalled into document.body, and custom properties
|
|
231
|
-
inherit down the DOM tree. A wrapper is not an ancestor of the portal;
|
|
232
|
-
`:root` is.
|
|
233
|
-
|
|
234
|
-
They are theme-independent on purpose: a rail is not wider in the dark.
|
|
235
|
-
*/
|
|
236
|
-
--sidebar-width: 244px;
|
|
237
|
-
--sidebar-width-collapsed: 72px;
|
|
238
|
-
|
|
239
|
-
/* Application tokens (from Figma ring-tokens) */
|
|
240
|
-
--body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
241
|
-
/*
|
|
242
|
-
--body-text and --container-text below both step one notch off base/500.
|
|
243
|
-
base/500 clears AA on white (4.86:1) but not on --body-surface, the
|
|
244
|
-
recessed page ground, where it read 4.43:1. That ground is exactly where
|
|
245
|
-
the components carrying these two tokens sit: the resting tabs trigger
|
|
246
|
-
(text-sm font-medium, and its hover fill is --card precisely because the
|
|
247
|
-
resting ground is not white), the breadcrumb page and separator, the
|
|
248
|
-
stepper item text and description. An axe crawl of the br-sfn cockpit
|
|
249
|
-
flagged .text-body-text on 2026-09-06; the ratio it printed does not
|
|
250
|
-
reproduce here, and the measured pair on this token's own ground is
|
|
251
|
-
4.40:1 at 8-bit precision (4.43:1 in float).
|
|
252
|
-
|
|
253
|
-
45% is the smallest step that clears it: 4.59:1 on --body-surface, up
|
|
254
|
-
from 4.43:1, and 5.04:1 on white. Both stay eleven notches clear of
|
|
255
|
-
--container-title (base/600), so the text-versus-title step holds.
|
|
256
|
-
|
|
257
|
-
Deliberately not stepped far enough to clear --muted (#E4E4E7), which
|
|
258
|
-
would take base/500 minus five notches and visibly darken tabs,
|
|
259
|
-
breadcrumbs and steppers. No component in THIS kit paints either token on
|
|
260
|
-
that fill. A consumer that does is a call-site fix on its side, not a
|
|
261
|
-
clean bill from here: product-console's extract-table pairs bg-muted with
|
|
262
|
-
text-body-text and reads 3.98:1 in light.
|
|
263
|
-
*/
|
|
264
|
-
--body-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
265
|
-
--body-title: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
266
|
-
--container-surface: 0 0% 100%; /* base/white = #FFFFFF */
|
|
267
|
-
--container-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
268
|
-
--container-title: 240 5% 34%; /* base/600 = #52525B */
|
|
269
|
-
--container-border: 0 0% 100%; /* #FFFFFF */
|
|
270
|
-
--link: 240 4% 16%; /* base/800 = #27272A */
|
|
271
|
-
--link-hover: 240 4% 16%; /* #27272A with 80% opacity via /80 */
|
|
272
|
-
--link-mute: 240 4% 16%; /* #27272A with 40% opacity via /40 */
|
|
273
|
-
--button-primary-surface: 240 4% 16%; /* base/800 = #27272A */
|
|
274
|
-
--button-primary-text: 0 0% 100%; /* base/white */
|
|
275
|
-
|
|
276
|
-
/* Shadcn semantic tokens (aligned with Figma) */
|
|
277
|
-
--background: 0 0% 100%; /* base/white = #FFFFFF */
|
|
278
|
-
--foreground: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
279
|
-
--card: 0 0% 100%; /* = container-surface (white) */
|
|
280
|
-
/* Held at base/500, the step --container-text just moved off: this token's
|
|
281
|
-
own ground is --card (white), where base/500 clears AA at 4.86:1. It
|
|
282
|
-
measures 3.84:1 over --muted, but no component in this kit renders it
|
|
283
|
-
there: the data table pins its own inks rather than inheriting this one
|
|
284
|
-
(`ui/table/index.tsx`: cells take text-foreground, heads take
|
|
285
|
-
text-muted-foreground), so the hovered-row ground never sits under this
|
|
286
|
-
token. */
|
|
287
|
-
--card-foreground: 240 4% 46%; /* base/500 = #71717A */
|
|
288
|
-
--popover: 0 0% 100%; /* base/white */
|
|
289
|
-
--popover-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
290
|
-
--primary: 240 4% 16%; /* base/800 = #27272A */
|
|
291
|
-
--primary-foreground: 0 0% 100%; /* base/white */
|
|
292
|
-
--secondary: 0 0% 100%; /* base/white */
|
|
293
|
-
--secondary-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
294
|
-
--muted: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
295
|
-
--muted-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
296
|
-
--accent: 56 99% 50%; /* #FEED02 (sunglow) */
|
|
297
|
-
--accent-foreground: 240 10% 4%; /* base/800 for contrast on yellow */
|
|
298
|
-
/*
|
|
299
|
-
Shadcn — Destructive. Darkened one step to red/600. red/500 under white
|
|
300
|
-
was 3.78:1, under AA, for both roles this token plays: the fill beneath
|
|
301
|
-
`--destructive-foreground` (the Critical badge, every destructive
|
|
302
|
-
button) and the plain body ink of a field/form error message on white.
|
|
303
|
-
red/600 lifts both to 4.80:1. The hue is unchanged; only the step moved.
|
|
304
|
-
*/
|
|
305
|
-
--destructive: 0 72% 51%; /* red/600 = #DC2626 */
|
|
306
|
-
--destructive-foreground: 0 0% 100%; /* white */
|
|
307
|
-
--border: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
308
|
-
--input: 0 0% 100%; /* base/white */
|
|
309
|
-
/* Lighter than --muted-foreground, which is also the label colour: a
|
|
310
|
-
placeholder that matches its own label has no hierarchy left to give.
|
|
311
|
-
Stepped off base/500 with --body-text, and for the same reason. The
|
|
312
|
-
field paints no fill of its own (`input/styles.css`: .input-wrapper is
|
|
313
|
-
border-only, .input-base is bg-transparent), so the hint sits on
|
|
314
|
-
whatever ground contains the form, and on --body-surface base/500 read
|
|
315
|
-
4.40:1. 45% brings that to 4.59:1 and 5.04:1 on white. The retired note
|
|
316
|
-
here claimed 4.4:1 was acceptable "on the shadcn-100 field", which named
|
|
317
|
-
a fill the component never paints. */
|
|
318
|
-
--input-placeholder: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
319
|
-
/* Field boundary, held to the 3:1 non-text floor (SC 1.4.11) on every ground a
|
|
320
|
-
field sits on. base/400 read 2.56:1 on white and 2.34:1 on --body-surface. */
|
|
321
|
-
--input-border: 240 4% 46%; /* base/500 = #71717A, 4.86:1 on white, 4.43:1 on body-surface */
|
|
322
|
-
/*
|
|
323
|
-
Focus ring. base/400 read 2.55:1 on white and 2.33:1 on --body-surface,
|
|
324
|
-
under the 3:1 floor a focus indicator answers to (SC 1.4.11), and this is
|
|
325
|
-
the ring every input, button and trigger in the kit paints: the wrapper
|
|
326
|
-
border on :focus-within, and the ring itself at ring-offset-0, both of
|
|
327
|
-
which touch the page ground directly. base/500 clears it on every light
|
|
328
|
-
ground: 4.84:1 on white (which is also --card and --popover here) and
|
|
329
|
-
4.40:1 on --body-surface.
|
|
330
|
-
|
|
331
|
-
It does NOT serve both themes. On the dark container surface base/500
|
|
332
|
-
measures 2.16:1, so .dark keeps the old channel as its own declaration,
|
|
333
|
-
where it reads 5.81:1 on --background and 4.08:1 on --card.
|
|
334
|
-
|
|
335
|
-
No single value clears both themes with margin, and none is a palette
|
|
336
|
-
step: the best one channel does is an off-scale 240 5% 57%, which clears
|
|
337
|
-
3:1 on all four grounds but by 0.04 on two of them. The per-theme pair
|
|
338
|
-
sits at 4.4+ light and 4.0+ dark, each half gated in
|
|
339
|
-
`__tests__/tokens-contract.test.ts`.
|
|
340
|
-
*/
|
|
341
|
-
--ring: 240 4% 46%; /* base/500 = #71717A */
|
|
342
|
-
--radius: 0.5rem;
|
|
343
|
-
|
|
344
|
-
/* Accent variants */
|
|
345
|
-
--accent-hover: 56 99% 50%; /* #FEED02 - opacity handled via /70 */
|
|
346
|
-
--accent-mute: 56 99% 50%; /* #FEED02 - opacity handled via /50 */
|
|
347
|
-
|
|
348
|
-
/* System tokens (light mode — dark overrides in .dark) */
|
|
349
|
-
--system-error: 0 84% 60%; /* red/500 = #EF4444 */
|
|
350
|
-
--system-error-surface: 0 86% 97%; /* red/50 = #FEF2F2 */
|
|
351
|
-
--system-error-h1a: 0 74% 35%; /* red/800 = #991B1B */
|
|
352
|
-
--system-error-border: 0 84% 60% / 0.5; /* #EF4444 50% */
|
|
353
|
-
--system-error-text: 0 74% 35%; /* #991B1B */
|
|
354
|
-
--system-success: 142 76% 36%; /* green/600 = #16A34A */
|
|
355
|
-
--system-success-surface: 139 76% 97%; /* green/50 = #F0FDF4 */
|
|
356
|
-
--system-success-h1a: 143 64% 24%; /* green/800 = #166534 */
|
|
357
|
-
--system-success-border: 142 76% 36% / 0.5; /* #16A34A 50% */
|
|
358
|
-
--system-success-text: 143 64% 24%; /* #166534 */
|
|
359
|
-
--system-info: 221 83% 53%; /* blue/600 = #2563EB */
|
|
360
|
-
--system-info-surface: 214 100% 97%; /* blue/50 = #EFF6FF */
|
|
361
|
-
--system-info-h1a: 224 76% 40%; /* blue/800 = #1E40AF */
|
|
362
|
-
--system-info-border: 221 83% 53% / 0.5; /* #2563EB 50% */
|
|
363
|
-
--system-info-text: 224 76% 40%; /* #1E40AF */
|
|
364
|
-
--system-alert: 48 96% 47%; /* yellow/500 = #EAB308 */
|
|
365
|
-
--system-alert-surface: 55 92% 95%; /* yellow/50 = #FEFCE8 */
|
|
366
|
-
--system-alert-h1a: 36 92% 29%; /* yellow/800 = #854D0E */
|
|
367
|
-
--system-alert-border: 48 96% 47% / 0.5; /* #EAB308 50% */
|
|
368
|
-
--system-alert-text: 36 92% 29%; /* #854D0E */
|
|
369
|
-
--system-purple: 271 81% 56%; /* purple/600 = #9333EA */
|
|
370
|
-
--system-purple-surface: 270 100% 98%; /* purple/50 = #FAF5FF */
|
|
371
|
-
--system-purple-h1a: 273 67% 39%; /* purple/800 = #6B21A8 */
|
|
372
|
-
--system-purple-border: 271 81% 56% / 0.5; /* #9333EA 50% */
|
|
373
|
-
--system-purple-text: 273 67% 39%; /* #6B21A8 */
|
|
374
|
-
|
|
375
|
-
/* Shadow color token for dark mode adaptation */
|
|
376
|
-
--shadow-color: 0 0% 0%;
|
|
377
|
-
|
|
378
|
-
/*
|
|
379
|
-
Ledger credit semantic — deliberately DISTINCT from --destructive, not an
|
|
380
|
-
alias: --destructive is an error/alarm, --credit is the accounting reading
|
|
381
|
-
of a credit amount. Deeper than --destructive (red/700 vs red/500) so the
|
|
382
|
-
two never read as the same signal. --credit-foreground mirrors --credit:
|
|
383
|
-
the red itself carries the role as text.
|
|
384
|
-
*/
|
|
385
|
-
--credit: 0 74% 42%; /* red/700 = #B91C1C */
|
|
386
|
-
--credit-foreground: 0 74% 42%; /* mirrors --credit */
|
|
387
|
-
|
|
388
|
-
/*
|
|
389
|
-
Reconciliation matte fills — the recessed track behind a balance bar, one
|
|
390
|
-
neutral step apart. Deliberately hue-neutral: the matched/unmatched signal
|
|
391
|
-
is carried by the bar's leading edge, so a tinted wall would double-encode.
|
|
392
|
-
*/
|
|
393
|
-
--matched-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
394
|
-
--unmatched-surface: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
395
|
-
|
|
396
|
-
/*
|
|
397
|
-
Chart series palette — 8 categorical slots drawn from the brand scales
|
|
398
|
-
(de-york, sunglow, cod-gray) plus the system hues, ordered so no adjacent
|
|
399
|
-
pair shares a hue neighbourhood.
|
|
400
|
-
*/
|
|
401
|
-
--chart-1: 143 59% 36%; /* de-york-600 = #26934F */
|
|
402
|
-
--chart-2: 0 72% 51%; /* red/600 = #DC2626 */
|
|
403
|
-
--chart-3: 39 98% 40%; /* sunglow-600 = #CC8402 */
|
|
404
|
-
--chart-4: 221 83% 53%; /* blue/600 = #2563EB */
|
|
405
|
-
--chart-5: 333 71% 51%; /* pink/600 = #DB2777 */
|
|
406
|
-
--chart-6: 193 82% 31%; /* cyan/700 = #0E7490 */
|
|
407
|
-
--chart-7: 272 72% 47%; /* purple/700 = #7E22CE */
|
|
408
|
-
--chart-8: 351 9% 43%; /* cod-gray-500 = #776366 */
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
.dark {
|
|
412
|
-
color-scheme: dark; /* native widgets (form controls, scrollbars) follow the theme */
|
|
413
|
-
|
|
414
|
-
/* Custom — Layout */
|
|
415
|
-
--link-hover: 240 5% 96%; /* #F4F4F5 80% (opacity via /80) */
|
|
416
|
-
--link-mute: 240 5% 96%; /* #F4F4F5 40% (opacity via /40) */
|
|
417
|
-
--container-surface: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
418
|
-
--container-text: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
419
|
-
--container-title: 0 0% 100%; /* base/white */
|
|
420
|
-
--body-surface: 240 4% 16%; /* base/800 = #27272A */
|
|
421
|
-
--body-text: 240 5% 84%; /* base/300 = #D4D4D8 */
|
|
422
|
-
--body-title: 0 0% 100%; /* base/white */
|
|
423
|
-
--link: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
424
|
-
--button-primary-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
425
|
-
--button-primary-text: 240 4% 16%; /* base/800 = #27272A */
|
|
426
|
-
--container-border: var(--border); /* shadcn/--border */
|
|
427
|
-
|
|
428
|
-
/* Shadcn — Core */
|
|
429
|
-
--background: 240 4% 16%; /* base/800 = #27272A */
|
|
430
|
-
--foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
431
|
-
--muted: 240 5% 34%; /* base/600 = #52525B */
|
|
432
|
-
/*
|
|
433
|
-
Lifted off the base scale. base/400 read 4.09:1 on --container-surface
|
|
434
|
-
(which --card aliases) and 3.01:1 on --muted, both under the 4.5 AA floor
|
|
435
|
-
for normal text, and this is the kit's universal secondary ink: every
|
|
436
|
-
TableHead column label (text-sm font-medium inside a text-sm Table),
|
|
437
|
-
every empty-state line, every form label through LABEL_VOICE_CLASS, every
|
|
438
|
-
MoneyText caption. An axe crawl of the br-sfn cockpit measured both pairs
|
|
439
|
-
on 2026-09-06; every console on this library inherited them.
|
|
440
|
-
|
|
441
|
-
80% is the smallest round step that clears both: 6.36:1 on
|
|
442
|
-
--container-surface and 4.68:1 on --muted. base/300 is the nearest scale
|
|
443
|
-
step that would also clear, but it is byte-identical to this theme's
|
|
444
|
-
--body-text, so adopting it would collapse the muted-versus-body step the
|
|
445
|
-
two tokens exist to express. Staying on the scale is worth less than
|
|
446
|
-
keeping that step, so the value leaves the scale instead.
|
|
447
|
-
|
|
448
|
-
That step is now thin, and the trade was made with eyes open: 80% sits at
|
|
449
|
-
L* 81 against --body-text at L* 85, so the two inks are 1.12:1 apart and
|
|
450
|
-
barely separable side by side. Legibility won because the weight is all
|
|
451
|
-
on one side: this token has 86 call sites and is read as prose on every
|
|
452
|
-
surface, while --body-text has one (an uppercase sidebar group label) plus
|
|
453
|
-
two derived theme keys. A reader who needs the step to be visible should
|
|
454
|
-
move --body-text, which is cheap to reposition, rather than push this one
|
|
455
|
-
back under the AA floor.
|
|
456
|
-
|
|
457
|
-
Repairs a fourth pair on the way: the disabled chip in autocomplete and
|
|
458
|
-
multiple-select paints text-muted on bg-muted-foreground, 3.01:1 before
|
|
459
|
-
and 4.68:1 now.
|
|
460
|
-
*/
|
|
461
|
-
--muted-foreground: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on container-surface and muted */
|
|
462
|
-
--card: var(--container-surface);
|
|
463
|
-
--card-foreground: var(--container-text);
|
|
464
|
-
--popover: 240 4% 16%; /* base/800 = #27272A */
|
|
465
|
-
--popover-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
466
|
-
--border: 240 5% 34%; /* base/600 = #52525B */
|
|
467
|
-
--input: 240 4% 16%; /* base/800 = #27272A */
|
|
468
|
-
/* Held at base/400 rather than stepped down with the light theme: on the
|
|
469
|
-
dark field that is already only 5.8:1, and going lighter here means
|
|
470
|
-
darker, which would push the hint under the AA floor. */
|
|
471
|
-
--input-placeholder: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on card (6.3:1); base/400 read 4.07:1 there */
|
|
472
|
-
--input-border: 240 5% 65%; /* base/400 = #A1A1AA, 4.09:1 on card; light's base/500 reads 2.15:1 there */
|
|
473
|
-
/* Held at base/400, which light had to leave: on this ground the two
|
|
474
|
-
directions disagree. base/400 reads 5.81:1 on --background and 4.08:1 on
|
|
475
|
-
--card here, while light's base/500 would read 2.16:1 on --card. */
|
|
476
|
-
--ring: 240 5% 65%; /* base/400 = #A1A1AA */
|
|
477
|
-
--primary: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
478
|
-
--primary-foreground: 240 4% 16%; /* base/800 = #27272A */
|
|
479
|
-
--secondary: 240 4% 16%; /* base/800 = #27272A */
|
|
480
|
-
--secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
481
|
-
|
|
482
|
-
/* Shadcn — Accent (Brand Lerian) */
|
|
483
|
-
--accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
|
|
484
|
-
--accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
|
|
485
|
-
--accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
|
|
486
|
-
|
|
487
|
-
/*
|
|
488
|
-
Shadcn — Destructive. Lifted to red/400 like every other red in this
|
|
489
|
-
block (--system-error, --credit, --chart-2): the light red/500 inherited
|
|
490
|
-
here before, which left `text-destructive` at 2.76:1 on a --card surface
|
|
491
|
-
and `bg-destructive`/`text-destructive-foreground` at 3.78:1. The
|
|
492
|
-
foreground inverts to red/950 — the deep end this theme already uses as
|
|
493
|
-
--system-error-surface — so the pair reads 5.94:1.
|
|
494
|
-
*/
|
|
495
|
-
--destructive: 0 91% 71%; /* red/400 = #F87171 */
|
|
496
|
-
--destructive-foreground: 0 75% 15%; /* red/950 = #450A0A */
|
|
497
|
-
|
|
498
|
-
/* Shadcn — System Error */
|
|
499
|
-
--system-error: 0 91% 71%; /* red/400 = #F87171 */
|
|
500
|
-
--system-error-surface: 0 75% 15%; /* red/950 = #450A0A */
|
|
501
|
-
--system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 */
|
|
502
|
-
--system-error-h1a: 0 96% 89%; /* red/200 = #FECACA */
|
|
503
|
-
--system-error-border: 0 94% 82% / 0.3; /* #FCA5A5 30% */
|
|
504
|
-
|
|
505
|
-
/* Shadcn — System Success */
|
|
506
|
-
--system-success: 142 69% 58%; /* green/400 = #4ADE80 */
|
|
507
|
-
--system-success-surface: 145 80% 10%; /* green/950 = #052E16 */
|
|
508
|
-
--system-success-text: 142 77% 73%; /* green/300 = #86EFAC */
|
|
509
|
-
--system-success-h1a: 141 79% 85%; /* green/200 = #BBF7D0 */
|
|
510
|
-
--system-success-border: 142 69% 58% / 0.3; /* #4ADE80 30% */
|
|
511
|
-
|
|
512
|
-
/* Shadcn — System Info */
|
|
513
|
-
--system-info: 213 94% 68%; /* blue/400 = #60A5FA */
|
|
514
|
-
--system-info-surface: 226 57% 21%; /* blue/950 = #172554 */
|
|
515
|
-
--system-info-text: 212 96% 78%; /* blue/300 = #93C5FD */
|
|
516
|
-
--system-info-h1a: 213 97% 87%; /* blue/200 = #BFDBFE */
|
|
517
|
-
--system-info-border: 213 94% 68% / 0.3; /* #60A5FA 30% */
|
|
518
|
-
|
|
519
|
-
/* Shadcn — System Alert */
|
|
520
|
-
--system-alert: 48 96% 53%; /* yellow/400 = #FACC15 */
|
|
521
|
-
--system-alert-surface: 26 83% 14%; /* yellow/950 = #422006 */
|
|
522
|
-
--system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A */
|
|
523
|
-
--system-alert-h1a: 53 98% 77%; /* yellow/200 = #FEF08A */
|
|
524
|
-
--system-alert-border: 48 96% 53% / 0.3; /* #FACC15 30% */
|
|
525
|
-
|
|
526
|
-
/* Shadcn — System Purple */
|
|
527
|
-
--system-purple: 270 95% 75%; /* purple/400 = #C084FC */
|
|
528
|
-
--system-purple-surface: 266 86% 13%; /* purple/950 = #3B0764 */
|
|
529
|
-
--system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE */
|
|
530
|
-
--system-purple-h1a: 269 100% 92%; /* purple/200 = #E9D5FF */
|
|
531
|
-
--system-purple-border: 270 95% 75% / 0.3; /* #C084FC 30% */
|
|
532
|
-
|
|
533
|
-
/* Shadow color for dark mode */
|
|
534
|
-
--shadow-color: 0 0% 100%;
|
|
535
|
-
|
|
536
|
-
/*
|
|
537
|
-
Ledger credit semantic — lifted for the dark canvas; foreground mirrors.
|
|
538
|
-
Sized by the composite the mirror actually produces, not by the plain
|
|
539
|
-
pair: components write `bg-credit/10` + `text-credit`, so the real
|
|
540
|
-
measurement is credit-as-text over a 10% credit tint composited on
|
|
541
|
-
--card. red/400 read only 3.34:1 there. red/300 — the channel this block
|
|
542
|
-
already uses for --system-error-text — reaches 4.59:1, and 5.54:1 as
|
|
543
|
-
plain text on --card.
|
|
544
|
-
|
|
545
|
-
Credit stays one step further from the canvas than --destructive
|
|
546
|
-
(red/400 here), the way light keeps credit at red/700 against a red/500
|
|
547
|
-
destructive: on a dark ground "further from the canvas" means lighter,
|
|
548
|
-
so the direction inverts but the separation holds and the two never read
|
|
549
|
-
as the same signal.
|
|
550
|
-
*/
|
|
551
|
-
--credit: 0 94% 82%; /* red/300 = #FCA5A5 */
|
|
552
|
-
--credit-foreground: 0 94% 82%; /* mirrors --credit */
|
|
553
|
-
|
|
554
|
-
/* Reconciliation matte fills — raised surfaces over base/800, one step apart. */
|
|
555
|
-
--matched-surface: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
556
|
-
--unmatched-surface: 240 5% 34%; /* base/600 = #52525B */
|
|
557
|
-
|
|
558
|
-
/* Chart series palette — same families, lifted for the dark canvas. */
|
|
559
|
-
--chart-1: 143 53% 58%; /* de-york-400 = #5BCD86 */
|
|
560
|
-
--chart-2: 0 91% 71%; /* red/400 = #F87171 */
|
|
561
|
-
--chart-3: 46 98% 57%; /* sunglow-400 = #FDCB28 */
|
|
562
|
-
--chart-4: 213 94% 68%; /* blue/400 = #60A5FA */
|
|
563
|
-
--chart-5: 329 86% 70%; /* pink/400 = #F472B6 */
|
|
564
|
-
--chart-6: 188 86% 53%; /* cyan/400 = #22D3EE */
|
|
565
|
-
--chart-7: 270 95% 75%; /* purple/400 = #C084FC */
|
|
566
|
-
--chart-8: 351 9% 69%; /* cod-gray-300 = #B7A9AB */
|
|
567
|
-
}
|
|
568
|
-
}
|
|
569
|
-
|
|
570
220
|
/* Sonner toast overrides — tinted surfaces from the system token families */
|
|
571
221
|
[data-sonner-toaster] {
|
|
572
222
|
--width: 420px;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from './components/ui/dropdown-menu';
|
|
|
18
18
|
export * from './components/ui/input';
|
|
19
19
|
export * from './components/ui/otp-input';
|
|
20
20
|
export * from './components/ui/label';
|
|
21
|
+
export * from './components/ui/lerian-wordmark';
|
|
21
22
|
export * from './components/ui/loading-button';
|
|
22
23
|
export * from './components/ui/multiple-select';
|
|
23
24
|
export * from './components/ui/paper';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAGlC,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AAGxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAG5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -37,6 +37,7 @@ __exportStar(require("./components/ui/dropdown-menu"), exports);
|
|
|
37
37
|
__exportStar(require("./components/ui/input"), exports);
|
|
38
38
|
__exportStar(require("./components/ui/otp-input"), exports);
|
|
39
39
|
__exportStar(require("./components/ui/label"), exports);
|
|
40
|
+
__exportStar(require("./components/ui/lerian-wordmark"), exports);
|
|
40
41
|
__exportStar(require("./components/ui/loading-button"), exports);
|
|
41
42
|
__exportStar(require("./components/ui/multiple-select"), exports);
|
|
42
43
|
__exportStar(require("./components/ui/paper"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg viewBox="0 0 1090.88 280" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M619.42,29.69c0,15.43-10.87,27.93-27.93,27.93s-27.93-12.51-27.93-27.93,10.86-27.93,27.92-27.93,27.93,12.51,27.93,27.93h0ZM158.64,242.4v33.54H12.13v-33.55h48.36c3.16,0,5.73-2.57,5.73-5.73V87.77c0-3.16-2.57-5.73-5.73-5.73H7.85v-34.31h98.33v188.94c0,3.16,2.57,5.73,5.73,5.73h46.74ZM168.85,179.86c0,58.52,37.29,98.33,99.47,98.33,49.15,0,79.7-30.6,86.27-67.08h-40.69c-6.29,24.54-26.97,33.91-48.61,33.91-48.85,0-53.41-45.18-53.83-55-.04-1.02.77-1.87,1.79-1.87h143.61c.76-5.26,1.13-10.42,1.13-15.44,0-32.71-20.25-91.92-95.33-91.92-57.04,0-93.8,41.26-93.81,99.07ZM314.47,158.39l-99.49.02c-1.08,0-1.94-.96-1.78-2.02,4.49-31.28,30.98-42.82,50.98-42.82,33.88,0,48.71,21.59,52.08,42.79.17,1.08-.69,2.04-1.78,2.04h0ZM867.2,83.16h0s0,0,0,0h0ZM826.87,83.16h40.33v192.83h-40.32v-24.53c0-3.09-3.92-4.41-5.79-1.95-.18.23-.35.47-.53.71h0s0,.02,0,.02h0c-.11.16-.23.32-.35.47-7.92,10.56-20.68,27.53-56.24,27.53-60.83,0-91.19-46.33-91.19-98.7,0-61.42,40.37-98.72,91.17-98.72,36.73,0,48.44,15.73,56.64,26.75l.49.66c1.86,2.49,5.81,1.18,5.81-1.93v-23.14ZM770.75,115.48c34.78,0,56.14,27.81,56.14,64.8h0c0,42-26.32,63.68-56.14,63.68-34.83,0-56.14-27.43-56.14-64.43,0-42.07,26.11-64.05,56.14-64.05ZM1063.39,101.7c14.42,14.06,21.64,36.67,21.64,67.8v106.25h-41.06v-103.99c0-43.98-22.35-56.14-45.96-56.14-31.99,0-51.6,23.22-51.6,62.92v97.21h-40.68V83.15h39.93v25.07c0,3.11,3.95,4.4,5.82,1.92,8.55-11.4,26.72-29.52,55.98-29.52,37.55,0,55.75,20.88,55.93,21.08ZM657.42,275.94v-33.54h0s-37.37,0-37.37,0c-3.16,0-5.73-2.57-5.73-5.73V83.14h-81.34v34.31h37.54c3.16,0,5.73,2.57,5.73,5.73v113.48c0,3.16-2.57,5.73-5.73,5.73h-38.14v33.55h125.03ZM499.27,119.27c0,.13-.1.23-.23.23h0s-36.31,0-36.31,0c-28.68,0-28.65,24.99-28.64,43.62,0,.46,0,.92,0,1.37v111.24c0,.13-.1.23-.23.23h-41.01c-.13,0-.23-.1-.23-.23V83.27c0-.13.1-.23.23-.23h36.49c.13,0,.23.1.23.23v24.03c0,4.05,5.24,5.65,7.49,2.28.22-.32.43-.64.65-.97,8.18-12.25,18.71-28.02,52.51-28.02h9.05v38.68Z"/></svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* One-link entry for pages without React or Tailwind. Light is :root; dark is
|
|
2
|
+
class="dark" on <html>, set by the page. No element reset. */
|
|
3
|
+
@import './fonts.css';
|
|
4
|
+
@import './tokens.css';
|
|
5
|
+
|
|
6
|
+
html {
|
|
7
|
+
font-family: var(--font-stack-sans);
|
|
8
|
+
color: hsl(var(--foreground));
|
|
9
|
+
background: hsl(var(--background));
|
|
10
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
:root {
|
|
3
|
+
color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
Sidebar geometry. These were literals inside SidebarRoot's cva
|
|
7
|
+
(`w-[244px]` / `w-[72px]`), which a consumer could only override by
|
|
8
|
+
winning a specificity argument with `cn`. As custom properties the
|
|
9
|
+
default still ships with this sheet.
|
|
10
|
+
|
|
11
|
+
TWO places to re-point them, and only these two:
|
|
12
|
+
- on the rail, via `className="[--sidebar-width:280px]"`. SidebarRoot
|
|
13
|
+
copies exactly these two arbitrary-property classes onto the mobile
|
|
14
|
+
drawer's own element, so one class moves the rail AND the drawer.
|
|
15
|
+
- on `:root` or `html`, which every layout inherits from.
|
|
16
|
+
|
|
17
|
+
NOT on a React-tree wrapper above the rail: that reaches the rail, but
|
|
18
|
+
the mobile drawer is portalled into document.body, and custom properties
|
|
19
|
+
inherit down the DOM tree. A wrapper is not an ancestor of the portal;
|
|
20
|
+
`:root` is.
|
|
21
|
+
|
|
22
|
+
They are theme-independent on purpose: a rail is not wider in the dark.
|
|
23
|
+
*/
|
|
24
|
+
--sidebar-width: 244px;
|
|
25
|
+
--sidebar-width-collapsed: 72px;
|
|
26
|
+
|
|
27
|
+
/* Application tokens (from Figma ring-tokens) */
|
|
28
|
+
--body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
29
|
+
/*
|
|
30
|
+
--body-text and --container-text below both step one notch off base/500.
|
|
31
|
+
base/500 clears AA on white (4.86:1) but not on --body-surface, the
|
|
32
|
+
recessed page ground, where it read 4.43:1. That ground is exactly where
|
|
33
|
+
the components carrying these two tokens sit: the resting tabs trigger
|
|
34
|
+
(text-sm font-medium, and its hover fill is --card precisely because the
|
|
35
|
+
resting ground is not white), the breadcrumb page and separator, the
|
|
36
|
+
stepper item text and description. An axe crawl of the br-sfn cockpit
|
|
37
|
+
flagged .text-body-text on 2026-09-06; the ratio it printed does not
|
|
38
|
+
reproduce here, and the measured pair on this token's own ground is
|
|
39
|
+
4.40:1 at 8-bit precision (4.43:1 in float).
|
|
40
|
+
|
|
41
|
+
45% is the smallest step that clears it: 4.59:1 on --body-surface, up
|
|
42
|
+
from 4.43:1, and 5.04:1 on white. Both stay eleven notches clear of
|
|
43
|
+
--container-title (base/600), so the text-versus-title step holds.
|
|
44
|
+
|
|
45
|
+
Deliberately not stepped far enough to clear --muted (#E4E4E7), which
|
|
46
|
+
would take base/500 minus five notches and visibly darken tabs,
|
|
47
|
+
breadcrumbs and steppers. No component in THIS kit paints either token on
|
|
48
|
+
that fill. A consumer that does is a call-site fix on its side, not a
|
|
49
|
+
clean bill from here: product-console's extract-table pairs bg-muted with
|
|
50
|
+
text-body-text and reads 3.98:1 in light.
|
|
51
|
+
*/
|
|
52
|
+
--body-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
53
|
+
--body-title: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
54
|
+
--container-surface: 0 0% 100%; /* base/white = #FFFFFF */
|
|
55
|
+
--container-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
56
|
+
--container-title: 240 5% 34%; /* base/600 = #52525B */
|
|
57
|
+
--container-border: 0 0% 100%; /* #FFFFFF */
|
|
58
|
+
--link: 240 4% 16%; /* base/800 = #27272A */
|
|
59
|
+
--link-hover: 240 4% 16%; /* #27272A with 80% opacity via /80 */
|
|
60
|
+
--link-mute: 240 4% 16%; /* #27272A with 40% opacity via /40 */
|
|
61
|
+
--button-primary-surface: 240 4% 16%; /* base/800 = #27272A */
|
|
62
|
+
--button-primary-text: 0 0% 100%; /* base/white */
|
|
63
|
+
|
|
64
|
+
/* Shadcn semantic tokens (aligned with Figma) */
|
|
65
|
+
--background: 0 0% 100%; /* base/white = #FFFFFF */
|
|
66
|
+
--foreground: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
67
|
+
--card: 0 0% 100%; /* = container-surface (white) */
|
|
68
|
+
/* Held at base/500, the step --container-text just moved off: this token's
|
|
69
|
+
own ground is --card (white), where base/500 clears AA at 4.86:1. It
|
|
70
|
+
measures 3.84:1 over --muted, but no component in this kit renders it
|
|
71
|
+
there: the data table pins its own inks rather than inheriting this one
|
|
72
|
+
(`ui/table/index.tsx`: cells take text-foreground, heads take
|
|
73
|
+
text-muted-foreground), so the hovered-row ground never sits under this
|
|
74
|
+
token. */
|
|
75
|
+
--card-foreground: 240 4% 46%; /* base/500 = #71717A */
|
|
76
|
+
--popover: 0 0% 100%; /* base/white */
|
|
77
|
+
--popover-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
78
|
+
--primary: 240 4% 16%; /* base/800 = #27272A */
|
|
79
|
+
--primary-foreground: 0 0% 100%; /* base/white */
|
|
80
|
+
--secondary: 0 0% 100%; /* base/white */
|
|
81
|
+
--secondary-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
82
|
+
--muted: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
83
|
+
--muted-foreground: 240 5% 34%; /* base/600 = #52525B */
|
|
84
|
+
--accent: 56 99% 50%; /* #FEED02 (sunglow) */
|
|
85
|
+
--accent-foreground: 240 10% 4%; /* base/800 for contrast on yellow */
|
|
86
|
+
/*
|
|
87
|
+
Shadcn — Destructive. Darkened one step to red/600. red/500 under white
|
|
88
|
+
was 3.78:1, under AA, for both roles this token plays: the fill beneath
|
|
89
|
+
`--destructive-foreground` (the Critical badge, every destructive
|
|
90
|
+
button) and the plain body ink of a field/form error message on white.
|
|
91
|
+
red/600 lifts both to 4.80:1. The hue is unchanged; only the step moved.
|
|
92
|
+
*/
|
|
93
|
+
--destructive: 0 72% 51%; /* red/600 = #DC2626 */
|
|
94
|
+
--destructive-foreground: 0 0% 100%; /* white */
|
|
95
|
+
--border: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
96
|
+
--input: 0 0% 100%; /* base/white */
|
|
97
|
+
/* Lighter than --muted-foreground, which is also the label colour: a
|
|
98
|
+
placeholder that matches its own label has no hierarchy left to give.
|
|
99
|
+
Stepped off base/500 with --body-text, and for the same reason. The
|
|
100
|
+
field paints no fill of its own (`input/styles.css`: .input-wrapper is
|
|
101
|
+
border-only, .input-base is bg-transparent), so the hint sits on
|
|
102
|
+
whatever ground contains the form, and on --body-surface base/500 read
|
|
103
|
+
4.40:1. 45% brings that to 4.59:1 and 5.04:1 on white. The retired note
|
|
104
|
+
here claimed 4.4:1 was acceptable "on the shadcn-100 field", which named
|
|
105
|
+
a fill the component never paints. */
|
|
106
|
+
--input-placeholder: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
107
|
+
/* Field boundary, held to the 3:1 non-text floor (SC 1.4.11) on every ground a
|
|
108
|
+
field sits on. base/400 read 2.56:1 on white and 2.34:1 on --body-surface. */
|
|
109
|
+
--input-border: 240 4% 46%; /* base/500 = #71717A, 4.86:1 on white, 4.43:1 on body-surface */
|
|
110
|
+
/*
|
|
111
|
+
Focus ring. base/400 read 2.55:1 on white and 2.33:1 on --body-surface,
|
|
112
|
+
under the 3:1 floor a focus indicator answers to (SC 1.4.11), and this is
|
|
113
|
+
the ring every input, button and trigger in the kit paints: the wrapper
|
|
114
|
+
border on :focus-within, and the ring itself at ring-offset-0, both of
|
|
115
|
+
which touch the page ground directly. base/500 clears it on every light
|
|
116
|
+
ground: 4.84:1 on white (which is also --card and --popover here) and
|
|
117
|
+
4.40:1 on --body-surface.
|
|
118
|
+
|
|
119
|
+
It does NOT serve both themes. On the dark container surface base/500
|
|
120
|
+
measures 2.16:1, so .dark keeps the old channel as its own declaration,
|
|
121
|
+
where it reads 5.81:1 on --background and 4.08:1 on --card.
|
|
122
|
+
|
|
123
|
+
No single value clears both themes with margin, and none is a palette
|
|
124
|
+
step: the best one channel does is an off-scale 240 5% 57%, which clears
|
|
125
|
+
3:1 on all four grounds but by 0.04 on two of them. The per-theme pair
|
|
126
|
+
sits at 4.4+ light and 4.0+ dark, each half gated in
|
|
127
|
+
`__tests__/tokens-contract.test.ts`.
|
|
128
|
+
*/
|
|
129
|
+
--ring: 240 4% 46%; /* base/500 = #71717A */
|
|
130
|
+
--radius: 0.5rem;
|
|
131
|
+
|
|
132
|
+
/* Accent variants */
|
|
133
|
+
--accent-hover: 56 99% 50%; /* #FEED02 - opacity handled via /70 */
|
|
134
|
+
--accent-mute: 56 99% 50%; /* #FEED02 - opacity handled via /50 */
|
|
135
|
+
|
|
136
|
+
/* System tokens (light mode — dark overrides in .dark) */
|
|
137
|
+
--system-error: 0 84% 60%; /* red/500 = #EF4444 */
|
|
138
|
+
--system-error-surface: 0 86% 97%; /* red/50 = #FEF2F2 */
|
|
139
|
+
--system-error-h1a: 0 74% 35%; /* red/800 = #991B1B */
|
|
140
|
+
--system-error-border: 0 84% 60% / 0.5; /* #EF4444 50% */
|
|
141
|
+
--system-error-text: 0 74% 35%; /* #991B1B */
|
|
142
|
+
--system-success: 142 76% 36%; /* green/600 = #16A34A */
|
|
143
|
+
--system-success-surface: 139 76% 97%; /* green/50 = #F0FDF4 */
|
|
144
|
+
--system-success-h1a: 143 64% 24%; /* green/800 = #166534 */
|
|
145
|
+
--system-success-border: 142 76% 36% / 0.5; /* #16A34A 50% */
|
|
146
|
+
--system-success-text: 143 64% 24%; /* #166534 */
|
|
147
|
+
--system-info: 221 83% 53%; /* blue/600 = #2563EB */
|
|
148
|
+
--system-info-surface: 214 100% 97%; /* blue/50 = #EFF6FF */
|
|
149
|
+
--system-info-h1a: 224 76% 40%; /* blue/800 = #1E40AF */
|
|
150
|
+
--system-info-border: 221 83% 53% / 0.5; /* #2563EB 50% */
|
|
151
|
+
--system-info-text: 224 76% 40%; /* #1E40AF */
|
|
152
|
+
--system-alert: 48 96% 47%; /* yellow/500 = #EAB308 */
|
|
153
|
+
--system-alert-surface: 55 92% 95%; /* yellow/50 = #FEFCE8 */
|
|
154
|
+
--system-alert-h1a: 36 92% 29%; /* yellow/800 = #854D0E */
|
|
155
|
+
--system-alert-border: 48 96% 47% / 0.5; /* #EAB308 50% */
|
|
156
|
+
--system-alert-text: 36 92% 29%; /* #854D0E */
|
|
157
|
+
--system-purple: 271 81% 56%; /* purple/600 = #9333EA */
|
|
158
|
+
--system-purple-surface: 270 100% 98%; /* purple/50 = #FAF5FF */
|
|
159
|
+
--system-purple-h1a: 273 67% 39%; /* purple/800 = #6B21A8 */
|
|
160
|
+
--system-purple-border: 271 81% 56% / 0.5; /* #9333EA 50% */
|
|
161
|
+
--system-purple-text: 273 67% 39%; /* #6B21A8 */
|
|
162
|
+
|
|
163
|
+
/* Shadow color token for dark mode adaptation */
|
|
164
|
+
--shadow-color: 0 0% 0%;
|
|
165
|
+
|
|
166
|
+
/*
|
|
167
|
+
Ledger credit semantic — deliberately DISTINCT from --destructive, not an
|
|
168
|
+
alias: --destructive is an error/alarm, --credit is the accounting reading
|
|
169
|
+
of a credit amount. Deeper than --destructive (red/700 vs red/500) so the
|
|
170
|
+
two never read as the same signal. --credit-foreground mirrors --credit:
|
|
171
|
+
the red itself carries the role as text.
|
|
172
|
+
*/
|
|
173
|
+
--credit: 0 74% 42%; /* red/700 = #B91C1C */
|
|
174
|
+
--credit-foreground: 0 74% 42%; /* mirrors --credit */
|
|
175
|
+
|
|
176
|
+
/*
|
|
177
|
+
Reconciliation matte fills — the recessed track behind a balance bar, one
|
|
178
|
+
neutral step apart. Deliberately hue-neutral: the matched/unmatched signal
|
|
179
|
+
is carried by the bar's leading edge, so a tinted wall would double-encode.
|
|
180
|
+
*/
|
|
181
|
+
--matched-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
182
|
+
--unmatched-surface: 240 5% 90%; /* base/200 = #E4E4E7 */
|
|
183
|
+
|
|
184
|
+
/*
|
|
185
|
+
Chart series palette — 8 categorical slots drawn from the brand scales
|
|
186
|
+
(de-york, sunglow, cod-gray) plus the system hues, ordered so no adjacent
|
|
187
|
+
pair shares a hue neighbourhood.
|
|
188
|
+
*/
|
|
189
|
+
--chart-1: 143 59% 36%; /* de-york-600 = #26934F */
|
|
190
|
+
--chart-2: 0 72% 51%; /* red/600 = #DC2626 */
|
|
191
|
+
--chart-3: 39 98% 40%; /* sunglow-600 = #CC8402 */
|
|
192
|
+
--chart-4: 221 83% 53%; /* blue/600 = #2563EB */
|
|
193
|
+
--chart-5: 333 71% 51%; /* pink/600 = #DB2777 */
|
|
194
|
+
--chart-6: 193 82% 31%; /* cyan/700 = #0E7490 */
|
|
195
|
+
--chart-7: 272 72% 47%; /* purple/700 = #7E22CE */
|
|
196
|
+
--chart-8: 351 9% 43%; /* cod-gray-500 = #776366 */
|
|
197
|
+
|
|
198
|
+
/* Plain-CSS twins of the @theme font slots in globals.css, for pages without
|
|
199
|
+
Tailwind; each must equal its --font-* value there. */
|
|
200
|
+
--font-stack-sans:
|
|
201
|
+
var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
202
|
+
--font-stack-serif:
|
|
203
|
+
var(--font-plex-serif, ui-serif), ui-serif, Georgia, Cambria,
|
|
204
|
+
'Times New Roman', Times, serif;
|
|
205
|
+
--font-stack-mono:
|
|
206
|
+
var(--font-plex-mono, ui-monospace), ui-monospace, SFMono-Regular, Menlo,
|
|
207
|
+
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.dark {
|
|
211
|
+
color-scheme: dark; /* native widgets (form controls, scrollbars) follow the theme */
|
|
212
|
+
|
|
213
|
+
/* Custom — Layout */
|
|
214
|
+
--link-hover: 240 5% 96%; /* #F4F4F5 80% (opacity via /80) */
|
|
215
|
+
--link-mute: 240 5% 96%; /* #F4F4F5 40% (opacity via /40) */
|
|
216
|
+
--container-surface: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
217
|
+
--container-text: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
218
|
+
--container-title: 0 0% 100%; /* base/white */
|
|
219
|
+
--body-surface: 240 4% 16%; /* base/800 = #27272A */
|
|
220
|
+
--body-text: 240 5% 84%; /* base/300 = #D4D4D8 */
|
|
221
|
+
--body-title: 0 0% 100%; /* base/white */
|
|
222
|
+
--link: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
223
|
+
--button-primary-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
224
|
+
--button-primary-text: 240 4% 16%; /* base/800 = #27272A */
|
|
225
|
+
--container-border: var(--border); /* shadcn/--border */
|
|
226
|
+
|
|
227
|
+
/* Shadcn — Core */
|
|
228
|
+
--background: 240 4% 16%; /* base/800 = #27272A */
|
|
229
|
+
--foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
230
|
+
--muted: 240 5% 34%; /* base/600 = #52525B */
|
|
231
|
+
/*
|
|
232
|
+
Lifted off the base scale. base/400 read 4.09:1 on --container-surface
|
|
233
|
+
(which --card aliases) and 3.01:1 on --muted, both under the 4.5 AA floor
|
|
234
|
+
for normal text, and this is the kit's universal secondary ink: every
|
|
235
|
+
TableHead column label (text-sm font-medium inside a text-sm Table),
|
|
236
|
+
every empty-state line, every form label through LABEL_VOICE_CLASS, every
|
|
237
|
+
MoneyText caption. An axe crawl of the br-sfn cockpit measured both pairs
|
|
238
|
+
on 2026-09-06; every console on this library inherited them.
|
|
239
|
+
|
|
240
|
+
80% is the smallest round step that clears both: 6.36:1 on
|
|
241
|
+
--container-surface and 4.68:1 on --muted. base/300 is the nearest scale
|
|
242
|
+
step that would also clear, but it is byte-identical to this theme's
|
|
243
|
+
--body-text, so adopting it would collapse the muted-versus-body step the
|
|
244
|
+
two tokens exist to express. Staying on the scale is worth less than
|
|
245
|
+
keeping that step, so the value leaves the scale instead.
|
|
246
|
+
|
|
247
|
+
That step is now thin, and the trade was made with eyes open: 80% sits at
|
|
248
|
+
L* 81 against --body-text at L* 85, so the two inks are 1.12:1 apart and
|
|
249
|
+
barely separable side by side. Legibility won because the weight is all
|
|
250
|
+
on one side: this token has 86 call sites and is read as prose on every
|
|
251
|
+
surface, while --body-text has one (an uppercase sidebar group label) plus
|
|
252
|
+
two derived theme keys. A reader who needs the step to be visible should
|
|
253
|
+
move --body-text, which is cheap to reposition, rather than push this one
|
|
254
|
+
back under the AA floor.
|
|
255
|
+
|
|
256
|
+
Repairs a fourth pair on the way: the disabled chip in autocomplete and
|
|
257
|
+
multiple-select paints text-muted on bg-muted-foreground, 3.01:1 before
|
|
258
|
+
and 4.68:1 now.
|
|
259
|
+
*/
|
|
260
|
+
--muted-foreground: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on container-surface and muted */
|
|
261
|
+
--card: var(--container-surface);
|
|
262
|
+
--card-foreground: var(--container-text);
|
|
263
|
+
--popover: 240 4% 16%; /* base/800 = #27272A */
|
|
264
|
+
--popover-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
265
|
+
--border: 240 5% 34%; /* base/600 = #52525B */
|
|
266
|
+
--input: 240 4% 16%; /* base/800 = #27272A */
|
|
267
|
+
/* Held at base/400 rather than stepped down with the light theme: on the
|
|
268
|
+
dark field that is already only 5.8:1, and going lighter here means
|
|
269
|
+
darker, which would push the hint under the AA floor. */
|
|
270
|
+
--input-placeholder: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on card (6.3:1); base/400 read 4.07:1 there */
|
|
271
|
+
--input-border: 240 5% 65%; /* base/400 = #A1A1AA, 4.09:1 on card; light's base/500 reads 2.15:1 there */
|
|
272
|
+
/* Held at base/400, which light had to leave: on this ground the two
|
|
273
|
+
directions disagree. base/400 reads 5.81:1 on --background and 4.08:1 on
|
|
274
|
+
--card here, while light's base/500 would read 2.16:1 on --card. */
|
|
275
|
+
--ring: 240 5% 65%; /* base/400 = #A1A1AA */
|
|
276
|
+
--primary: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
277
|
+
--primary-foreground: 240 4% 16%; /* base/800 = #27272A */
|
|
278
|
+
--secondary: 240 4% 16%; /* base/800 = #27272A */
|
|
279
|
+
--secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
|
|
280
|
+
|
|
281
|
+
/* Shadcn — Accent (Brand Lerian) */
|
|
282
|
+
--accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
|
|
283
|
+
--accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
|
|
284
|
+
--accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
|
|
285
|
+
|
|
286
|
+
/*
|
|
287
|
+
Shadcn — Destructive. Lifted to red/400 like every other red in this
|
|
288
|
+
block (--system-error, --credit, --chart-2): the light red/500 inherited
|
|
289
|
+
here before, which left `text-destructive` at 2.76:1 on a --card surface
|
|
290
|
+
and `bg-destructive`/`text-destructive-foreground` at 3.78:1. The
|
|
291
|
+
foreground inverts to red/950 — the deep end this theme already uses as
|
|
292
|
+
--system-error-surface — so the pair reads 5.94:1.
|
|
293
|
+
*/
|
|
294
|
+
--destructive: 0 91% 71%; /* red/400 = #F87171 */
|
|
295
|
+
--destructive-foreground: 0 75% 15%; /* red/950 = #450A0A */
|
|
296
|
+
|
|
297
|
+
/* Shadcn — System Error */
|
|
298
|
+
--system-error: 0 91% 71%; /* red/400 = #F87171 */
|
|
299
|
+
--system-error-surface: 0 75% 15%; /* red/950 = #450A0A */
|
|
300
|
+
--system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 */
|
|
301
|
+
--system-error-h1a: 0 96% 89%; /* red/200 = #FECACA */
|
|
302
|
+
--system-error-border: 0 94% 82% / 0.3; /* #FCA5A5 30% */
|
|
303
|
+
|
|
304
|
+
/* Shadcn — System Success */
|
|
305
|
+
--system-success: 142 69% 58%; /* green/400 = #4ADE80 */
|
|
306
|
+
--system-success-surface: 145 80% 10%; /* green/950 = #052E16 */
|
|
307
|
+
--system-success-text: 142 77% 73%; /* green/300 = #86EFAC */
|
|
308
|
+
--system-success-h1a: 141 79% 85%; /* green/200 = #BBF7D0 */
|
|
309
|
+
--system-success-border: 142 69% 58% / 0.3; /* #4ADE80 30% */
|
|
310
|
+
|
|
311
|
+
/* Shadcn — System Info */
|
|
312
|
+
--system-info: 213 94% 68%; /* blue/400 = #60A5FA */
|
|
313
|
+
--system-info-surface: 226 57% 21%; /* blue/950 = #172554 */
|
|
314
|
+
--system-info-text: 212 96% 78%; /* blue/300 = #93C5FD */
|
|
315
|
+
--system-info-h1a: 213 97% 87%; /* blue/200 = #BFDBFE */
|
|
316
|
+
--system-info-border: 213 94% 68% / 0.3; /* #60A5FA 30% */
|
|
317
|
+
|
|
318
|
+
/* Shadcn — System Alert */
|
|
319
|
+
--system-alert: 48 96% 53%; /* yellow/400 = #FACC15 */
|
|
320
|
+
--system-alert-surface: 26 83% 14%; /* yellow/950 = #422006 */
|
|
321
|
+
--system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A */
|
|
322
|
+
--system-alert-h1a: 53 98% 77%; /* yellow/200 = #FEF08A */
|
|
323
|
+
--system-alert-border: 48 96% 53% / 0.3; /* #FACC15 30% */
|
|
324
|
+
|
|
325
|
+
/* Shadcn — System Purple */
|
|
326
|
+
--system-purple: 270 95% 75%; /* purple/400 = #C084FC */
|
|
327
|
+
--system-purple-surface: 266 86% 13%; /* purple/950 = #3B0764 */
|
|
328
|
+
--system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE */
|
|
329
|
+
--system-purple-h1a: 269 100% 92%; /* purple/200 = #E9D5FF */
|
|
330
|
+
--system-purple-border: 270 95% 75% / 0.3; /* #C084FC 30% */
|
|
331
|
+
|
|
332
|
+
/* Shadow color for dark mode */
|
|
333
|
+
--shadow-color: 0 0% 100%;
|
|
334
|
+
|
|
335
|
+
/*
|
|
336
|
+
Ledger credit semantic — lifted for the dark canvas; foreground mirrors.
|
|
337
|
+
Sized by the composite the mirror actually produces, not by the plain
|
|
338
|
+
pair: components write `bg-credit/10` + `text-credit`, so the real
|
|
339
|
+
measurement is credit-as-text over a 10% credit tint composited on
|
|
340
|
+
--card. red/400 read only 3.34:1 there. red/300 — the channel this block
|
|
341
|
+
already uses for --system-error-text — reaches 4.59:1, and 5.54:1 as
|
|
342
|
+
plain text on --card.
|
|
343
|
+
|
|
344
|
+
Credit stays one step further from the canvas than --destructive
|
|
345
|
+
(red/400 here), the way light keeps credit at red/700 against a red/500
|
|
346
|
+
destructive: on a dark ground "further from the canvas" means lighter,
|
|
347
|
+
so the direction inverts but the separation holds and the two never read
|
|
348
|
+
as the same signal.
|
|
349
|
+
*/
|
|
350
|
+
--credit: 0 94% 82%; /* red/300 = #FCA5A5 */
|
|
351
|
+
--credit-foreground: 0 94% 82%; /* mirrors --credit */
|
|
352
|
+
|
|
353
|
+
/* Reconciliation matte fills — raised surfaces over base/800, one step apart. */
|
|
354
|
+
--matched-surface: 240 5% 26%; /* base/700 = #3F3F46 */
|
|
355
|
+
--unmatched-surface: 240 5% 34%; /* base/600 = #52525B */
|
|
356
|
+
|
|
357
|
+
/* Chart series palette — same families, lifted for the dark canvas. */
|
|
358
|
+
--chart-1: 143 53% 58%; /* de-york-400 = #5BCD86 */
|
|
359
|
+
--chart-2: 0 91% 71%; /* red/400 = #F87171 */
|
|
360
|
+
--chart-3: 46 98% 57%; /* sunglow-400 = #FDCB28 */
|
|
361
|
+
--chart-4: 213 94% 68%; /* blue/400 = #60A5FA */
|
|
362
|
+
--chart-5: 329 86% 70%; /* pink/400 = #F472B6 */
|
|
363
|
+
--chart-6: 188 86% 53%; /* cyan/400 = #22D3EE */
|
|
364
|
+
--chart-7: 270 95% 75%; /* purple/400 = #C084FC */
|
|
365
|
+
--chart-8: 351 9% 69%; /* cod-gray-300 = #B7A9AB */
|
|
366
|
+
}
|
|
367
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lerianstudio/sindarian-ui",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.21",
|
|
4
4
|
"description": "Sindarian UI - A UI library for Midaz Console",
|
|
5
5
|
"license": "Elastic-2.0",
|
|
6
6
|
"author": {
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"build": "npm run build:cjs && npm run build:esm && npm run copy:assets && npm run copy:styles",
|
|
42
42
|
"build:cjs": "tsc && tsc-alias -p tsconfig.json && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist",
|
|
43
43
|
"build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json --resolve-full-paths && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist/esm && node -e \"require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({type:'module'}))\" && node scripts/check-esm-output.mjs",
|
|
44
|
-
"copy:assets": "copyfiles -f src/public
|
|
45
|
-
"copy:styles": "copyfiles -u 1 src/**/*.css dist",
|
|
44
|
+
"copy:assets": "copyfiles -f \"src/public/**/*\" dist/public && copyfiles -u 1 \"src/fonts/*\" dist",
|
|
45
|
+
"copy:styles": "copyfiles -u 1 \"src/**/*.css\" dist",
|
|
46
46
|
"lint": "eslint .",
|
|
47
47
|
"lint:fix": "eslint . --fix",
|
|
48
48
|
"storybook": "storybook dev -p 6007",
|