@headspace_designsystem/hsds-web-library 0.1.0
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/README.md +184 -0
- package/dist/components/Button/Button.d.ts +3 -0
- package/dist/components/Button/Button.d.ts.map +1 -0
- package/dist/components/Button/Button.types.d.ts +18 -0
- package/dist/components/Button/Button.types.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +3 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/demo.d.ts +2 -0
- package/dist/demo.d.ts.map +1 -0
- package/dist/hsds-web-library.es.js +1927 -0
- package/dist/hsds-web-library.es.js.map +1 -0
- package/dist/hsds-web-library.umd.js +19 -0
- package/dist/hsds-web-library.umd.js.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/theme/ThemeProvider.d.ts +14 -0
- package/dist/theme/ThemeProvider.d.ts.map +1 -0
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/theme.d.ts +3 -0
- package/dist/theme/theme.d.ts.map +1 -0
- package/dist/theme/types.d.ts +88 -0
- package/dist/theme/types.d.ts.map +1 -0
- package/dist/tokens/index.d.ts +3 -0
- package/dist/tokens/index.d.ts.map +1 -0
- package/dist/tokens/primitives/borders.d.ts +41 -0
- package/dist/tokens/primitives/borders.d.ts.map +1 -0
- package/dist/tokens/primitives/colors.d.ts +67 -0
- package/dist/tokens/primitives/colors.d.ts.map +1 -0
- package/dist/tokens/primitives/index.d.ts +6 -0
- package/dist/tokens/primitives/index.d.ts.map +1 -0
- package/dist/tokens/primitives/shadows.d.ts +38 -0
- package/dist/tokens/primitives/shadows.d.ts.map +1 -0
- package/dist/tokens/primitives/spacing.d.ts +29 -0
- package/dist/tokens/primitives/spacing.d.ts.map +1 -0
- package/dist/tokens/primitives/typography.d.ts +46 -0
- package/dist/tokens/primitives/typography.d.ts.map +1 -0
- package/dist/tokens/semantic/colors.d.ts +154 -0
- package/dist/tokens/semantic/colors.d.ts.map +1 -0
- package/dist/tokens/semantic/index.d.ts +3 -0
- package/dist/tokens/semantic/index.d.ts.map +1 -0
- package/dist/tokens/semantic/typography.d.ts +253 -0
- package/dist/tokens/semantic/typography.d.ts.map +1 -0
- package/package.json +45 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HeadSpace border tokens.
|
|
3
|
+
*
|
|
4
|
+
* Source: Figma → Tokens → Border radius tokens + Border width tokens (v2.0.0)
|
|
5
|
+
*
|
|
6
|
+
* Token names match the Figma naming convention:
|
|
7
|
+
* hs-border-radius-* and hs-border-width-*
|
|
8
|
+
*/
|
|
9
|
+
export declare const borderRadiusPrimitives: {
|
|
10
|
+
/** 0px — hs-border-radius-sharp */
|
|
11
|
+
readonly sharp: "0px";
|
|
12
|
+
/** 4px — hs-border-radius-small2X */
|
|
13
|
+
readonly small2X: "4px";
|
|
14
|
+
/** 8px — hs-border-radius-smallX */
|
|
15
|
+
readonly smallX: "8px";
|
|
16
|
+
/** 12px — hs-border-radius-small */
|
|
17
|
+
readonly small: "12px";
|
|
18
|
+
/** 16px — hs-border-radius-medium */
|
|
19
|
+
readonly medium: "16px";
|
|
20
|
+
/** 24px — hs-border-radius-large */
|
|
21
|
+
readonly large: "24px";
|
|
22
|
+
/** 32px — hs-border-radius-largeX */
|
|
23
|
+
readonly largeX: "32px";
|
|
24
|
+
/** 999px — hs-border-radius-pill */
|
|
25
|
+
readonly pill: "999px";
|
|
26
|
+
/** 50% — hs-border-radius-circle */
|
|
27
|
+
readonly circle: "50%";
|
|
28
|
+
};
|
|
29
|
+
export declare const borderWidthPrimitives: {
|
|
30
|
+
/** 0px — hs-border-width-none */
|
|
31
|
+
readonly none: "0px";
|
|
32
|
+
/** 1px — hs-border-width-smallX */
|
|
33
|
+
readonly smallX: "1px";
|
|
34
|
+
/** 2px — hs-border-width-small */
|
|
35
|
+
readonly small: "2px";
|
|
36
|
+
/** 4px — hs-border-width-medium */
|
|
37
|
+
readonly medium: "4px";
|
|
38
|
+
};
|
|
39
|
+
export type BorderRadius = keyof typeof borderRadiusPrimitives;
|
|
40
|
+
export type BorderWidth = keyof typeof borderWidthPrimitives;
|
|
41
|
+
//# sourceMappingURL=borders.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/borders.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,sBAAsB;IACjC,mCAAmC;;IAEnC,qCAAqC;;IAErC,oCAAoC;;IAEpC,oCAAoC;;IAEpC,qCAAqC;;IAErC,oCAAoC;;IAEpC,qCAAqC;;IAErC,oCAAoC;;IAEpC,oCAAoC;;CAE5B,CAAC;AAIX,eAAO,MAAM,qBAAqB;IAChC,iCAAiC;;IAEjC,mCAAmC;;IAEnC,kCAAkC;;IAElC,mCAAmC;;CAE3B,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,sBAAsB,CAAC;AAC/D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HeadSpace primitive color palette.
|
|
3
|
+
*
|
|
4
|
+
* These are the raw, context-free color values from the HeadSpace design system.
|
|
5
|
+
* DO NOT import these directly in components — use semantic tokens instead.
|
|
6
|
+
* Semantic tokens provide intent-driven names that survive rebranding.
|
|
7
|
+
*
|
|
8
|
+
* Source: Figma → Tokens → Primitive color tokens (v2.0.0)
|
|
9
|
+
*/
|
|
10
|
+
export declare const colorPrimitives: {
|
|
11
|
+
readonly white: "#ffffff";
|
|
12
|
+
readonly warmGrey100: "#f9f4f2";
|
|
13
|
+
readonly warmGrey200: "#e2ded9";
|
|
14
|
+
readonly warmGrey300: "#c6c1b9";
|
|
15
|
+
readonly warmGrey400: "#a8a5a0";
|
|
16
|
+
readonly warmGrey500: "#63605d";
|
|
17
|
+
readonly warmGrey600: "#44423f";
|
|
18
|
+
readonly warmGrey700: "#2d2c2b";
|
|
19
|
+
readonly warmGrey800: "#141313";
|
|
20
|
+
readonly coolGrey100: "#e5e7ec";
|
|
21
|
+
readonly coolGrey200: "#d2d5de";
|
|
22
|
+
readonly coolGrey300: "#9da5b8";
|
|
23
|
+
readonly coolGrey400: "#7580a3";
|
|
24
|
+
readonly coolGrey500: "#545f82";
|
|
25
|
+
readonly coolGrey600: "#2a2d55";
|
|
26
|
+
readonly coolGrey700: "#101340";
|
|
27
|
+
readonly coolGrey800: "#050726";
|
|
28
|
+
readonly blue100: "#00a4ff";
|
|
29
|
+
readonly blue200: "#0061ef";
|
|
30
|
+
readonly blue300: "#0040ea";
|
|
31
|
+
readonly blue400: "#0000db";
|
|
32
|
+
readonly orange100: "#ffa500";
|
|
33
|
+
readonly orange200: "#ff7300";
|
|
34
|
+
readonly orange300: "#fc5500";
|
|
35
|
+
readonly orange400: "#f72900";
|
|
36
|
+
readonly yellow100: "#ffe14f";
|
|
37
|
+
readonly yellow200: "#ffce00";
|
|
38
|
+
readonly yellow300: "#ffb700";
|
|
39
|
+
readonly yellow400: "#ff9900";
|
|
40
|
+
readonly green100: "#31cc66";
|
|
41
|
+
readonly green200: "#01a652";
|
|
42
|
+
readonly green300: "#02873e";
|
|
43
|
+
readonly green400: "#0b662a";
|
|
44
|
+
readonly pink100: "#ffcae7";
|
|
45
|
+
readonly pink200: "#ffa1cc";
|
|
46
|
+
readonly pink300: "#ff76b8";
|
|
47
|
+
readonly pink400: "#ff52a5";
|
|
48
|
+
readonly purple100: "#ad85d1";
|
|
49
|
+
readonly purple200: "#9e65c6";
|
|
50
|
+
readonly purple300: "#8144a8";
|
|
51
|
+
readonly purple400: "#5f2b89";
|
|
52
|
+
readonly indigo100: "#5431a5";
|
|
53
|
+
readonly indigo200: "#3b197f";
|
|
54
|
+
readonly indigo300: "#281466";
|
|
55
|
+
readonly indigo400: "#1a0c54";
|
|
56
|
+
readonly winkle100: "#727ce5";
|
|
57
|
+
readonly winkle200: "#6666cc";
|
|
58
|
+
readonly winkle300: "#524aa5";
|
|
59
|
+
readonly winkle400: "#383a82";
|
|
60
|
+
readonly red100: "#ff5a5a";
|
|
61
|
+
readonly red200: "#ef3c3c";
|
|
62
|
+
readonly red300: "#e01919";
|
|
63
|
+
readonly red400: "#bf0000";
|
|
64
|
+
};
|
|
65
|
+
export type ColorPrimitive = keyof typeof colorPrimitives;
|
|
66
|
+
export type ColorPrimitiveValue = (typeof colorPrimitives)[ColorPrimitive];
|
|
67
|
+
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ElB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HeadSpace shadow/elevation tokens.
|
|
3
|
+
*
|
|
4
|
+
* Source: Figma → Tokens → Shadow tokens (v2.0.0)
|
|
5
|
+
* Values are light mode shadows. Color: warmGrey800 (#141313) at various opacities.
|
|
6
|
+
*/
|
|
7
|
+
export declare const shadowPrimitives: {
|
|
8
|
+
/** No shadow — flat surface */
|
|
9
|
+
readonly none: "none";
|
|
10
|
+
/**
|
|
11
|
+
* default — subtle bottom shadow
|
|
12
|
+
* DROP_SHADOW: offset (0, 2), blur 0, color rgba(20,19,19,0.2)
|
|
13
|
+
*/
|
|
14
|
+
readonly default: "0px 2px 0px 0px rgba(20, 19, 19, 0.20)";
|
|
15
|
+
/**
|
|
16
|
+
* navigationTop — top navigation bar shadow (casts downward)
|
|
17
|
+
* DROP_SHADOW: offset (0, 2), blur 4, color rgba(20,19,19,0.08)
|
|
18
|
+
*/
|
|
19
|
+
readonly navigationTop: "0px 2px 4px 0px rgba(20, 19, 19, 0.08)";
|
|
20
|
+
/**
|
|
21
|
+
* navigationBottom — bottom navigation bar shadow (casts upward)
|
|
22
|
+
* DROP_SHADOW: offset (0, -2), blur 4, color rgba(20,19,19,0.08)
|
|
23
|
+
*/
|
|
24
|
+
readonly navigationBottom: "0px -2px 4px 0px rgba(20, 19, 19, 0.08)";
|
|
25
|
+
/**
|
|
26
|
+
* raised — cards, popovers, and floating elements
|
|
27
|
+
* DROP_SHADOW: offset (0, 2), blur 4, color rgba(20,19,19,0.2)
|
|
28
|
+
*/
|
|
29
|
+
readonly raised: "0px 2px 4px 0px rgba(20, 19, 19, 0.20)";
|
|
30
|
+
/**
|
|
31
|
+
* overlay — modals, drawers, and full-screen overlays
|
|
32
|
+
* DROP_SHADOW: offset (0, 0), blur 12, color rgba(20,19,19,0.2)
|
|
33
|
+
*/
|
|
34
|
+
readonly overlay: "0px 0px 12px 0px rgba(20, 19, 19, 0.20)";
|
|
35
|
+
};
|
|
36
|
+
export type Shadow = keyof typeof shadowPrimitives;
|
|
37
|
+
export type ShadowValue = (typeof shadowPrimitives)[Shadow];
|
|
38
|
+
//# sourceMappingURL=shadows.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/shadows.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;IAC3B,+BAA+B;;IAG/B;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;CAEK,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,gBAAgB,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HeadSpace spacing scale.
|
|
3
|
+
*
|
|
4
|
+
* A 16-step scale from 2px to 128px.
|
|
5
|
+
* Keys are the pixel values for direct lookup: theme.spacing[16] → '16px'
|
|
6
|
+
*
|
|
7
|
+
* Source: Figma → Tokens → Spacing tokens (v2.0.0)
|
|
8
|
+
*/
|
|
9
|
+
export declare const spacingPrimitives: {
|
|
10
|
+
readonly 2: "2px";
|
|
11
|
+
readonly 4: "4px";
|
|
12
|
+
readonly 8: "8px";
|
|
13
|
+
readonly 12: "12px";
|
|
14
|
+
readonly 16: "16px";
|
|
15
|
+
readonly 24: "24px";
|
|
16
|
+
readonly 32: "32px";
|
|
17
|
+
readonly 40: "40px";
|
|
18
|
+
readonly 48: "48px";
|
|
19
|
+
readonly 56: "56px";
|
|
20
|
+
readonly 64: "64px";
|
|
21
|
+
readonly 72: "72px";
|
|
22
|
+
readonly 80: "80px";
|
|
23
|
+
readonly 96: "96px";
|
|
24
|
+
readonly 120: "120px";
|
|
25
|
+
readonly 128: "128px";
|
|
26
|
+
};
|
|
27
|
+
export type SpacingStep = keyof typeof spacingPrimitives;
|
|
28
|
+
export type SpacingValue = (typeof spacingPrimitives)[SpacingStep];
|
|
29
|
+
//# sourceMappingURL=spacing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,iBAAiB,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HeadSpace primitive typography tokens.
|
|
3
|
+
*
|
|
4
|
+
* Defines raw font values used to compose the semantic type scale.
|
|
5
|
+
* Source: Figma → Tokens → Primitive font tokens + Type tokens (v2.0.0)
|
|
6
|
+
*
|
|
7
|
+
* Font families:
|
|
8
|
+
* - "Headspace Apercu" — primary brand font (headings, body, labels)
|
|
9
|
+
* - "Apercu Mono" — utility/code font
|
|
10
|
+
*/
|
|
11
|
+
export declare const fontFamilyPrimitives: {
|
|
12
|
+
/** Primary brand font for all headings, body, and label text */
|
|
13
|
+
readonly sans: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
|
|
14
|
+
/** Monospace font for utility/code contexts */
|
|
15
|
+
readonly mono: "\"Apercu Mono\", \"Apercu\", ui-monospace, monospace";
|
|
16
|
+
};
|
|
17
|
+
export declare const fontWeightPrimitives: {
|
|
18
|
+
readonly regular: 400;
|
|
19
|
+
readonly medium: 500;
|
|
20
|
+
readonly bold: 700;
|
|
21
|
+
};
|
|
22
|
+
export declare const lineHeightPrimitives: {
|
|
23
|
+
/** 1.0 — used for the largest display headings */
|
|
24
|
+
readonly display: "1";
|
|
25
|
+
/** 1.1 — large headings */
|
|
26
|
+
readonly heading: "1.1";
|
|
27
|
+
/** 1.2 — standard heading and label line height */
|
|
28
|
+
readonly tight: "1.2";
|
|
29
|
+
/** 1.5 — body text, links, and utility */
|
|
30
|
+
readonly body: "1.5";
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Letter spacing for desktop type styles (in px).
|
|
34
|
+
* Headings and labels use -3px tracking on desktop.
|
|
35
|
+
* Body, link, and utility styles use 0px.
|
|
36
|
+
* Utility (mono) styles use positive tracking (4px).
|
|
37
|
+
*/
|
|
38
|
+
export declare const letterSpacingDesktop: {
|
|
39
|
+
readonly heading: "-3px";
|
|
40
|
+
readonly label: "-3px";
|
|
41
|
+
readonly caption: "-3px";
|
|
42
|
+
readonly body: "0px";
|
|
43
|
+
readonly link: "0px";
|
|
44
|
+
readonly utility: "4px";
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=typography.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/tokens/primitives/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,eAAO,MAAM,oBAAoB;IAC/B,gEAAgE;;IAEhE,+CAA+C;;CAEvC,CAAC;AAIX,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAIX,eAAO,MAAM,oBAAoB;IAC/B,kDAAkD;;IAElD,2BAA2B;;IAE3B,mDAAmD;;IAEnD,0CAA0C;;CAElC,CAAC;AAIX;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOvB,CAAC"}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
export declare const semanticColors: {
|
|
2
|
+
readonly primary: {
|
|
3
|
+
/** Blue/200 — the main brand action color */
|
|
4
|
+
readonly primary: "#0061ef";
|
|
5
|
+
/** Blue/300 — darker variant for hover/pressed states */
|
|
6
|
+
readonly primaryStrong: "#0040ea";
|
|
7
|
+
};
|
|
8
|
+
readonly background: {
|
|
9
|
+
/** White — main page background */
|
|
10
|
+
readonly background: "#ffffff";
|
|
11
|
+
/** Warm Grey 100 — slightly off-white for grouped content areas */
|
|
12
|
+
readonly backgroundStrong: "#f9f4f2";
|
|
13
|
+
};
|
|
14
|
+
readonly surface: {
|
|
15
|
+
/** White — default card/panel surface */
|
|
16
|
+
readonly surface: "#ffffff";
|
|
17
|
+
/** Warm Grey 100 — slightly elevated surface */
|
|
18
|
+
readonly surfaceStrong: "#f9f4f2";
|
|
19
|
+
/** Warm Grey 200 — more prominent surface (dividers, table rows) */
|
|
20
|
+
readonly surfaceStronger: "#e2ded9";
|
|
21
|
+
/** Warm Grey 300 — highest emphasis surface */
|
|
22
|
+
readonly surfaceStrongest: "#c6c1b9";
|
|
23
|
+
/** White — surface that never changes between modes */
|
|
24
|
+
readonly surfaceStatic: "#ffffff";
|
|
25
|
+
/** White — modal dialog background (light mode) */
|
|
26
|
+
readonly surfaceModal: "#ffffff";
|
|
27
|
+
/** Cool Grey 600 — content that sits on top of a modal overlay */
|
|
28
|
+
readonly surfaceOnModal: "#2a2d55";
|
|
29
|
+
};
|
|
30
|
+
readonly overlay: {
|
|
31
|
+
/** rgba(20,19,19,0.60) — modal scrim */
|
|
32
|
+
readonly overlay60: "rgba(20, 19, 19, 0.60)";
|
|
33
|
+
/** rgba(20,19,19,0.40) — lighter scrim */
|
|
34
|
+
readonly overlay40: "rgba(20, 19, 19, 0.40)";
|
|
35
|
+
/** rgba(20,19,19,0.20) — subtle tint */
|
|
36
|
+
readonly overlay20: "rgba(20, 19, 19, 0.20)";
|
|
37
|
+
/** rgba(255,255,255,0.60) — inverse (dark bg) scrim */
|
|
38
|
+
readonly overlayInverse60: "rgba(255, 255, 255, 0.60)";
|
|
39
|
+
/** rgba(255,255,255,0.80) — light static overlay */
|
|
40
|
+
readonly overlayLightStatic80: "rgba(255, 255, 255, 0.80)";
|
|
41
|
+
readonly overlayLightStatic60: "rgba(255, 255, 255, 0.60)";
|
|
42
|
+
readonly overlayLightStatic40: "rgba(255, 255, 255, 0.40)";
|
|
43
|
+
readonly overlayLightStatic20: "rgba(255, 255, 255, 0.20)";
|
|
44
|
+
/** rgba(20,19,19,0.80) — dark static overlay */
|
|
45
|
+
readonly overlayDarkStatic80: "rgba(20, 19, 19, 0.80)";
|
|
46
|
+
readonly overlayDarkStatic60: "rgba(20, 19, 19, 0.60)";
|
|
47
|
+
readonly overlayDarkStatic40: "rgba(20, 19, 19, 0.40)";
|
|
48
|
+
readonly overlayDarkStatic20: "rgba(20, 19, 19, 0.20)";
|
|
49
|
+
};
|
|
50
|
+
readonly foreground: {
|
|
51
|
+
/** Warm Grey 700 — primary text color */
|
|
52
|
+
readonly foreground: "#2d2c2b";
|
|
53
|
+
/** Warm Grey 600 — secondary/supporting text */
|
|
54
|
+
readonly foregroundWeak: "#44423f";
|
|
55
|
+
/** Warm Grey 500 — tertiary/placeholder text */
|
|
56
|
+
readonly foregroundWeaker: "#63605d";
|
|
57
|
+
/** Warm Grey 400 — disabled text */
|
|
58
|
+
readonly foregroundWeakest: "#a8a5a0";
|
|
59
|
+
/** White — text on dark/colored surfaces */
|
|
60
|
+
readonly foregroundInverse: "#ffffff";
|
|
61
|
+
/** White — inverse text that never changes between modes */
|
|
62
|
+
readonly foregroundInverseStatic: "#ffffff";
|
|
63
|
+
/** Warm Grey 700 — text that never changes between modes */
|
|
64
|
+
readonly foregroundStatic: "#2d2c2b";
|
|
65
|
+
/** Warm Grey 600 — weak static text */
|
|
66
|
+
readonly foregroundStaticWeak: "#44423f";
|
|
67
|
+
/** Blue/200 — hyperlink text */
|
|
68
|
+
readonly foregroundLink: "#0061ef";
|
|
69
|
+
/** Blue/300 — pressed/active hyperlink */
|
|
70
|
+
readonly foregroundLinkStrong: "#0040ea";
|
|
71
|
+
/** Orange/200 — highlight/accent text (e.g. marketing callouts) */
|
|
72
|
+
readonly foregroundHighlight: "#ff7300";
|
|
73
|
+
/** Red/300 — destructive actions and error messages */
|
|
74
|
+
readonly foregroundCritical: "#e01919";
|
|
75
|
+
/** Green/300 — success messages */
|
|
76
|
+
readonly foregroundSuccess: "#02873e";
|
|
77
|
+
};
|
|
78
|
+
readonly border: {
|
|
79
|
+
/** Warm Grey 200 — default subtle border */
|
|
80
|
+
readonly border: "#e2ded9";
|
|
81
|
+
/** Warm Grey 300 — more visible border */
|
|
82
|
+
readonly borderStrong: "#c6c1b9";
|
|
83
|
+
/** Warm Grey 500 — prominent border (focus-adjacent, selected states) */
|
|
84
|
+
readonly borderStronger: "#63605d";
|
|
85
|
+
/** Warm Grey 700 — maximum contrast border */
|
|
86
|
+
readonly borderStrongest: "#2d2c2b";
|
|
87
|
+
/** White — border on dark surfaces */
|
|
88
|
+
readonly borderInverse: "#ffffff";
|
|
89
|
+
/** White — border on dark surfaces, mode-invariant */
|
|
90
|
+
readonly borderInverseStatic: "#ffffff";
|
|
91
|
+
};
|
|
92
|
+
readonly interactive: {
|
|
93
|
+
/** White — default interactive surface (e.g. secondary button bg) */
|
|
94
|
+
readonly interactive: "#ffffff";
|
|
95
|
+
/** Warm Grey 100 — hovered interactive surface */
|
|
96
|
+
readonly interactiveStrong: "#f9f4f2";
|
|
97
|
+
/** Warm Grey 200 — pressed interactive surface */
|
|
98
|
+
readonly interactiveStronger: "#e2ded9";
|
|
99
|
+
/** Warm Grey 300 — strongly active/selected surface */
|
|
100
|
+
readonly interactiveStrongest: "#c6c1b9";
|
|
101
|
+
/** White — static interactive surface (mode-invariant) */
|
|
102
|
+
readonly interactiveStatic: "#ffffff";
|
|
103
|
+
/** Warm Grey 200 — static hovered interactive surface */
|
|
104
|
+
readonly interactiveStaticStrong: "#e2ded9";
|
|
105
|
+
/** Warm Grey 700 — interactive surface on dark bg */
|
|
106
|
+
readonly interactiveInverse: "#2d2c2b";
|
|
107
|
+
/** Warm Grey 800 — hovered interactive on dark bg */
|
|
108
|
+
readonly interactiveInverseStrong: "#141313";
|
|
109
|
+
/** Warm Grey 700 — static inverse interactive */
|
|
110
|
+
readonly interactiveInverseStatic: "#2d2c2b";
|
|
111
|
+
/** Warm Grey 800 — static inverse interactive strong */
|
|
112
|
+
readonly interactiveInverseStaticStrong: "#141313";
|
|
113
|
+
};
|
|
114
|
+
readonly contrast: {
|
|
115
|
+
/** Cool Grey 100 — foreground on dark midnight surface */
|
|
116
|
+
readonly contrastForeground: "#e5e7ec";
|
|
117
|
+
/** Cool Grey 800 — dark midnight background */
|
|
118
|
+
readonly contrastBackground: "#050726";
|
|
119
|
+
/** Cool Grey 300 — weaker foreground on midnight surface */
|
|
120
|
+
readonly contrastForegroundWeak: "#9da5b8";
|
|
121
|
+
/** Cool Grey 400 */
|
|
122
|
+
readonly contrastForegroundWeaker: "#7580a3";
|
|
123
|
+
/** Cool Grey 500 */
|
|
124
|
+
readonly contrastForegroundWeakest: "#545f82";
|
|
125
|
+
/** Cool Grey 600 — weak midnight background */
|
|
126
|
+
readonly contrastBackgroundWeak: "#2a2d55";
|
|
127
|
+
/** Cool Grey 500 */
|
|
128
|
+
readonly contrastBackgroundWeaker: "#545f82";
|
|
129
|
+
};
|
|
130
|
+
readonly status: {
|
|
131
|
+
/** Red/300 — critical/error state */
|
|
132
|
+
readonly statusCritical: "#e01919";
|
|
133
|
+
/** Red/400 — stronger critical */
|
|
134
|
+
readonly statusCriticalStrong: "#bf0000";
|
|
135
|
+
/** Green/300 — success state */
|
|
136
|
+
readonly statusSuccess: "#02873e";
|
|
137
|
+
/** Green/400 — stronger success */
|
|
138
|
+
readonly statusSuccessStrong: "#0b662a";
|
|
139
|
+
/** Yellow/300 — warning state */
|
|
140
|
+
readonly statusWarning: "#ffb700";
|
|
141
|
+
/** Yellow/400 — stronger warning */
|
|
142
|
+
readonly statusWarningStrong: "#ff9900";
|
|
143
|
+
/** Blue/300 — informational state */
|
|
144
|
+
readonly statusInfo: "#0040ea";
|
|
145
|
+
/** Blue/400 — stronger info */
|
|
146
|
+
readonly statusInfoStrong: "#0000db";
|
|
147
|
+
/** Orange/200 — highlight/promotional state */
|
|
148
|
+
readonly statusHighlight: "#ff7300";
|
|
149
|
+
/** Orange/300 — stronger highlight */
|
|
150
|
+
readonly statusHighlightStrong: "#fc5500";
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
export type SemanticColors = typeof semanticColors;
|
|
154
|
+
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/tokens/semantic/colors.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,cAAc;;QAIvB,6CAA6C;;QAE7C,yDAAyD;;;;QAOzD,mCAAmC;;QAEnC,mEAAmE;;;;QAOnE,yCAAyC;;QAEzC,gDAAgD;;QAEhD,oEAAoE;;QAEpE,+CAA+C;;QAE/C,uDAAuD;;QAEvD,mDAAmD;;QAEnD,kEAAkE;;;;QAQlE,wCAAwC;;QAExC,0CAA0C;;QAE1C,wCAAwC;;QAExC,uDAAuD;;QAEvD,oDAAoD;;;;;QAKpD,gDAAgD;;;;;;;QAUhD,yCAAyC;;QAEzC,gDAAgD;;QAEhD,gDAAgD;;QAEhD,oCAAoC;;QAEpC,4CAA4C;;QAE5C,4DAA4D;;QAE5D,4DAA4D;;QAE5D,uCAAuC;;QAEvC,gCAAgC;;QAEhC,0CAA0C;;QAE1C,mEAAmE;;QAEnE,uDAAuD;;QAEvD,mCAAmC;;;;QAOnC,4CAA4C;;QAE5C,0CAA0C;;QAE1C,yEAAyE;;QAEzE,8CAA8C;;QAE9C,sCAAsC;;QAEtC,sDAAsD;;;;QAQtD,qEAAqE;;QAErE,kDAAkD;;QAElD,kDAAkD;;QAElD,uDAAuD;;QAEvD,0DAA0D;;QAE1D,yDAAyD;;QAEzD,qDAAqD;;QAErD,qDAAqD;;QAErD,iDAAiD;;QAEjD,wDAAwD;;;;QAQxD,0DAA0D;;QAE1D,+CAA+C;;QAE/C,4DAA4D;;QAE5D,oBAAoB;;QAEpB,oBAAoB;;QAEpB,+CAA+C;;QAE/C,oBAAoB;;;;QAOpB,qCAAqC;;QAErC,kCAAkC;;QAElC,gCAAgC;;QAEhC,mCAAmC;;QAEnC,iCAAiC;;QAEjC,oCAAoC;;QAEpC,qCAAqC;;QAErC,+BAA+B;;QAE/B,+CAA+C;;QAE/C,sCAAsC;;;CAGhC,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/semantic/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}
|