@gsk_poc/components 0.1.1

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.
Files changed (9) hide show
  1. package/dist/index.js +67 -0
  2. package/dist/index.js.map +1 -0
  3. package/dist/index.mjs +59 -0
  4. package/dist/index.mjs.map +1 -0
  5. package/package.json +73 -0
  6. package/styles/tokens-mapped.css +244 -0
  7. package/styles/tokens.css +807 -0
  8. package/tokens/design-tokens.dtcg.json +3514 -0
  9. package/tokens/tokens.json +3514 -0
package/dist/index.js ADDED
@@ -0,0 +1,67 @@
1
+ 'use strict';
2
+
3
+ var untitledUiBase = require('@gsk/untitled-ui-base');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __defProps = Object.defineProperties;
8
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
9
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ function GSKButton(_a) {
38
+ var _b = _a, { children, variant = "primary" } = _b, props = __objRest(_b, ["children", "variant"]);
39
+ return /* @__PURE__ */ jsxRuntime.jsx(
40
+ "button",
41
+ __spreadProps(__spreadValues({
42
+ className: variant === "primary" ? "gsk-button-primary" : "gsk-button-secondary",
43
+ style: {
44
+ padding: "var(--spacing-xl, 10px) var(--spacing-2xl, 20px)",
45
+ background: variant === "primary" ? "var(--color-brand-600, #f36633)" : "var(--color-gray-600, #6c757d)",
46
+ color: "var(--color-white, white)",
47
+ border: "none",
48
+ borderRadius: "var(--radius-md, 6px)",
49
+ cursor: "pointer",
50
+ fontSize: "var(--font-size-md, 16px)",
51
+ fontFamily: "var(--font-family-body, Arial)"
52
+ }
53
+ }, props), {
54
+ children
55
+ })
56
+ );
57
+ }
58
+
59
+ exports.GSKButton = GSKButton;
60
+ Object.keys(untitledUiBase).forEach(function (k) {
61
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
62
+ enumerable: true,
63
+ get: function () { return untitledUiBase[k]; }
64
+ });
65
+ });
66
+ //# sourceMappingURL=index.js.map
67
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/GSKButton/GSKButton.tsx"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAAS,UAAU,EAAA,EAA6D;AAA7D,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,QAAA,EAAU,UAAU,SAAA,EARhD,GAQ0B,IAAoC,KAAA,GAAA,SAAA,CAApC,EAAA,EAAoC,CAAlC,UAAA,EAAU,SAAA,CAAA,CAAA;AACpC,EAAA,uBACEA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,OAAA,KAAY,SAAA,GAAY,oBAAA,GAAuB,sBAAA;AAAA,MAC1D,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,kDAAA;AAAA,QACT,UAAA,EAAY,OAAA,KAAY,SAAA,GAAY,iCAAA,GAAoC,gCAAA;AAAA,QACxE,KAAA,EAAO,2BAAA;AAAA,QACP,MAAA,EAAQ,MAAA;AAAA,QACR,YAAA,EAAc,uBAAA;AAAA,QACd,MAAA,EAAQ,SAAA;AAAA,QACR,QAAA,EAAU,2BAAA;AAAA,QACV,UAAA,EAAY;AAAA;AACd,KAAA,EACI,KAAA,CAAA,EAZL;AAAA,MAcE;AAAA,KAAA;AAAA,GACH;AAEJ","file":"index.js","sourcesContent":["import React from 'react';\r\n\r\nexport interface GSKButtonProps {\r\n children: React.ReactNode;\r\n variant?: 'primary' | 'secondary';\r\n onClick?: () => void;\r\n}\r\n\r\nexport function GSKButton({ children, variant = 'primary', ...props }: GSKButtonProps) {\r\n return (\r\n <button \r\n className={variant === 'primary' ? 'gsk-button-primary' : 'gsk-button-secondary'}\r\n style={{\r\n padding: 'var(--spacing-xl, 10px) var(--spacing-2xl, 20px)',\r\n background: variant === 'primary' ? 'var(--color-brand-600, #f36633)' : 'var(--color-gray-600, #6c757d)',\r\n color: 'var(--color-white, white)',\r\n border: 'none',\r\n borderRadius: 'var(--radius-md, 6px)',\r\n cursor: 'pointer',\r\n fontSize: 'var(--font-size-md, 16px)',\r\n fontFamily: 'var(--font-family-body, Arial)',\r\n }}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,59 @@
1
+ export * from '@gsk/untitled-ui-base';
2
+ import { jsx } from 'react/jsx-runtime';
3
+
4
+ var __defProp = Object.defineProperty;
5
+ var __defProps = Object.defineProperties;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
+ var __spreadValues = (a, b) => {
12
+ for (var prop in b || (b = {}))
13
+ if (__hasOwnProp.call(b, prop))
14
+ __defNormalProp(a, prop, b[prop]);
15
+ if (__getOwnPropSymbols)
16
+ for (var prop of __getOwnPropSymbols(b)) {
17
+ if (__propIsEnum.call(b, prop))
18
+ __defNormalProp(a, prop, b[prop]);
19
+ }
20
+ return a;
21
+ };
22
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
23
+ var __objRest = (source, exclude) => {
24
+ var target = {};
25
+ for (var prop in source)
26
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
27
+ target[prop] = source[prop];
28
+ if (source != null && __getOwnPropSymbols)
29
+ for (var prop of __getOwnPropSymbols(source)) {
30
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
31
+ target[prop] = source[prop];
32
+ }
33
+ return target;
34
+ };
35
+ function GSKButton(_a) {
36
+ var _b = _a, { children, variant = "primary" } = _b, props = __objRest(_b, ["children", "variant"]);
37
+ return /* @__PURE__ */ jsx(
38
+ "button",
39
+ __spreadProps(__spreadValues({
40
+ className: variant === "primary" ? "gsk-button-primary" : "gsk-button-secondary",
41
+ style: {
42
+ padding: "var(--spacing-xl, 10px) var(--spacing-2xl, 20px)",
43
+ background: variant === "primary" ? "var(--color-brand-600, #f36633)" : "var(--color-gray-600, #6c757d)",
44
+ color: "var(--color-white, white)",
45
+ border: "none",
46
+ borderRadius: "var(--radius-md, 6px)",
47
+ cursor: "pointer",
48
+ fontSize: "var(--font-size-md, 16px)",
49
+ fontFamily: "var(--font-family-body, Arial)"
50
+ }
51
+ }, props), {
52
+ children
53
+ })
54
+ );
55
+ }
56
+
57
+ export { GSKButton };
58
+ //# sourceMappingURL=index.mjs.map
59
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/GSKButton/GSKButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAAS,UAAU,EAAA,EAA6D;AAA7D,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,QAAA,EAAU,UAAU,SAAA,EARhD,GAQ0B,IAAoC,KAAA,GAAA,SAAA,CAApC,EAAA,EAAoC,CAAlC,UAAA,EAAU,SAAA,CAAA,CAAA;AACpC,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,OAAA,KAAY,SAAA,GAAY,oBAAA,GAAuB,sBAAA;AAAA,MAC1D,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,kDAAA;AAAA,QACT,UAAA,EAAY,OAAA,KAAY,SAAA,GAAY,iCAAA,GAAoC,gCAAA;AAAA,QACxE,KAAA,EAAO,2BAAA;AAAA,QACP,MAAA,EAAQ,MAAA;AAAA,QACR,YAAA,EAAc,uBAAA;AAAA,QACd,MAAA,EAAQ,SAAA;AAAA,QACR,QAAA,EAAU,2BAAA;AAAA,QACV,UAAA,EAAY;AAAA;AACd,KAAA,EACI,KAAA,CAAA,EAZL;AAAA,MAcE;AAAA,KAAA;AAAA,GACH;AAEJ","file":"index.mjs","sourcesContent":["import React from 'react';\r\n\r\nexport interface GSKButtonProps {\r\n children: React.ReactNode;\r\n variant?: 'primary' | 'secondary';\r\n onClick?: () => void;\r\n}\r\n\r\nexport function GSKButton({ children, variant = 'primary', ...props }: GSKButtonProps) {\r\n return (\r\n <button \r\n className={variant === 'primary' ? 'gsk-button-primary' : 'gsk-button-secondary'}\r\n style={{\r\n padding: 'var(--spacing-xl, 10px) var(--spacing-2xl, 20px)',\r\n background: variant === 'primary' ? 'var(--color-brand-600, #f36633)' : 'var(--color-gray-600, #6c757d)',\r\n color: 'var(--color-white, white)',\r\n border: 'none',\r\n borderRadius: 'var(--radius-md, 6px)',\r\n cursor: 'pointer',\r\n fontSize: 'var(--font-size-md, 16px)',\r\n fontFamily: 'var(--font-family-body, Arial)',\r\n }}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}"]}
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@gsk_poc/components",
3
+ "version": "0.1.1",
4
+ "description": "GSK custom component library with design tokens",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "files": [
9
+ "dist",
10
+ "styles",
11
+ "tokens",
12
+ "LICENSE",
13
+ "README.md"
14
+ ],
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/index.d.ts",
18
+ "import": "./dist/index.mjs",
19
+ "require": "./dist/index.js"
20
+ },
21
+ "./styles/*": "./styles/*",
22
+ "./tokens/*": "./tokens/*"
23
+ },
24
+ "scripts": {
25
+ "build": "tsup",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build",
28
+ "test": "echo \"No tests yet\""
29
+ },
30
+ "keywords": [
31
+ "react",
32
+ "components",
33
+ "design-system",
34
+ "gsk"
35
+ ],
36
+ "author": "GSK",
37
+ "license": "MIT",
38
+ "peerDependencies": {
39
+ "react": "^18.0.0 || ^19.0.0",
40
+ "react-dom": "^18.0.0 || ^19.0.0"
41
+ },
42
+ "dependencies": {
43
+ "@gsk_poc/untitled-ui-base": "^0.1.1",
44
+ "@tailwindcss/vite": "^4.1.17",
45
+ "react-is": "^19.2.1",
46
+ "tailwind-merge": "^3.4.0",
47
+ "tailwindcss": "^4.1.17"
48
+ },
49
+ "devDependencies": {
50
+ "@chromatic-com/storybook": "^4.1.3",
51
+ "@storybook/addon-a11y": "^10.1.4",
52
+ "@storybook/addon-docs": "^10.1.4",
53
+ "@storybook/addon-onboarding": "^10.1.4",
54
+ "@storybook/addon-themes": "^10.1.4",
55
+ "@storybook/addon-vitest": "^10.1.4",
56
+ "@storybook/react-vite": "^10.1.4",
57
+ "@tailwindcss/postcss": "^4.1.17",
58
+ "@types/node": "^24.2.1",
59
+ "@types/react": "^19.1.9",
60
+ "@types/react-dom": "^19.1.7",
61
+ "@vitejs/plugin-react": "^5.1.1",
62
+ "@vitest/browser-playwright": "^4.0.15",
63
+ "@vitest/coverage-v8": "^4.0.15",
64
+ "playwright": "^1.57.0",
65
+ "react": "^19.1.1",
66
+ "react-dom": "^19.1.1",
67
+ "storybook": "^10.1.4",
68
+ "tsup": "^8.3.5",
69
+ "typescript": "^5.9.2",
70
+ "vite": "^7.2.6",
71
+ "vitest": "^4.0.15"
72
+ }
73
+ }
package/styles/tokens-mapped.css ADDED
@@ -0,0 +1,244 @@
1
+ /**
2
+ * Token Bridge: Maps GSK design tokens to Untitled UI variable names
3
+ * This file translates between your Figma token structure and Untitled UI's expected CSS variables
4
+ * Auto-generated - do not edit manually
5
+ */
6
+
7
+ :root {
8
+ /* Base colors */
9
+ --color-white: var(--colors-base-white);
10
+ --color-black: var(--colors-base-black);
11
+ --color-transparent: var(--colors-base-transparent);
12
+
13
+ /* Gray scale - using gray-light-mode as default */
14
+ --color-gray-25: var(--colors-gray-light-mode-25);
15
+ --color-gray-50: var(--colors-gray-light-mode-50);
16
+ --color-gray-100: var(--colors-gray-light-mode-100);
17
+ --color-gray-200: var(--colors-gray-light-mode-200);
18
+ --color-gray-300: var(--colors-gray-light-mode-300);
19
+ --color-gray-400: var(--colors-gray-light-mode-400);
20
+ --color-gray-500: var(--colors-gray-light-mode-500);
21
+ --color-gray-600: var(--colors-gray-light-mode-600);
22
+ --color-gray-700: var(--colors-gray-light-mode-700);
23
+ --color-gray-800: var(--colors-gray-light-mode-800);
24
+ --color-gray-900: var(--colors-gray-light-mode-900);
25
+ --color-gray-950: var(--colors-gray-light-mode-950);
26
+
27
+ /* Brand colors */
28
+ --color-brand-25: var(--colors-brand-25);
29
+ --color-brand-50: var(--colors-brand-50);
30
+ --color-brand-100: var(--colors-brand-100);
31
+ --color-brand-200: var(--colors-brand-200);
32
+ --color-brand-300: var(--colors-brand-300);
33
+ --color-brand-400: var(--colors-brand-400);
34
+ --color-brand-500: var(--colors-brand-500);
35
+ --color-brand-600: var(--colors-brand-600);
36
+ --color-brand-700: var(--colors-brand-700);
37
+ --color-brand-800: var(--colors-brand-800);
38
+ --color-brand-900: var(--colors-brand-900);
39
+ --color-brand-950: var(--colors-brand-950);
40
+
41
+ /* Error colors */
42
+ --color-error-25: var(--colors-error-25);
43
+ --color-error-50: var(--colors-error-50);
44
+ --color-error-100: var(--colors-error-100);
45
+ --color-error-200: var(--colors-error-200);
46
+ --color-error-300: var(--colors-error-300);
47
+ --color-error-400: var(--colors-error-400);
48
+ --color-error-500: var(--colors-error-500);
49
+ --color-error-600: var(--colors-error-600);
50
+ --color-error-700: var(--colors-error-700);
51
+ --color-error-800: var(--colors-error-800);
52
+ --color-error-900: var(--colors-error-900);
53
+ --color-error-950: var(--colors-error-950);
54
+
55
+ /* Warning colors */
56
+ --color-warning-25: var(--colors-warning-25);
57
+ --color-warning-50: var(--colors-warning-50);
58
+ --color-warning-100: var(--colors-warning-100);
59
+ --color-warning-200: var(--colors-warning-200);
60
+ --color-warning-300: var(--colors-warning-300);
61
+ --color-warning-400: var(--colors-warning-400);
62
+ --color-warning-500: var(--colors-warning-500);
63
+ --color-warning-600: var(--colors-warning-600);
64
+ --color-warning-700: var(--colors-warning-700);
65
+ --color-warning-800: var(--colors-warning-800);
66
+ --color-warning-900: var(--colors-warning-900);
67
+ --color-warning-950: var(--colors-warning-950);
68
+
69
+ /* Success colors */
70
+ --color-success-25: var(--colors-success-25);
71
+ --color-success-50: var(--colors-success-50);
72
+ --color-success-100: var(--colors-success-100);
73
+ --color-success-200: var(--colors-success-200);
74
+ --color-success-300: var(--colors-success-300);
75
+ --color-success-400: var(--colors-success-400);
76
+ --color-success-500: var(--colors-success-500);
77
+ --color-success-600: var(--colors-success-600);
78
+ --color-success-700: var(--colors-success-700);
79
+ --color-success-800: var(--colors-success-800);
80
+ --color-success-900: var(--colors-success-900);
81
+ --color-success-950: var(--colors-success-950);
82
+
83
+ /* Text colors - semantic mapping */
84
+ --color-text-primary: var(--colors-text-text-primary-900);
85
+ --color-text-primary-on-brand: var(--colors-text-text-primary-on-brand);
86
+ --color-text-secondary: var(--colors-text-text-secondary-700);
87
+ --color-text-secondary-hover: var(--colors-text-text-secondary-hover);
88
+ --color-text-tertiary: var(--colors-text-text-tertiary-600);
89
+ --color-text-tertiary-hover: var(--colors-text-text-tertiary-hover);
90
+ --color-text-quaternary: var(--colors-text-text-quaternary-500);
91
+ --color-text-white: var(--colors-text-text-white);
92
+ --color-text-disabled: var(--colors-text-text-disabled);
93
+ --color-text-placeholder: var(--colors-text-text-placeholder);
94
+ --color-text-brand-primary: var(--colors-text-text-brand-primary-900);
95
+ --color-text-brand-secondary: var(--colors-text-text-brand-secondary-700);
96
+ --color-text-brand-tertiary: var(--colors-text-text-brand-tertiary-600);
97
+ --color-text-error-primary: var(--colors-text-text-error-primary-600);
98
+ --color-text-warning-primary: var(--colors-text-text-warning-primary-600);
99
+ --color-text-success-primary: var(--colors-text-text-success-primary-600);
100
+
101
+ /* Border colors - semantic mapping */
102
+ --color-border-primary: var(--colors-border-border-primary);
103
+ --color-border-secondary: var(--colors-border-border-secondary);
104
+ --color-border-tertiary: var(--colors-border-border-tertiary);
105
+ --color-border-disabled: var(--colors-border-border-disabled);
106
+ --color-border-brand: var(--colors-border-border-brand);
107
+ --color-border-error: var(--colors-border-border-error);
108
+
109
+ /* Foreground colors - semantic mapping */
110
+ --color-fg-primary: var(--colors-foreground-fg-primary-900);
111
+ --color-fg-secondary: var(--colors-foreground-fg-secondary-700);
112
+ --color-fg-tertiary: var(--colors-foreground-fg-tertiary-600);
113
+ --color-fg-quaternary: var(--colors-foreground-fg-quaternary-400);
114
+ --color-fg-white: var(--colors-foreground-fg-white);
115
+ --color-fg-disabled: var(--colors-foreground-fg-disabled);
116
+ --color-fg-brand-primary: var(--colors-foreground-fg-brand-primary-600);
117
+ --color-fg-brand-secondary: var(--colors-foreground-fg-brand-secondary-500);
118
+ --color-fg-error-primary: var(--colors-foreground-fg-error-primary);
119
+ --color-fg-error-secondary: var(--colors-foreground-fg-error-secondary);
120
+ --color-fg-warning-primary: var(--colors-foreground-fg-warning-primary);
121
+ --color-fg-success-primary: var(--colors-foreground-fg-success-primary);
122
+
123
+ /* Background colors - semantic mapping */
124
+ --color-bg-primary: var(--colors-background-bg-primary);
125
+ --color-bg-primary-hover: var(--colors-background-bg-primary-hover);
126
+ --color-bg-primary-solid: var(--colors-background-bg-primary-solid);
127
+ --color-bg-secondary: var(--colors-background-bg-secondary);
128
+ --color-bg-secondary-hover: var(--colors-background-bg-secondary-hover);
129
+ --color-bg-secondary-solid: var(--colors-background-bg-secondary-solid);
130
+ --color-bg-tertiary: var(--colors-background-bg-tertiary);
131
+ --color-bg-quaternary: var(--colors-background-bg-quaternary);
132
+ --color-bg-active: var(--colors-background-bg-active);
133
+ --color-bg-disabled: var(--colors-background-bg-disabled);
134
+ --color-bg-overlay: var(--colors-background-bg-overlay);
135
+ --color-bg-brand-primary: var(--colors-background-bg-brand-primary);
136
+ --color-bg-brand-secondary: var(--colors-background-bg-brand-secondary);
137
+ --color-bg-brand-solid: var(--colors-background-bg-brand-solid);
138
+ --color-bg-brand-solid-hover: var(--colors-background-bg-brand-solid-hover);
139
+ --color-bg-error-primary: var(--colors-background-bg-error-primary);
140
+ --color-bg-error-secondary: var(--colors-background-bg-error-secondary);
141
+ --color-bg-error-solid: var(--colors-background-bg-error-solid);
142
+ --color-bg-warning-primary: var(--colors-background-bg-warning-primary);
143
+ --color-bg-warning-secondary: var(--colors-background-bg-warning-secondary);
144
+ --color-bg-warning-solid: var(--colors-background-bg-warning-solid);
145
+ --color-bg-success-primary: var(--colors-background-bg-success-primary);
146
+ --color-bg-success-secondary: var(--colors-background-bg-success-secondary);
147
+ --color-bg-success-solid: var(--colors-background-bg-success-solid);
148
+
149
+ /* Focus ring */
150
+ --color-focus-ring: var(--colors-effects-focus-rings-focus-ring);
151
+ --color-focus-ring-error: var(--colors-effects-focus-rings-focus-ring-error);
152
+
153
+ /* Shadows */
154
+ --shadow-xs: 0px 1px 2px var(--colors-effects-shadows-shadow-xs);
155
+ --shadow-sm: 0px 1px 2px var(--colors-effects-shadows-shadow-sm-01), 0px 1px 3px var(--colors-effects-shadows-shadow-sm-02);
156
+ --shadow-md: 0px 2px 4px var(--colors-effects-shadows-shadow-md-01), 0px 4px 8px var(--colors-effects-shadows-shadow-md-02);
157
+ --shadow-lg: 0px 4px 6px var(--colors-effects-shadows-shadow-lg-01), 0px 10px 15px var(--colors-effects-shadows-shadow-lg-02), 0px 2px 4px var(--colors-effects-shadows-shadow-lg-03);
158
+ --shadow-xl: 0px 8px 10px var(--colors-effects-shadows-shadow-xl-01), 0px 20px 25px var(--colors-effects-shadows-shadow-xl-02), 0px 3px 4px var(--colors-effects-shadows-shadow-xl-03);
159
+ --shadow-2xl: 0px 25px 50px var(--colors-effects-shadows-shadow-2xl-01), 0px 10px 20px var(--colors-effects-shadows-shadow-2xl-02);
160
+ --shadow-3xl: 0px 35px 60px var(--colors-effects-shadows-shadow-3xl-01), 0px 15px 25px var(--colors-effects-shadows-shadow-3xl-02);
161
+
162
+ /* Spacing - direct mapping */
163
+ --spacing-0: var(--spacing-0-0px);
164
+ --spacing-1: var(--spacing-1-4px);
165
+ --spacing-2: var(--spacing-2-8px);
166
+ --spacing-3: var(--spacing-3-12px);
167
+ --spacing-4: var(--spacing-4-16px);
168
+ --spacing-5: var(--spacing-5-20px);
169
+ --spacing-6: var(--spacing-6-24px);
170
+ --spacing-8: var(--spacing-8-32px);
171
+ --spacing-10: var(--spacing-10-40px);
172
+ --spacing-12: var(--spacing-12-48px);
173
+ --spacing-16: var(--spacing-16-64px);
174
+ --spacing-20: var(--spacing-20-80px);
175
+ --spacing-24: var(--spacing-24-96px);
176
+ --spacing-32: var(--spacing-32-128px);
177
+ --spacing-40: var(--spacing-40-160px);
178
+ --spacing-48: var(--spacing-48-192px);
179
+
180
+ /* Border radius */
181
+ --radius-none: var(--radius-none);
182
+ --radius-xs: var(--radius-xs);
183
+ --radius-sm: var(--radius-sm);
184
+ --radius-md: var(--radius-md);
185
+ --radius-lg: var(--radius-lg);
186
+ --radius-xl: var(--radius-xl);
187
+ --radius-2xl: var(--radius-2xl);
188
+ --radius-3xl: var(--radius-3xl);
189
+ --radius-4xl: var(--radius-4xl);
190
+ --radius-full: var(--radius-full);
191
+
192
+ /* Typography */
193
+ --font-family-display: var(--font-family-font-family-display);
194
+ --font-family-body: var(--font-family-font-family-body);
195
+
196
+ --font-size-xs: var(--font-size-text-xs);
197
+ --font-size-sm: var(--font-size-text-sm);
198
+ --font-size-md: var(--font-size-text-md);
199
+ --font-size-lg: var(--font-size-text-lg);
200
+ --font-size-xl: var(--font-size-text-xl);
201
+ --font-size-display-xs: var(--font-size-display-xs);
202
+ --font-size-display-sm: var(--font-size-display-sm);
203
+ --font-size-display-md: var(--font-size-display-md);
204
+ --font-size-display-lg: var(--font-size-display-lg);
205
+ --font-size-display-xl: var(--font-size-display-xl);
206
+ --font-size-display-2xl: var(--font-size-display-2xl);
207
+
208
+ --line-height-xs: var(--line-height-text-xs);
209
+ --line-height-sm: var(--line-height-text-sm);
210
+ --line-height-md: var(--line-height-text-md);
211
+ --line-height-lg: var(--line-height-text-lg);
212
+ --line-height-xl: var(--line-height-text-xl);
213
+ --line-height-display-xs: var(--line-height-display-xs);
214
+ --line-height-display-sm: var(--line-height-display-sm);
215
+ --line-height-display-md: var(--line-height-display-md);
216
+ --line-height-display-lg: var(--line-height-display-lg);
217
+ --line-height-display-xl: var(--line-height-display-xl);
218
+ --line-height-display-2xl: var(--line-height-display-2xl);
219
+
220
+ /* Component-specific mappings */
221
+ --button-primary-bg: var(--component-colors-components-buttons-primary-button-primary-bg);
222
+ --button-primary-fg: var(--component-colors-components-buttons-primary-button-primary-fg);
223
+ --button-primary-border: var(--component-colors-components-buttons-primary-button-primary-border);
224
+ --button-secondary-fg: var(--component-colors-components-buttons-secondary-button-secondary-fg);
225
+ --button-tertiary-fg: var(--component-colors-components-buttons-tertiary-color-button-tertiary-color-fg);
226
+ --button-tertiary-error-fg: var(--component-colors-components-buttons-tertiary-error-button-tertiary-error-fg);
227
+ }
228
+
229
+ /* Dark mode mappings */
230
+ .dark-mode {
231
+ /* Gray colors in dark mode */
232
+ --color-gray-25: var(--colors-gray-dark-mode-25);
233
+ --color-gray-50: var(--colors-gray-dark-mode-50);
234
+ --color-gray-100: var(--colors-gray-dark-mode-100);
235
+ --color-gray-200: var(--colors-gray-dark-mode-200);
236
+ --color-gray-300: var(--colors-gray-dark-mode-300);
237
+ --color-gray-400: var(--colors-gray-dark-mode-400);
238
+ --color-gray-500: var(--colors-gray-dark-mode-500);
239
+ --color-gray-600: var(--colors-gray-dark-mode-600);
240
+ --color-gray-700: var(--colors-gray-dark-mode-700);
241
+ --color-gray-800: var(--colors-gray-dark-mode-800);
242
+ --color-gray-900: var(--colors-gray-dark-mode-900);
243
+ --color-gray-950: var(--colors-gray-dark-mode-950);
244
+ }