prime-ui-kit 0.2.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.
Files changed (20) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +164 -0
  3. package/dist/components/index.css +8194 -0
  4. package/dist/components/index.css.map +1 -0
  5. package/dist/components/index.d.ts +2679 -0
  6. package/dist/components/index.js +8186 -0
  7. package/dist/components/index.js.map +1 -0
  8. package/dist/index.css +9510 -0
  9. package/dist/index.css.map +1 -0
  10. package/dist/index.d.ts +8 -0
  11. package/dist/index.js +8242 -0
  12. package/dist/index.js.map +1 -0
  13. package/package.json +94 -0
  14. package/src/styles/globals.css +91 -0
  15. package/src/styles/reset.css +35 -0
  16. package/src/styles/theme-dark.css +422 -0
  17. package/src/styles/theme-light.css +423 -0
  18. package/src/styles/tokens.css +248 -0
  19. package/src/styles/tokens.test.ts +27 -0
  20. package/src/styles/units.css +106 -0
package/package.json ADDED
@@ -0,0 +1,94 @@
1
+ {
2
+ "name": "prime-ui-kit",
3
+ "version": "0.2.0",
4
+ "description": "React 19 UI kit: CSS Modules, design tokens, composable components (forms, overlays, navigation, tables).",
5
+ "keywords": [
6
+ "react",
7
+ "ui-kit",
8
+ "components",
9
+ "css-modules",
10
+ "design-tokens",
11
+ "accessibility"
12
+ ],
13
+ "license": "MIT",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "git+https://github.com/esurkov1/prime-ui.git"
17
+ },
18
+ "bugs": {
19
+ "url": "https://github.com/esurkov1/prime-ui/issues"
20
+ },
21
+ "homepage": "https://github.com/esurkov1/prime-ui#readme",
22
+ "files": [
23
+ "dist",
24
+ "src/styles",
25
+ "LICENSE"
26
+ ],
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "devDependencies": {
31
+ "date-fns": "^4.1.0",
32
+ "react-day-picker": "^9.14.0",
33
+ "react-aria-components": "^1.16.0",
34
+ "@biomejs/biome": "latest",
35
+ "@testing-library/jest-dom": "latest",
36
+ "@testing-library/react": "latest",
37
+ "@testing-library/user-event": "latest",
38
+ "@types/node": "^25.5.0",
39
+ "@types/react": "^19",
40
+ "@types/react-dom": "^19",
41
+ "@vitejs/plugin-react": "^5",
42
+ "@vitest/coverage-v8": "^4.1.0",
43
+ "jsdom": "latest",
44
+ "tsup": "latest",
45
+ "typescript": "^5",
46
+ "vite": "^7",
47
+ "vitest": "latest"
48
+ },
49
+ "peerDependencies": {
50
+ "date-fns": "^4.0.0",
51
+ "react": "^19.0.0",
52
+ "react-dom": "^19.0.0",
53
+ "react-aria-components": "^1.16.0",
54
+ "react-day-picker": "^9.14.0"
55
+ },
56
+ "exports": {
57
+ ".": {
58
+ "types": "./dist/index.d.ts",
59
+ "default": "./dist/index.js"
60
+ },
61
+ "./components": {
62
+ "types": "./dist/components/index.d.ts",
63
+ "default": "./dist/components/index.js"
64
+ },
65
+ "./styles.css": "./src/styles/globals.css",
66
+ "./tokens.css": "./src/styles/tokens.css",
67
+ "./theme-light.css": "./src/styles/theme-light.css",
68
+ "./theme-dark.css": "./src/styles/theme-dark.css"
69
+ },
70
+ "scripts": {
71
+ "tokens:build": "bun run scripts/build-tokens.ts",
72
+ "build": "bun run tokens:build && tsup",
73
+ "dev": "tsup --watch",
74
+ "playground:dev": "vite playground --config playground/vite.config.ts",
75
+ "check": "biome check .",
76
+ "check:ci": "biome ci .",
77
+ "check:fix": "biome check . --write --unsafe",
78
+ "typecheck": "tsc --noEmit",
79
+ "test": "vitest run",
80
+ "test:watch": "vitest",
81
+ "verify": "bun run check:ci && bun run typecheck && bun run test && bun run build",
82
+ "verify:quick": "bun run check:ci && bun run typecheck && bun run test",
83
+ "verify:tokens": "bun run tokens:build && git diff --exit-code -- src/styles/tokens.css src/styles/theme-light.css src/styles/theme-dark.css"
84
+ },
85
+ "sideEffects": [
86
+ "**/*.css"
87
+ ],
88
+ "type": "module",
89
+ "dependencies": {
90
+ "framer-motion": "^12.38.0",
91
+ "lucide-react": "^0.577.0",
92
+ "react-router-dom": "^7.13.1"
93
+ }
94
+ }
package/src/styles/globals.css ADDED
@@ -0,0 +1,91 @@
1
+ /* Roboto Flex: variable opsz + wght; Roboto Mono: код и моноширинные зоны */
2
+ @import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
3
+ @import "./reset.css";
4
+ @import "./tokens.css";
5
+ @import "./theme-light.css";
6
+ @import "./theme-dark.css";
7
+ @import "./units.css";
8
+
9
+ :root {
10
+ font-family: var(--prime-sys-typography-family-base);
11
+ font-size: 16px;
12
+ color: var(--prime-sys-color-content-primary);
13
+ background: var(--prime-sys-color-surface-default);
14
+ text-rendering: optimizeLegibility;
15
+ font-kerning: normal;
16
+ -webkit-font-smoothing: antialiased;
17
+ -moz-osx-font-smoothing: grayscale;
18
+ }
19
+
20
+ :root[data-theme="dark"],
21
+ [data-theme="dark"] {
22
+ color-scheme: dark;
23
+ }
24
+
25
+ body {
26
+ background: var(--prime-sys-color-surface-default);
27
+ color: var(--prime-sys-color-content-primary);
28
+ font-size: var(--prime-sys-typography-body-size);
29
+ line-height: var(--prime-sys-typography-body-lineHeight);
30
+ font-weight: var(--prime-sys-typography-weight-regular);
31
+ letter-spacing: var(--prime-sys-typography-body-letterSpacing);
32
+ }
33
+
34
+ :where(*, *::before, *::after):focus {
35
+ outline: none;
36
+ }
37
+
38
+ :where(*, *::before, *::after):focus-visible {
39
+ outline: none;
40
+ }
41
+
42
+ :where(a, button, input, textarea, select, [role="button"], [tabindex]) {
43
+ -webkit-tap-highlight-color: transparent;
44
+ }
45
+
46
+ button::-moz-focus-inner,
47
+ input::-moz-focus-inner,
48
+ select::-moz-focus-inner,
49
+ textarea::-moz-focus-inner {
50
+ border: 0;
51
+ padding: 0;
52
+ }
53
+
54
+ /* Поля с оболочкой (Input, Textarea и т.д.) рисуют фокус на wrapper — не дублируем кольцо на нативном элементе. */
55
+ :where(input, textarea, select):focus-visible {
56
+ box-shadow: none;
57
+ }
58
+
59
+ :where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
60
+ box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
61
+ }
62
+
63
+ /* Курсор при наведении на неактивные контролы (без pointer-events: none на корне). */
64
+ :where(:disabled, [aria-disabled="true"], [data-disabled="true"]) {
65
+ cursor: not-allowed;
66
+ }
67
+
68
+ /* Accordion: высота задаётся компонентом через --prime-accordion-content-height */
69
+ @keyframes prime-accordion-down {
70
+ from {
71
+ height: 0;
72
+ opacity: 0;
73
+ }
74
+
75
+ to {
76
+ height: var(--prime-accordion-content-height);
77
+ opacity: 1;
78
+ }
79
+ }
80
+
81
+ @keyframes prime-accordion-up {
82
+ from {
83
+ height: var(--prime-accordion-content-height);
84
+ opacity: 1;
85
+ }
86
+
87
+ to {
88
+ height: 0;
89
+ opacity: 0;
90
+ }
91
+ }
package/src/styles/reset.css ADDED
@@ -0,0 +1,35 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ * {
8
+ margin: 0;
9
+ }
10
+
11
+ html,
12
+ body {
13
+ height: 100%;
14
+ }
15
+
16
+ body {
17
+ line-height: 1.5;
18
+ -webkit-font-smoothing: antialiased;
19
+ }
20
+
21
+ img,
22
+ picture,
23
+ video,
24
+ canvas,
25
+ svg {
26
+ display: block;
27
+ max-width: 100%;
28
+ }
29
+
30
+ input,
31
+ button,
32
+ textarea,
33
+ select {
34
+ font: inherit;
35
+ }
package/src/styles/theme-dark.css ADDED
@@ -0,0 +1,422 @@
1
+ /* AUTO-GENERATED by scripts/build-tokens.ts */
2
+ :root[data-theme="dark"],
3
+ [data-theme="dark"] {
4
+ --prime-sys-border-width-control: 1px;
5
+ --prime-sys-border-width-focusRing: 2px;
6
+ --prime-sys-color-action-errorBackground: var(--prime-ref-color-red-500);
7
+ --prime-sys-color-action-errorBackgroundHover: var(--prime-ref-color-red-600);
8
+ --prime-sys-color-action-errorForeground: var(--prime-ref-color-white);
9
+ --prime-sys-color-action-neutralBackground: var(--prime-ref-color-gray-900);
10
+ --prime-sys-color-action-neutralBackgroundHover: var(--prime-ref-color-gray-800);
11
+ --prime-sys-color-action-neutralForeground: var(--prime-ref-color-gray-50);
12
+ --prime-sys-color-action-primaryBackground: var(--prime-ref-color-gray-50);
13
+ --prime-sys-color-action-primaryBackgroundHover: var(--prime-ref-color-gray-200);
14
+ --prime-sys-color-action-primaryForeground: var(--prime-ref-color-gray-950);
15
+ --prime-sys-color-action-primarySoftBackground: color-mix(in srgb, var(--prime-ref-color-gray-50) 42%, var(--prime-ref-color-gray-950));
16
+ --prime-sys-color-action-primarySoftForeground: var(--prime-ref-color-gray-50);
17
+ --prime-sys-color-badge-grayFilled-background: var(--prime-ref-color-gray-500);
18
+ --prime-sys-color-badge-pink-backgroundEmphasis: var(--prime-ref-color-pink-500);
19
+ --prime-sys-color-badge-pink-backgroundSoft: var(--prime-ref-color-pink-950);
20
+ --prime-sys-color-badge-pink-border: var(--prime-ref-color-pink-800);
21
+ --prime-sys-color-badge-pink-foregroundOnSoft: var(--prime-ref-color-pink-200);
22
+ --prime-sys-color-badge-teal-backgroundEmphasis: var(--prime-ref-color-teal-500);
23
+ --prime-sys-color-badge-teal-backgroundSoft: var(--prime-ref-color-teal-950);
24
+ --prime-sys-color-badge-teal-border: var(--prime-ref-color-teal-800);
25
+ --prime-sys-color-badge-teal-foregroundOnSoft: var(--prime-ref-color-teal-200);
26
+ --prime-sys-color-border-accent: var(--prime-ref-color-gray-500);
27
+ --prime-sys-color-border-danger: var(--prime-ref-color-red-400);
28
+ --prime-sys-color-border-disabled: var(--prime-ref-color-gray-800);
29
+ --prime-sys-color-border-emphasis: var(--prime-ref-color-gray-50);
30
+ --prime-sys-color-border-inverse: var(--prime-ref-color-white);
31
+ --prime-sys-color-border-muted: var(--prime-ref-color-gray-700);
32
+ --prime-sys-color-border-separator: var(--prime-ref-color-gray-500);
33
+ --prime-sys-color-border-strong: var(--prime-ref-color-gray-600);
34
+ --prime-sys-color-border-subtle: var(--prime-ref-color-gray-800);
35
+ --prime-sys-color-content-accent: var(--prime-ref-color-gray-200);
36
+ --prime-sys-color-content-danger: var(--prime-ref-color-red-200);
37
+ --prime-sys-color-content-disabled: var(--prime-ref-color-gray-600);
38
+ --prime-sys-color-content-inverse: var(--prime-ref-color-gray-950);
39
+ --prime-sys-color-content-muted: var(--prime-ref-color-gray-400);
40
+ --prime-sys-color-content-primary: var(--prime-ref-color-gray-50);
41
+ --prime-sys-color-content-secondary: var(--prime-ref-color-gray-300);
42
+ --prime-sys-color-dataTable-dividerHorizontal: color-mix(in srgb, var(--prime-sys-color-border-subtle) 86%, transparent);
43
+ --prime-sys-color-dataTable-dividerVertical: color-mix(in srgb, var(--prime-sys-color-border-subtle) 78%, transparent);
44
+ --prime-sys-color-dataTable-headBackground: var(--prime-sys-color-surface-elevated);
45
+ --prime-sys-color-dataTable-rowBackground: var(--prime-sys-color-surface-default);
46
+ --prime-sys-color-field-bg: var(--prime-ref-color-gray-900);
47
+ --prime-sys-color-field-border: var(--prime-ref-color-gray-700);
48
+ --prime-sys-color-field-borderError: var(--prime-ref-color-red-400);
49
+ --prime-sys-color-field-borderFocus: var(--prime-ref-color-gray-300);
50
+ --prime-sys-color-field-borderHover: var(--prime-ref-color-gray-600);
51
+ --prime-sys-color-field-placeholder: var(--prime-ref-color-gray-500);
52
+ --prime-sys-color-field-text: var(--prime-ref-color-gray-50);
53
+ --prime-sys-color-focus-ring: var(--prime-ref-color-gray-100);
54
+ --prime-sys-color-status-away-background: var(--prime-ref-color-yellow-950);
55
+ --prime-sys-color-status-away-backgroundEmphasis: var(--prime-ref-color-yellow-500);
56
+ --prime-sys-color-status-away-border: var(--prime-ref-color-yellow-800);
57
+ --prime-sys-color-status-away-foreground: var(--prime-ref-color-yellow-200);
58
+ --prime-sys-color-status-error-background: var(--prime-ref-color-red-950);
59
+ --prime-sys-color-status-error-backgroundEmphasis: var(--prime-ref-color-red-500);
60
+ --prime-sys-color-status-error-border: var(--prime-ref-color-red-800);
61
+ --prime-sys-color-status-error-foreground: var(--prime-ref-color-red-200);
62
+ --prime-sys-color-status-feature-background: var(--prime-ref-color-purple-950);
63
+ --prime-sys-color-status-feature-backgroundEmphasis: var(--prime-ref-color-purple-500);
64
+ --prime-sys-color-status-feature-border: var(--prime-ref-color-purple-800);
65
+ --prime-sys-color-status-feature-foreground: var(--prime-ref-color-purple-200);
66
+ --prime-sys-color-status-information-background: var(--prime-ref-color-blue-950);
67
+ --prime-sys-color-status-information-backgroundEmphasis: var(--prime-ref-color-blue-500);
68
+ --prime-sys-color-status-information-border: var(--prime-ref-color-blue-800);
69
+ --prime-sys-color-status-information-foreground: var(--prime-ref-color-blue-200);
70
+ --prime-sys-color-status-success-background: var(--prime-ref-color-green-950);
71
+ --prime-sys-color-status-success-backgroundEmphasis: var(--prime-ref-color-green-500);
72
+ --prime-sys-color-status-success-border: var(--prime-ref-color-green-800);
73
+ --prime-sys-color-status-success-foreground: var(--prime-ref-color-green-200);
74
+ --prime-sys-color-status-verified-background: var(--prime-ref-color-sky-950);
75
+ --prime-sys-color-status-verified-backgroundEmphasis: var(--prime-ref-color-sky-500);
76
+ --prime-sys-color-status-verified-border: var(--prime-ref-color-sky-800);
77
+ --prime-sys-color-status-verified-foreground: var(--prime-ref-color-sky-200);
78
+ --prime-sys-color-status-warning-background: var(--prime-ref-color-orange-950);
79
+ --prime-sys-color-status-warning-backgroundEmphasis: var(--prime-ref-color-orange-500);
80
+ --prime-sys-color-status-warning-border: var(--prime-ref-color-orange-800);
81
+ --prime-sys-color-status-warning-foreground: var(--prime-ref-color-orange-200);
82
+ --prime-sys-color-surface-accentSoft: var(--prime-ref-color-gray-800);
83
+ --prime-sys-color-surface-dangerSoft: var(--prime-ref-color-red-950);
84
+ --prime-sys-color-surface-default: var(--prime-ref-color-gray-950);
85
+ --prime-sys-color-surface-elevated: var(--prime-ref-color-gray-800);
86
+ --prime-sys-color-surface-overlay: var(--prime-ref-color-overlay-scrimDark);
87
+ --prime-sys-color-surface-raised: var(--prime-ref-color-gray-900);
88
+ --prime-sys-color-tooltip-background: var(--prime-ref-color-gray-100);
89
+ --prime-sys-color-tooltip-border: var(--prime-ref-color-gray-300);
90
+ --prime-sys-color-tooltip-foreground: var(--prime-ref-color-gray-950);
91
+ --prime-sys-elevation-shadow-buttonFocus: 0 0 0 2px rgba(244, 244, 245, 0.28);
92
+ --prime-sys-elevation-shadow-errorFocus: 0 0 0 2px rgba(248, 113, 113, 0.38);
93
+ --prime-sys-elevation-shadow-fancyButtonError: 0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-action-errorBackground);
94
+ --prime-sys-elevation-shadow-fancyButtonNeutral: 0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-content-primary);
95
+ --prime-sys-elevation-shadow-fancyButtonPrimary: 0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-action-primaryBackground);
96
+ --prime-sys-elevation-shadow-modal: 0 24px 48px rgba(8, 10, 14, 0.45);
97
+ --prime-sys-elevation-shadow-primaryFocus: 0 0 0 2px rgba(244, 244, 245, 0.4);
98
+ --prime-sys-elevation-shadow-surface: 0 1px 2px rgba(8, 10, 14, 0.35);
99
+ --prime-sys-elevation-shadow-tooltip: 0 14px 30px rgba(8, 10, 14, 0.5), 0 4px 10px rgba(8, 10, 14, 0.4);
100
+ --prime-sys-elevation-zIndex-base: var(--prime-ref-zIndex-base);
101
+ --prime-sys-elevation-zIndex-dropdown: var(--prime-ref-zIndex-dropdown);
102
+ --prime-sys-elevation-zIndex-modal: var(--prime-ref-zIndex-modal);
103
+ --prime-sys-elevation-zIndex-popover: var(--prime-ref-zIndex-popover);
104
+ --prime-sys-elevation-zIndex-sticky: var(--prime-ref-zIndex-sticky);
105
+ --prime-sys-elevation-zIndex-toast: var(--prime-ref-zIndex-toast);
106
+ --prime-sys-elevation-zIndex-tooltip: var(--prime-ref-zIndex-tooltip);
107
+ --prime-sys-motion-duration-fast: var(--prime-ref-motion-duration-fast);
108
+ --prime-sys-motion-duration-medium: var(--prime-ref-motion-duration-medium);
109
+ --prime-sys-motion-duration-slow: var(--prime-ref-motion-duration-slow);
110
+ --prime-sys-motion-easing-standard: var(--prime-ref-motion-easing-standard);
111
+ --prime-sys-motion-fast: var(--prime-ref-motion-duration-fast);
112
+ --prime-sys-motion-medium: var(--prime-ref-motion-duration-medium);
113
+ --prime-sys-motion-slow: var(--prime-ref-motion-duration-slow);
114
+ --prime-sys-motion-standard: var(--prime-ref-motion-easing-standard);
115
+ --prime-sys-shape-radius-4xl: var(--prime-ref-radius-4xl);
116
+ --prime-sys-shape-radius-l: var(--prime-ref-radius-l);
117
+ --prime-sys-shape-radius-m: var(--prime-ref-radius-m);
118
+ --prime-sys-shape-radius-round: var(--prime-ref-radius-round);
119
+ --prime-sys-shape-radius-s: var(--prime-ref-radius-s);
120
+ --prime-sys-shape-radius-xs: var(--prime-ref-radius-xs);
121
+ --prime-sys-size-avatar-2xl-radius: var(--prime-sys-shape-radius-round);
122
+ --prime-sys-size-avatar-2xl-size: var(--prime-ref-size-2xl);
123
+ --prime-sys-size-avatar-2xl-text: var(--prime-sys-typography-sizeScale-2xl);
124
+ --prime-sys-size-avatar-3xl-radius: var(--prime-sys-shape-radius-round);
125
+ --prime-sys-size-avatar-3xl-size: var(--prime-ref-size-3xl);
126
+ --prime-sys-size-avatar-3xl-text: var(--prime-sys-typography-sizeScale-3xl);
127
+ --prime-sys-size-avatar-4xl-radius: var(--prime-sys-shape-radius-round);
128
+ --prime-sys-size-avatar-4xl-size: var(--prime-ref-size-4xl);
129
+ --prime-sys-size-avatar-4xl-text: var(--prime-sys-typography-sizeScale-4xl);
130
+ --prime-sys-size-avatar-5xl-radius: var(--prime-sys-shape-radius-round);
131
+ --prime-sys-size-avatar-5xl-size: var(--prime-ref-size-5xl);
132
+ --prime-sys-size-avatar-5xl-text: var(--prime-sys-typography-sizeScale-5xl);
133
+ --prime-sys-size-avatar-6xl-radius: var(--prime-sys-shape-radius-round);
134
+ --prime-sys-size-avatar-6xl-size: var(--prime-ref-size-6xl);
135
+ --prime-sys-size-avatar-6xl-text: var(--prime-sys-typography-sizeScale-6xl);
136
+ --prime-sys-size-avatar-l-radius: var(--prime-sys-shape-radius-round);
137
+ --prime-sys-size-avatar-l-size: var(--prime-ref-size-l);
138
+ --prime-sys-size-avatar-l-text: var(--prime-sys-typography-control-s);
139
+ --prime-sys-size-avatar-m-radius: var(--prime-sys-shape-radius-round);
140
+ --prime-sys-size-avatar-m-size: var(--prime-ref-size-m);
141
+ --prime-sys-size-avatar-m-text: var(--prime-sys-typography-support-2xs);
142
+ --prime-sys-size-avatar-s-radius: var(--prime-sys-shape-radius-round);
143
+ --prime-sys-size-avatar-s-size: var(--prime-ref-size-s);
144
+ --prime-sys-size-avatar-s-text: var(--prime-sys-typography-support-2xs);
145
+ --prime-sys-size-avatar-xl-radius: var(--prime-sys-shape-radius-round);
146
+ --prime-sys-size-avatar-xl-size: var(--prime-ref-size-xl);
147
+ --prime-sys-size-avatar-xl-text: var(--prime-sys-typography-control-l);
148
+ --prime-sys-size-badge-l-dotSize: var(--prime-ref-spaces-layout-m);
149
+ --prime-sys-size-badge-l-gap: var(--prime-sys-size-control-m-gap);
150
+ --prime-sys-size-badge-l-iconSize: var(--prime-sys-size-control-m-icon);
151
+ --prime-sys-size-badge-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
152
+ --prime-sys-size-badge-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
153
+ --prime-sys-size-badge-l-radius: var(--prime-sys-size-control-m-radius);
154
+ --prime-sys-size-badge-l-text: var(--prime-sys-size-control-m-text);
155
+ --prime-sys-size-badge-m-dotSize: var(--prime-ref-spaces-layout-s);
156
+ --prime-sys-size-badge-m-gap: var(--prime-sys-size-control-s-gap);
157
+ --prime-sys-size-badge-m-iconSize: var(--prime-sys-size-control-s-icon);
158
+ --prime-sys-size-badge-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
159
+ --prime-sys-size-badge-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
160
+ --prime-sys-size-badge-m-radius: var(--prime-sys-size-control-s-radius);
161
+ --prime-sys-size-badge-m-text: var(--prime-sys-size-control-s-text);
162
+ --prime-sys-size-badge-s-dotSize: var(--prime-ref-spaces-layout-xs);
163
+ --prime-sys-size-badge-s-gap: var(--prime-sys-size-control-xs-gap);
164
+ --prime-sys-size-badge-s-iconSize: var(--prime-sys-size-control-xs-icon);
165
+ --prime-sys-size-badge-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
166
+ --prime-sys-size-badge-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
167
+ --prime-sys-size-badge-s-radius: var(--prime-sys-size-control-xs-radius);
168
+ --prime-sys-size-badge-s-text: var(--prime-sys-size-control-xs-text);
169
+ --prime-sys-size-badge-xl-dotSize: var(--prime-ref-spaces-layout-l);
170
+ --prime-sys-size-badge-xl-gap: var(--prime-sys-size-control-l-gap);
171
+ --prime-sys-size-badge-xl-iconSize: var(--prime-sys-size-control-l-icon);
172
+ --prime-sys-size-badge-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
173
+ --prime-sys-size-badge-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
174
+ --prime-sys-size-badge-xl-radius: var(--prime-sys-size-control-l-radius);
175
+ --prime-sys-size-badge-xl-text: var(--prime-sys-size-control-l-text);
176
+ --prime-sys-size-choice-l-control: var(--prime-ref-icon-l);
177
+ --prime-sys-size-choice-l-dot: var(--prime-ref-spaces-layout-s);
178
+ --prime-sys-size-choice-l-gap: var(--prime-sys-spacing-m);
179
+ --prime-sys-size-choice-l-text: var(--prime-sys-typography-control-m);
180
+ --prime-sys-size-choice-m-control: var(--prime-ref-icon-m);
181
+ --prime-sys-size-choice-m-dot: var(--prime-ref-spaces-layout-s);
182
+ --prime-sys-size-choice-m-gap: var(--prime-sys-spacing-s);
183
+ --prime-sys-size-choice-m-text: var(--prime-sys-typography-control-s);
184
+ --prime-sys-size-choice-s-control: var(--prime-ref-icon-s);
185
+ --prime-sys-size-choice-s-dot: var(--prime-ref-spaces-layout-xs);
186
+ --prime-sys-size-choice-s-gap: var(--prime-sys-spacing-s);
187
+ --prime-sys-size-choice-s-text: var(--prime-sys-typography-support-2xs);
188
+ --prime-sys-size-choice-xl-control: var(--prime-ref-icon-xl);
189
+ --prime-sys-size-choice-xl-dot: var(--prime-ref-spaces-layout-m);
190
+ --prime-sys-size-choice-xl-gap: var(--prime-sys-spacing-l);
191
+ --prime-sys-size-choice-xl-text: var(--prime-sys-typography-control-l);
192
+ --prime-sys-size-control-l-buttonPaddingX: var(--prime-ref-spaces-control-button-l);
193
+ --prime-sys-size-control-l-buttonPaddingY: var(--prime-ref-spaces-control-button-l);
194
+ --prime-sys-size-control-l-gap: var(--prime-ref-spaces-control-spacing-l);
195
+ --prime-sys-size-control-l-height: var(--prime-ref-size-l);
196
+ --prime-sys-size-control-l-icon: var(--prime-ref-icon-l);
197
+ --prime-sys-size-control-l-inputPaddingX: var(--prime-ref-spaces-control-spacing-l);
198
+ --prime-sys-size-control-l-inputPaddingY: var(--prime-sys-spacing-s);
199
+ --prime-sys-size-control-l-radius: var(--prime-ref-radius-l);
200
+ --prime-sys-size-control-l-supportText: var(--prime-sys-typography-support-xs);
201
+ --prime-sys-size-control-l-text: var(--prime-sys-typography-control-m);
202
+ --prime-sys-size-control-m-buttonPaddingX: var(--prime-ref-spaces-control-button-m);
203
+ --prime-sys-size-control-m-buttonPaddingY: var(--prime-ref-spaces-control-button-m);
204
+ --prime-sys-size-control-m-gap: var(--prime-ref-spaces-control-spacing-m);
205
+ --prime-sys-size-control-m-height: var(--prime-ref-size-m);
206
+ --prime-sys-size-control-m-icon: var(--prime-ref-icon-m);
207
+ --prime-sys-size-control-m-inputPaddingX: var(--prime-ref-spaces-control-spacing-m);
208
+ --prime-sys-size-control-m-inputPaddingY: var(--prime-sys-spacing-s);
209
+ --prime-sys-size-control-m-radius: var(--prime-ref-radius-m);
210
+ --prime-sys-size-control-m-supportText: var(--prime-sys-typography-support-2xs);
211
+ --prime-sys-size-control-m-text: var(--prime-sys-typography-control-s);
212
+ --prime-sys-size-control-s-buttonPaddingX: var(--prime-ref-spaces-control-button-s);
213
+ --prime-sys-size-control-s-buttonPaddingY: var(--prime-ref-spaces-control-button-s);
214
+ --prime-sys-size-control-s-gap: var(--prime-ref-spaces-control-spacing-s);
215
+ --prime-sys-size-control-s-height: var(--prime-ref-size-s);
216
+ --prime-sys-size-control-s-icon: var(--prime-ref-icon-s);
217
+ --prime-sys-size-control-s-inputPaddingX: var(--prime-ref-spaces-control-spacing-s);
218
+ --prime-sys-size-control-s-inputPaddingY: var(--prime-sys-spacing-xs);
219
+ --prime-sys-size-control-s-radius: var(--prime-ref-radius-s);
220
+ --prime-sys-size-control-s-supportText: var(--prime-sys-typography-support-2xs);
221
+ --prime-sys-size-control-s-text: var(--prime-sys-typography-support-2xs);
222
+ --prime-sys-size-control-xl-buttonPaddingX: var(--prime-ref-spaces-control-button-xl);
223
+ --prime-sys-size-control-xl-buttonPaddingY: var(--prime-ref-spaces-control-button-xl);
224
+ --prime-sys-size-control-xl-gap: var(--prime-ref-spaces-control-spacing-xl);
225
+ --prime-sys-size-control-xl-height: var(--prime-ref-size-xl);
226
+ --prime-sys-size-control-xl-icon: var(--prime-ref-icon-xl);
227
+ --prime-sys-size-control-xl-inputPaddingX: var(--prime-ref-spaces-control-spacing-xl);
228
+ --prime-sys-size-control-xl-inputPaddingY: var(--prime-sys-spacing-m);
229
+ --prime-sys-size-control-xl-radius: var(--prime-ref-radius-xl);
230
+ --prime-sys-size-control-xl-supportText: var(--prime-sys-typography-support-xs);
231
+ --prime-sys-size-control-xl-text: var(--prime-sys-typography-control-l);
232
+ --prime-sys-size-control-xs-buttonPaddingX: var(--prime-sys-spacing-s);
233
+ --prime-sys-size-control-xs-buttonPaddingY: var(--prime-sys-spacing-s);
234
+ --prime-sys-size-control-xs-gap: var(--prime-sys-spacing-xs);
235
+ --prime-sys-size-control-xs-height: var(--prime-ref-size-xs);
236
+ --prime-sys-size-control-xs-icon: var(--prime-ref-icon-xs);
237
+ --prime-sys-size-control-xs-inputPaddingX: var(--prime-sys-spacing-xs);
238
+ --prime-sys-size-control-xs-inputPaddingY: var(--prime-sys-spacing-xs);
239
+ --prime-sys-size-control-xs-radius: var(--prime-ref-radius-xs);
240
+ --prime-sys-size-control-xs-supportText: var(--prime-sys-typography-support-3xs);
241
+ --prime-sys-size-control-xs-text: var(--prime-sys-typography-support-3xs);
242
+ --prime-sys-size-drawer-l-footerGap: var(--prime-sys-spacing-x3);
243
+ --prime-sys-size-drawer-l-headerGap: var(--prime-sys-spacing-x3);
244
+ --prime-sys-size-drawer-l-paddingX: var(--prime-sys-spacing-x6);
245
+ --prime-sys-size-drawer-l-paddingY: var(--prime-sys-spacing-x6);
246
+ --prime-sys-size-drawer-l-titleGap: var(--prime-sys-size-control-l-gap);
247
+ --prime-sys-size-drawer-l-titleText: var(--prime-sys-size-control-l-text);
248
+ --prime-sys-size-drawer-m-footerGap: var(--prime-sys-spacing-x3);
249
+ --prime-sys-size-drawer-m-headerGap: var(--prime-sys-spacing-x3);
250
+ --prime-sys-size-drawer-m-paddingX: var(--prime-sys-spacing-x5);
251
+ --prime-sys-size-drawer-m-paddingY: var(--prime-sys-spacing-x5);
252
+ --prime-sys-size-drawer-m-titleGap: var(--prime-sys-size-control-m-gap);
253
+ --prime-sys-size-drawer-m-titleText: var(--prime-sys-size-control-m-text);
254
+ --prime-sys-size-drawer-s-footerGap: var(--prime-sys-spacing-x2);
255
+ --prime-sys-size-drawer-s-headerGap: var(--prime-sys-spacing-x2);
256
+ --prime-sys-size-drawer-s-paddingX: var(--prime-sys-spacing-x3);
257
+ --prime-sys-size-drawer-s-paddingY: var(--prime-sys-spacing-x3);
258
+ --prime-sys-size-drawer-s-titleGap: var(--prime-sys-size-control-s-gap);
259
+ --prime-sys-size-drawer-s-titleText: var(--prime-sys-size-control-s-text);
260
+ --prime-sys-size-drawer-xl-footerGap: var(--prime-sys-spacing-x4);
261
+ --prime-sys-size-drawer-xl-headerGap: var(--prime-sys-spacing-x4);
262
+ --prime-sys-size-drawer-xl-paddingX: var(--prime-sys-spacing-x8);
263
+ --prime-sys-size-drawer-xl-paddingY: var(--prime-sys-spacing-x8);
264
+ --prime-sys-size-drawer-xl-titleGap: var(--prime-sys-size-control-xl-gap);
265
+ --prime-sys-size-drawer-xl-titleText: var(--prime-sys-size-control-xl-text);
266
+ --prime-sys-size-kbd-height: var(--prime-sys-size-control-xs-height);
267
+ --prime-sys-size-kbd-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
268
+ --prime-sys-size-kbd-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
269
+ --prime-sys-size-kbd-radius: var(--prime-sys-size-control-xs-radius);
270
+ --prime-sys-size-kbd-text: var(--prime-sys-size-control-xs-text);
271
+ --prime-sys-size-modal-bodyGap: var(--prime-sys-spacing-l);
272
+ --prime-sys-size-modal-contentGap: var(--prime-sys-spacing-l);
273
+ --prime-sys-size-modal-footerGap: var(--prime-sys-spacing-m);
274
+ --prime-sys-size-modal-footerPaddingTop: var(--prime-sys-spacing-l);
275
+ --prime-sys-size-modal-headerGap: var(--prime-sys-spacing-m);
276
+ --prime-sys-size-modal-headerIconSize: var(--prime-ref-size-m);
277
+ --prime-sys-size-modal-headerPaddingBottom: var(--prime-sys-spacing-l);
278
+ --prime-sys-size-modal-headTextPaddingRight: var(--prime-sys-spacing-3xl);
279
+ --prime-sys-size-modal-maxWidth: 30rem;
280
+ --prime-sys-size-modal-overlayPaddingX: var(--prime-sys-spacing-l);
281
+ --prime-sys-size-modal-overlayPaddingY: var(--prime-sys-spacing-l);
282
+ --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
283
+ --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
284
+ --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
285
+ --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
286
+ --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
287
+ --prime-sys-size-switch-l-trackHeight: 1.25rem;
288
+ --prime-sys-size-switch-l-trackWidth: 2.25rem;
289
+ --prime-sys-size-switch-m-thumb: var(--prime-ref-icon-s);
290
+ --prime-sys-size-switch-m-trackHeight: 1.25rem;
291
+ --prime-sys-size-switch-m-trackWidth: 2rem;
292
+ --prime-sys-size-switch-s-thumb: var(--prime-ref-icon-xs);
293
+ --prime-sys-size-switch-s-trackHeight: 1rem;
294
+ --prime-sys-size-switch-s-trackWidth: 1.75rem;
295
+ --prime-sys-size-switch-xl-thumb: var(--prime-ref-icon-l);
296
+ --prime-sys-size-switch-xl-trackHeight: 1.5rem;
297
+ --prime-sys-size-switch-xl-trackWidth: 2.5rem;
298
+ --prime-sys-size-tag-l-gap: var(--prime-sys-size-control-m-gap);
299
+ --prime-sys-size-tag-l-iconSize: var(--prime-sys-size-control-m-icon);
300
+ --prime-sys-size-tag-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
301
+ --prime-sys-size-tag-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
302
+ --prime-sys-size-tag-l-radius: var(--prime-sys-size-control-m-radius);
303
+ --prime-sys-size-tag-l-text: var(--prime-sys-size-control-m-text);
304
+ --prime-sys-size-tag-m-gap: var(--prime-sys-size-control-s-gap);
305
+ --prime-sys-size-tag-m-iconSize: var(--prime-sys-size-control-s-icon);
306
+ --prime-sys-size-tag-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
307
+ --prime-sys-size-tag-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
308
+ --prime-sys-size-tag-m-radius: var(--prime-sys-size-control-s-radius);
309
+ --prime-sys-size-tag-m-text: var(--prime-sys-size-control-s-text);
310
+ --prime-sys-size-tag-s-gap: var(--prime-sys-size-control-xs-gap);
311
+ --prime-sys-size-tag-s-iconSize: var(--prime-sys-size-control-xs-icon);
312
+ --prime-sys-size-tag-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
313
+ --prime-sys-size-tag-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
314
+ --prime-sys-size-tag-s-radius: var(--prime-sys-size-control-xs-radius);
315
+ --prime-sys-size-tag-s-text: var(--prime-sys-size-control-xs-text);
316
+ --prime-sys-size-tag-xl-gap: var(--prime-sys-size-control-l-gap);
317
+ --prime-sys-size-tag-xl-iconSize: var(--prime-sys-size-control-l-icon);
318
+ --prime-sys-size-tag-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
319
+ --prime-sys-size-tag-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
320
+ --prime-sys-size-tag-xl-radius: var(--prime-sys-size-control-l-radius);
321
+ --prime-sys-size-tag-xl-text: var(--prime-sys-size-control-l-text);
322
+ --prime-sys-size-textarea-l-minHeight: 6rem;
323
+ --prime-sys-size-textarea-l-paddingX: var(--prime-sys-spacing-l);
324
+ --prime-sys-size-textarea-l-radius: var(--prime-ref-radius-l);
325
+ --prime-sys-size-textarea-m-minHeight: 5rem;
326
+ --prime-sys-size-textarea-m-paddingX: var(--prime-sys-spacing-m);
327
+ --prime-sys-size-textarea-m-radius: var(--prime-ref-radius-m);
328
+ --prime-sys-size-textarea-s-minHeight: 4rem;
329
+ --prime-sys-size-textarea-s-paddingX: var(--prime-sys-spacing-s);
330
+ --prime-sys-size-textarea-s-radius: var(--prime-ref-radius-s);
331
+ --prime-sys-size-textarea-xl-minHeight: 8rem;
332
+ --prime-sys-size-textarea-xl-paddingX: var(--prime-sys-spacing-xl);
333
+ --prime-sys-size-textarea-xl-radius: var(--prime-ref-radius-xl);
334
+ --prime-sys-size-tooltip-l-paddingX: var(--prime-sys-size-control-m-inputPaddingX);
335
+ --prime-sys-size-tooltip-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
336
+ --prime-sys-size-tooltip-l-radius: var(--prime-sys-size-control-m-radius);
337
+ --prime-sys-size-tooltip-l-text: var(--prime-sys-size-control-m-supportText);
338
+ --prime-sys-size-tooltip-m-paddingX: var(--prime-sys-size-control-s-inputPaddingX);
339
+ --prime-sys-size-tooltip-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
340
+ --prime-sys-size-tooltip-m-radius: var(--prime-sys-size-control-s-radius);
341
+ --prime-sys-size-tooltip-m-text: var(--prime-sys-size-control-s-supportText);
342
+ --prime-sys-size-tooltip-s-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
343
+ --prime-sys-size-tooltip-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
344
+ --prime-sys-size-tooltip-s-radius: var(--prime-sys-size-control-xs-radius);
345
+ --prime-sys-size-tooltip-s-text: var(--prime-sys-size-control-xs-supportText);
346
+ --prime-sys-size-tooltip-xl-paddingX: var(--prime-sys-size-control-l-inputPaddingX);
347
+ --prime-sys-size-tooltip-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
348
+ --prime-sys-size-tooltip-xl-radius: var(--prime-sys-size-control-l-radius);
349
+ --prime-sys-size-tooltip-xl-text: var(--prime-sys-size-control-l-supportText);
350
+ --prime-sys-spacing-2xl: var(--prime-ref-spaces-layout-2xl);
351
+ --prime-sys-spacing-3xl: var(--prime-ref-spaces-layout-3xl);
352
+ --prime-sys-spacing-4xl: var(--prime-ref-spaces-layout-4xl);
353
+ --prime-sys-spacing-5xl: var(--prime-ref-spaces-layout-5xl);
354
+ --prime-sys-spacing-6xl: var(--prime-ref-spaces-layout-6xl);
355
+ --prime-sys-spacing-l: var(--prime-ref-spaces-layout-l);
356
+ --prime-sys-spacing-m: var(--prime-ref-spaces-layout-m);
357
+ --prime-sys-spacing-s: var(--prime-ref-spaces-layout-s);
358
+ --prime-sys-spacing-x0: var(--prime-ref-spaces-layout-0);
359
+ --prime-sys-spacing-x1: var(--prime-ref-spaces-layout-xs);
360
+ --prime-sys-spacing-x10: var(--prime-ref-spaces-layout-4xl);
361
+ --prime-sys-spacing-x12: var(--prime-ref-spaces-layout-5xl);
362
+ --prime-sys-spacing-x14: var(--prime-ref-spaces-layout-6xl);
363
+ --prime-sys-spacing-x2: var(--prime-ref-spaces-layout-s);
364
+ --prime-sys-spacing-x3: var(--prime-ref-spaces-layout-m);
365
+ --prime-sys-spacing-x4: var(--prime-ref-spaces-layout-l);
366
+ --prime-sys-spacing-x5: var(--prime-ref-spaces-layout-xl);
367
+ --prime-sys-spacing-x6: var(--prime-ref-spaces-layout-2xl);
368
+ --prime-sys-spacing-x8: var(--prime-ref-spaces-layout-3xl);
369
+ --prime-sys-spacing-xl: var(--prime-ref-spaces-layout-xl);
370
+ --prime-sys-spacing-xs: var(--prime-ref-spaces-layout-xs);
371
+ --prime-sys-typography-body-letterSpacing: var(--prime-ref-font-letterSpacing-normal);
372
+ --prime-sys-typography-body-lineHeight: var(--prime-sys-typography-lineHeight-normal);
373
+ --prime-sys-typography-body-size: var(--prime-ref-font-size-s);
374
+ --prime-sys-typography-control-l: var(--prime-ref-font-size-m);
375
+ --prime-sys-typography-control-m: var(--prime-ref-font-size-s);
376
+ --prime-sys-typography-control-s: var(--prime-ref-font-size-xs);
377
+ --prime-sys-typography-family-base: var(--prime-ref-font-family-base);
378
+ --prime-sys-typography-lineHeight-normal: 1.5;
379
+ --prime-sys-typography-lineHeight-relaxed: 1.65;
380
+ --prime-sys-typography-lineHeight-tight: 1.25;
381
+ --prime-sys-typography-lineHeightScale-2xl: var(--prime-ref-font-lineHeight-2xl);
382
+ --prime-sys-typography-lineHeightScale-2xs: var(--prime-ref-font-lineHeight-2xs);
383
+ --prime-sys-typography-lineHeightScale-3xl: var(--prime-ref-font-lineHeight-3xl);
384
+ --prime-sys-typography-lineHeightScale-3xs: var(--prime-ref-font-lineHeight-3xs);
385
+ --prime-sys-typography-lineHeightScale-4xl: var(--prime-ref-font-lineHeight-4xl);
386
+ --prime-sys-typography-lineHeightScale-5xl: var(--prime-ref-font-lineHeight-5xl);
387
+ --prime-sys-typography-lineHeightScale-6xl: var(--prime-ref-font-lineHeight-6xl);
388
+ --prime-sys-typography-lineHeightScale-l: var(--prime-ref-font-lineHeight-l);
389
+ --prime-sys-typography-lineHeightScale-m: var(--prime-ref-font-lineHeight-m);
390
+ --prime-sys-typography-lineHeightScale-s: var(--prime-ref-font-lineHeight-s);
391
+ --prime-sys-typography-lineHeightScale-xl: var(--prime-ref-font-lineHeight-xl);
392
+ --prime-sys-typography-lineHeightScale-xs: var(--prime-ref-font-lineHeight-xs);
393
+ --prime-sys-typography-sizeScale-2xl: var(--prime-ref-font-size-2xl);
394
+ --prime-sys-typography-sizeScale-2xs: var(--prime-ref-font-size-2xs);
395
+ --prime-sys-typography-sizeScale-3xl: var(--prime-ref-font-size-3xl);
396
+ --prime-sys-typography-sizeScale-3xs: var(--prime-ref-font-size-3xs);
397
+ --prime-sys-typography-sizeScale-4xl: var(--prime-ref-font-size-4xl);
398
+ --prime-sys-typography-sizeScale-5xl: var(--prime-ref-font-size-5xl);
399
+ --prime-sys-typography-sizeScale-6xl: var(--prime-ref-font-size-6xl);
400
+ --prime-sys-typography-sizeScale-l: var(--prime-ref-font-size-l);
401
+ --prime-sys-typography-sizeScale-m: var(--prime-ref-font-size-m);
402
+ --prime-sys-typography-sizeScale-s: var(--prime-ref-font-size-s);
403
+ --prime-sys-typography-sizeScale-xl: var(--prime-ref-font-size-xl);
404
+ --prime-sys-typography-sizeScale-xs: var(--prime-ref-font-size-xs);
405
+ --prime-sys-typography-style-italic: italic;
406
+ --prime-sys-typography-style-normal: normal;
407
+ --prime-sys-typography-support-2xs: var(--prime-ref-font-size-2xs);
408
+ --prime-sys-typography-support-3xs: var(--prime-ref-font-size-3xs);
409
+ --prime-sys-typography-support-s: var(--prime-ref-font-size-s);
410
+ --prime-sys-typography-support-xs: var(--prime-ref-font-size-xs);
411
+ --prime-sys-typography-title-size: var(--prime-ref-font-size-l);
412
+ --prime-sys-typography-title-weight: var(--prime-ref-font-weight-semibold);
413
+ --prime-sys-typography-tracking-normal: var(--prime-ref-font-letterSpacing-normal);
414
+ --prime-sys-typography-tracking-tight: var(--prime-ref-font-letterSpacing-tight);
415
+ --prime-sys-typography-tracking-tighter: var(--prime-ref-font-letterSpacing-tighter);
416
+ --prime-sys-typography-tracking-wide: var(--prime-ref-font-letterSpacing-wide);
417
+ --prime-sys-typography-tracking-wider: var(--prime-ref-font-letterSpacing-wider);
418
+ --prime-sys-typography-weight-bold: var(--prime-ref-font-weight-bold);
419
+ --prime-sys-typography-weight-medium: var(--prime-ref-font-weight-medium);
420
+ --prime-sys-typography-weight-regular: var(--prime-ref-font-weight-regular);
421
+ --prime-sys-typography-weight-semibold: var(--prime-ref-font-weight-semibold);
422
+ }