@orion-ds/react 5.0.0 → 5.0.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.
- package/README.md +48 -4
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.module.css.cjs +1 -1
- package/dist/components/Button/Button.module.css.mjs +28 -28
- package/dist/components/Chart/Chart.d.ts +2 -2
- package/dist/components/Chart/Chart.d.ts.map +1 -1
- package/dist/styles.css +111 -3
- package/dist/theme.css +110 -2
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -80,7 +80,7 @@ This single import includes:
|
|
|
80
80
|
|
|
81
81
|
## Quick Start
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
````tsx
|
|
84
84
|
// 1. Import styles (pick one option)
|
|
85
85
|
import '@orion-ds/react/styles.css'; // Recommended: single import
|
|
86
86
|
|
|
@@ -89,7 +89,7 @@ import { Button, Card, Field, useTheme, ThemeProvider } from '@orion-ds/react';
|
|
|
89
89
|
|
|
90
90
|
function App() {
|
|
91
91
|
return (
|
|
92
|
-
<ThemeProvider> {
|
|
92
|
+
<ThemeProvider> {/* Fonts load automatically! */}
|
|
93
93
|
<MyApp />
|
|
94
94
|
</ThemeProvider>
|
|
95
95
|
);
|
|
@@ -112,9 +112,53 @@ Switch to {theme === 'light' ? 'dark' : 'light'} mode
|
|
|
112
112
|
}
|
|
113
113
|
\`\`\`
|
|
114
114
|
|
|
115
|
-
## AI
|
|
115
|
+
## 🤖 AI Integration (MCP)
|
|
116
|
+
|
|
117
|
+
Orion includes an MCP (Model Context Protocol) server that lets AI agents generate Orion-compliant code automatically. Use with Claude Code, Cursor, Cline, and other AI tools.
|
|
118
|
+
|
|
119
|
+
### 3-Minute Setup
|
|
120
|
+
|
|
121
|
+
1. **Install the MCP server:**
|
|
122
|
+
```bash
|
|
123
|
+
npm install @orion-ds/mcp
|
|
124
|
+
````
|
|
125
|
+
|
|
126
|
+
2. **Configure in your tool's settings** (see tool documentation):
|
|
127
|
+
- Claude Code: Add to `.claude.json`
|
|
128
|
+
- Cursor: Add to Cursor settings
|
|
129
|
+
- Cline: Add to MCP settings in VS Code
|
|
130
|
+
|
|
131
|
+
3. **Start using AI commands:**
|
|
132
|
+
```
|
|
133
|
+
"Add a Button component"
|
|
134
|
+
"Create a responsive card layout"
|
|
135
|
+
"Generate form input component"
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### What's Available
|
|
139
|
+
|
|
140
|
+
The MCP server exposes **9 tools**:
|
|
141
|
+
|
|
142
|
+
- `list-components` — List all 70+ components, 25+ sections, and 8 templates
|
|
143
|
+
- `get-component` — Get full details: props, examples, tokens, accessibility
|
|
144
|
+
- `search-components` — Semantic search (e.g., "form input" finds Field, Select, Checkbox)
|
|
145
|
+
- `list-tokens` — List design tokens by category
|
|
146
|
+
- `get-token` — Get token values per theme and brand
|
|
147
|
+
- `validate-code` — Validate code against Orion's anti-hallucination rules
|
|
148
|
+
- `get-setup-guide` — Framework-specific setup (Vite, Next.js, React)
|
|
149
|
+
- `list-sections` — Pre-built page sections and templates
|
|
150
|
+
- `get-section` — Get section code and examples
|
|
151
|
+
|
|
152
|
+
### Complete Documentation
|
|
153
|
+
|
|
154
|
+
For setup instructions and advanced configuration:
|
|
155
|
+
|
|
156
|
+
- **[MCP Documentation](../mcp/README.md)** — Complete MCP reference
|
|
157
|
+
- **[AI Integration Guide](../../docs-site/content/docs/ai-integration.mdx)** — Step-by-step setup
|
|
158
|
+
|
|
159
|
+
### AI Code Generation
|
|
116
160
|
|
|
117
|
-
This library is optimized for AI code generation.
|
|
161
|
+
This library is optimized for AI code generation. For detailed guidance:
|
|
118
162
|
|
|
119
163
|
| Document | Purpose |
|
|
120
164
|
| ------------------ | --------------------------------------------------------- |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_gjg2h_9{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-secondary);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s cubic-bezier(.34,1.56,.64,1);border:1px solid transparent;outline:none}._button_gjg2h_9:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._button_gjg2h_9:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._primary_gjg2h_49{background:var(--interactive-primary);color:var(--interactive-primary-text)}._primary_gjg2h_49:hover:not(:disabled){background:var(--interactive-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._primary_gjg2h_49:active:not(:disabled){transform:translateY(1px)}._secondary_gjg2h_65{background:var(--interactive-secondary);color:var(--interactive-secondary-text);border:1px solid var(--border-subtle)}._secondary_gjg2h_65:hover:not(:disabled){background:var(--interactive-secondary-hover);border-color:var(--border-subtle);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._secondary_gjg2h_65:active:not(:disabled){background:var(--surface-layer);transform:translateY(1px)}[data-theme=dark] ._secondary_gjg2h_65{background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);color:var(--text-primary);backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)));-webkit-backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)))}[data-theme=dark] ._secondary_gjg2h_65:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 22%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-theme=dark] ._secondary_gjg2h_65:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}._secondaryInverse_gjg2h_104{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent)}._secondaryInverse_gjg2h_104:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._secondaryInverse_gjg2h_104:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}._ghost_gjg2h_124{background:transparent;color:var(--text-primary)}._ghost_gjg2h_124:hover:not(:disabled){background:var(--interactive-ghost-hover);transform:translateY(var(--mode-hover-lift));box-shadow:0 0 0 4px color-mix(in srgb,var(--text-primary) 5%,transparent)}._ghost_gjg2h_124:active:not(:disabled){transform:scale(.98)}._ghostInverse_gjg2h_141{background:transparent;color:var(--color-neutral-0)}._ghostInverse_gjg2h_141:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);transform:translateY(var(--mode-hover-lift));box-shadow:0 0 0 4px color-mix(in srgb,var(--color-neutral-0) 8%,transparent)}._ghostInverse_gjg2h_141:active:not(:disabled){transform:scale(.98)}._danger_gjg2h_157{background:var(--status-error);color:var(--color-neutral-0)}._danger_gjg2h_157:hover:not(:disabled){background:color-mix(in srgb,var(--status-error) 85%,var(--color-neutral-1000));transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._danger_gjg2h_157:active:not(:disabled){transform:translateY(1px)}._inverse_gjg2h_178{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}._inverse_gjg2h_178:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900));transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._inverse_gjg2h_178:active:not(:disabled){transform:translateY(1px)}[data-brand=lemon] ._inverse_gjg2h_178{color:var(--color-neutral-1000)}._sm_gjg2h_207{height:32px;padding:0 var(--spacing-3);font-size:var(--font-size-12);border-radius:var(--radius-button)}._md_gjg2h_214{height:40px;padding:0 var(--spacing-4);font-size:var(--font-size-16);border-radius:var(--radius-button)}._lg_gjg2h_221{height:48px;padding:0 var(--spacing-6);font-size:var(--font-size-18);border-radius:var(--radius-button)}._fullWidth_gjg2h_233{width:100%}._iconOnly_gjg2h_238._sm_gjg2h_207{width:32px;padding:0}._iconOnly_gjg2h_238._md_gjg2h_214{width:40px;padding:0}._iconOnly_gjg2h_238._lg_gjg2h_221{width:48px;padding:0}._loading_gjg2h_256{position:relative;pointer-events:none}._spinner_gjg2h_261{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;animation:_spin_gjg2h_261 .6s linear infinite}._primary_gjg2h_49 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary-text);border-top-color:transparent}._secondary_gjg2h_65 ._spinner_gjg2h_261{border:2px solid var(--text-primary);border-top-color:transparent}._secondaryInverse_gjg2h_104 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}._ghost_gjg2h_124 ._spinner_gjg2h_261{border:2px solid var(--text-primary);border-top-color:transparent}._ghostInverse_gjg2h_141 ._spinner_gjg2h_261,._danger_gjg2h_157 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}._inverse_gjg2h_178 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-brand=lemon] ._inverse_gjg2h_178 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-1000);border-top-color:transparent}[data-theme=light][data-brand=ember] ._primary_gjg2h_49{background:var(--color-neutral-900);color:var(--color-neutral-0)}[data-theme=light][data-brand=ember] ._primary_gjg2h_49:hover:not(:disabled){background:var(--color-neutral-700)}[data-theme=dark][data-brand=ember] ._primary_gjg2h_49{background:var(--color-neutral-100);color:var(--color-neutral-900)}[data-theme=dark][data-brand=ember] ._primary_gjg2h_49:hover:not(:disabled){background:var(--color-neutral-0)}._loadingContent_gjg2h_339{visibility:hidden}[data-dark-bg=true] ._primary_gjg2h_49{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}[data-dark-bg=true] ._primary_gjg2h_49:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900))}[data-dark-bg=true] ._primary_gjg2h_49:active:not(:disabled){transform:translateY(1px)}[data-dark-bg=true] ._secondary_gjg2h_65{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}[data-dark-bg=true] ._secondary_gjg2h_65:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}[data-dark-bg=true] ._secondary_gjg2h_65:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}[data-dark-bg=true] ._ghost_gjg2h_124{background:transparent;color:var(--color-neutral-0)}[data-dark-bg=true] ._ghost_gjg2h_124:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-dark-bg=true] ._ghost_gjg2h_124:active:not(:disabled){transform:scale(.98)}[data-dark-bg=true] ._primary_gjg2h_49 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-dark-bg=true] ._secondary_gjg2h_65 ._spinner_gjg2h_261,[data-dark-bg=true] ._ghost_gjg2h_124 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}[data-brand=lemon][data-dark-bg=true] ._primary_gjg2h_49{color:var(--color-neutral-1000)}@keyframes _spin_gjg2h_261{to{transform:translate(-50%,-50%) rotate(360deg)}}._icon_gjg2h_238{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}._iconRight_gjg2h_437{order:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n="
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n="_button_gjg2h_9",o="_primary_gjg2h_49",g="_secondary_gjg2h_65",s="_secondaryInverse_gjg2h_104",t="_ghost_gjg2h_124",_="_ghostInverse_gjg2h_141",e="_danger_gjg2h_157",i="_inverse_gjg2h_178",c="_sm_gjg2h_207",r="_md_gjg2h_214",h="_lg_gjg2h_221",d="_fullWidth_gjg2h_233",l="_iconOnly_gjg2h_238",a="_loading_gjg2h_256",j="_spinner_gjg2h_261",y="_spin_gjg2h_261",u="_loadingContent_gjg2h_339",v="_icon_gjg2h_238",m="_iconRight_gjg2h_437",p={button:n,primary:o,secondary:g,secondaryInverse:s,ghost:t,ghostInverse:_,danger:e,inverse:i,sm:c,md:r,lg:h,fullWidth:d,iconOnly:l,loading:a,spinner:j,spin:y,loadingContent:u,icon:v,iconRight:m};exports.button=n;exports.danger=e;exports.default=p;exports.fullWidth=d;exports.ghost=t;exports.ghostInverse=_;exports.icon=v;exports.iconOnly=l;exports.iconRight=m;exports.inverse=i;exports.lg=h;exports.loading=a;exports.loadingContent=u;exports.md=r;exports.primary=o;exports.secondary=g;exports.secondaryInverse=s;exports.sm=c;exports.spin=y;exports.spinner=j;
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
const n = "
|
|
1
|
+
const n = "_button_gjg2h_9", g = "_primary_gjg2h_49", _ = "_secondary_gjg2h_65", o = "_secondaryInverse_gjg2h_104", s = "_ghost_gjg2h_124", t = "_ghostInverse_gjg2h_141", e = "_danger_gjg2h_157", c = "_inverse_gjg2h_178", i = "_sm_gjg2h_207", h = "_md_gjg2h_214", r = "_lg_gjg2h_221", d = "_fullWidth_gjg2h_233", a = "_iconOnly_gjg2h_238", l = "_loading_gjg2h_256", j = "_spinner_gjg2h_261", y = "_spin_gjg2h_261", p = "_loadingContent_gjg2h_339", m = "_icon_gjg2h_238", v = "_iconRight_gjg2h_437", u = {
|
|
2
2
|
button: n,
|
|
3
|
-
primary:
|
|
4
|
-
secondary:
|
|
5
|
-
secondaryInverse:
|
|
6
|
-
ghost:
|
|
3
|
+
primary: g,
|
|
4
|
+
secondary: _,
|
|
5
|
+
secondaryInverse: o,
|
|
6
|
+
ghost: s,
|
|
7
7
|
ghostInverse: t,
|
|
8
|
-
danger:
|
|
9
|
-
inverse:
|
|
10
|
-
sm:
|
|
11
|
-
md:
|
|
8
|
+
danger: e,
|
|
9
|
+
inverse: c,
|
|
10
|
+
sm: i,
|
|
11
|
+
md: h,
|
|
12
12
|
lg: r,
|
|
13
13
|
fullWidth: d,
|
|
14
14
|
iconOnly: a,
|
|
15
15
|
loading: l,
|
|
16
|
-
spinner:
|
|
17
|
-
spin:
|
|
18
|
-
loadingContent:
|
|
19
|
-
icon:
|
|
20
|
-
iconRight:
|
|
16
|
+
spinner: j,
|
|
17
|
+
spin: y,
|
|
18
|
+
loadingContent: p,
|
|
19
|
+
icon: m,
|
|
20
|
+
iconRight: v
|
|
21
21
|
};
|
|
22
22
|
export {
|
|
23
23
|
n as button,
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
e as danger,
|
|
25
|
+
u as default,
|
|
26
26
|
d as fullWidth,
|
|
27
|
-
|
|
27
|
+
s as ghost,
|
|
28
28
|
t as ghostInverse,
|
|
29
|
-
|
|
29
|
+
m as icon,
|
|
30
30
|
a as iconOnly,
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
v as iconRight,
|
|
32
|
+
c as inverse,
|
|
33
33
|
r as lg,
|
|
34
34
|
l as loading,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
p as loadingContent,
|
|
36
|
+
h as md,
|
|
37
|
+
g as primary,
|
|
38
|
+
_ as secondary,
|
|
39
|
+
o as secondaryInverse,
|
|
40
|
+
i as sm,
|
|
41
|
+
y as spin,
|
|
42
|
+
j as spinner
|
|
43
43
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { Tooltip } from 'recharts';
|
|
2
|
+
import { Tooltip, Legend } from 'recharts';
|
|
3
3
|
import { ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartGradientProps } from './Chart.types';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -31,5 +31,5 @@ export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;
|
|
|
31
31
|
*/
|
|
32
32
|
export declare const ChartGradient: React.FC<ChartGradientProps>;
|
|
33
33
|
export declare const ChartTooltip: typeof Tooltip;
|
|
34
|
-
export declare const ChartLegend:
|
|
34
|
+
export declare const ChartLegend: typeof Legend;
|
|
35
35
|
//# sourceMappingURL=Chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAuB,OAAO,
|
|
1
|
+
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAuB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAEV,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,eAAe,CAAC;AAOvB;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4BxD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwDlE,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8BhE,CAAC;AAIF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAUtD,CAAC;AAKF,eAAO,MAAM,YAAY,gBAAU,CAAC;AACpC,eAAO,MAAM,WAAW,eAAS,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -123,6 +123,11 @@
|
|
|
123
123
|
--blur-md: 8px;
|
|
124
124
|
--blur-lg: 12px;
|
|
125
125
|
--blur-xl: 24px;
|
|
126
|
+
|
|
127
|
+
/* Hover Animation Tokens */
|
|
128
|
+
--mode-hover-lift: -2px;
|
|
129
|
+
--mode-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
|
|
130
|
+
--mode-hover-duration: 200ms;
|
|
126
131
|
}
|
|
127
132
|
|
|
128
133
|
/* ─── Light Theme Semantics ─── */
|
|
@@ -296,32 +301,135 @@
|
|
|
296
301
|
|
|
297
302
|
/* ─── Deepblue Radius ─── */
|
|
298
303
|
[data-brand="deepblue"] {
|
|
304
|
+
/* Deepblue brand colors */
|
|
305
|
+
--color-brand-50: #e6f2ff;
|
|
306
|
+
--color-brand-100: #b3d9ff;
|
|
307
|
+
--color-brand-200: #80bfff;
|
|
308
|
+
--color-brand-300: #4da6ff;
|
|
309
|
+
--color-brand-400: #1a8cff;
|
|
310
|
+
--color-brand-500: #006FBA;
|
|
311
|
+
--color-brand-600: #0062a6;
|
|
312
|
+
--color-brand-700: #005592;
|
|
313
|
+
--color-brand-800: #00487d;
|
|
314
|
+
--color-brand-900: #003b69;
|
|
315
|
+
--color-brand-950: #002540;
|
|
299
316
|
/* Derived: button="md" (12px) → container="xl" (24px) */
|
|
300
317
|
--radius-button: var(--radius-md);
|
|
301
318
|
--radius-container: var(--radius-xl);
|
|
302
319
|
}
|
|
303
320
|
|
|
304
321
|
/* ─── Red Radius ─── */
|
|
322
|
+
/* ─── RED Brand Override ─── */
|
|
305
323
|
[data-brand="red"] {
|
|
324
|
+
/* Red brand colors */
|
|
325
|
+
--color-brand-50: #fdf2f2;
|
|
326
|
+
--color-brand-100: #fde8e8;
|
|
327
|
+
--color-brand-200: #fbd5d5;
|
|
328
|
+
--color-brand-300: #f8b4b4;
|
|
329
|
+
--color-brand-400: #f08282;
|
|
330
|
+
--color-brand-500: #D7282F;
|
|
331
|
+
--color-brand-600: #b91c22;
|
|
332
|
+
--color-brand-700: #93151b;
|
|
333
|
+
--color-brand-800: #7a151b;
|
|
334
|
+
--color-brand-900: #661619;
|
|
335
|
+
--color-brand-950: #3b090b;
|
|
306
336
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
307
337
|
--radius-button: var(--radius-full);
|
|
308
338
|
--radius-container: var(--radius-3xl);
|
|
309
339
|
}
|
|
310
340
|
|
|
311
|
-
/* ───
|
|
341
|
+
/* ─── ORANGE Brand Override ─── */
|
|
312
342
|
[data-brand="orange"] {
|
|
343
|
+
/* Orange brand colors */
|
|
344
|
+
--color-brand-50: #fef0eb;
|
|
345
|
+
--color-brand-100: #fdd5c9;
|
|
346
|
+
--color-brand-200: #fcb9a5;
|
|
347
|
+
--color-brand-300: #fa9d80;
|
|
348
|
+
--color-brand-400: #f87d52;
|
|
349
|
+
--color-brand-500: #F15D22;
|
|
350
|
+
--color-brand-600: #d9531f;
|
|
351
|
+
--color-brand-700: #c0491b;
|
|
352
|
+
--color-brand-800: #a63f17;
|
|
353
|
+
--color-brand-900: #8c3513;
|
|
354
|
+
--color-brand-950: #59220c;
|
|
313
355
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
314
356
|
--radius-button: var(--radius-full);
|
|
315
357
|
--radius-container: var(--radius-3xl);
|
|
316
358
|
}
|
|
317
359
|
|
|
318
|
-
/* ───
|
|
360
|
+
/* ─── LEMON Brand Override ─── */
|
|
319
361
|
[data-brand="lemon"] {
|
|
362
|
+
/* Lemon brand colors */
|
|
363
|
+
--color-brand-50: #F4FFE6;
|
|
364
|
+
--color-brand-100: #E5FFCC;
|
|
365
|
+
--color-brand-200: #CCFFAA;
|
|
366
|
+
--color-brand-300: #A8FF77;
|
|
367
|
+
--color-brand-400: #8DFF5C;
|
|
368
|
+
--color-brand-500: #72FF43;
|
|
369
|
+
--color-brand-600: #5CE629;
|
|
370
|
+
--color-brand-700: #47B31A;
|
|
371
|
+
--color-brand-800: #358C14;
|
|
372
|
+
--color-brand-900: #266B0F;
|
|
373
|
+
--color-brand-950: #1A4A0A;
|
|
320
374
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
321
375
|
--radius-button: var(--radius-full);
|
|
322
376
|
--radius-container: var(--radius-3xl);
|
|
323
377
|
}
|
|
324
378
|
|
|
379
|
+
/* ─── EMBER Brand Override ─── */
|
|
380
|
+
[data-brand="ember"] {
|
|
381
|
+
/* Ember brand: Neutral palette with black primary buttons */
|
|
382
|
+
--color-brand-50: #f8fafc;
|
|
383
|
+
--color-brand-100: #f1f5f9;
|
|
384
|
+
--color-brand-200: #e2e8f0;
|
|
385
|
+
--color-brand-300: #cbd5e1;
|
|
386
|
+
--color-brand-400: #94a3b8;
|
|
387
|
+
--color-brand-500: #475569;
|
|
388
|
+
--color-brand-600: #334155;
|
|
389
|
+
--color-brand-700: #1e293b;
|
|
390
|
+
--color-brand-800: #0f172a;
|
|
391
|
+
--color-brand-900: #020617;
|
|
392
|
+
--color-brand-950: #000000;
|
|
393
|
+
/* Derived: button="md" (12px radius, more refined than pill) */
|
|
394
|
+
--radius-button: var(--radius-md);
|
|
395
|
+
--radius-container: var(--radius-xl);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/* ─── Brand-Specific Semantic Overrides ─── */
|
|
399
|
+
/* Orion, Red, Orange, Deepblue: interactive primary text is ALWAYS white */
|
|
400
|
+
[data-theme="light"][data-brand="orion"],
|
|
401
|
+
[data-theme="dark"][data-brand="orion"],
|
|
402
|
+
[data-theme="light"][data-brand="red"],
|
|
403
|
+
[data-theme="dark"][data-brand="red"],
|
|
404
|
+
[data-theme="light"][data-brand="orange"],
|
|
405
|
+
[data-theme="dark"][data-brand="orange"],
|
|
406
|
+
[data-theme="light"][data-brand="deepblue"],
|
|
407
|
+
[data-theme="dark"][data-brand="deepblue"] {
|
|
408
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Lemon: dark text in light mode, white in dark mode */
|
|
412
|
+
[data-theme="light"][data-brand="lemon"] {
|
|
413
|
+
--interactive-primary-text: var(--color-neutral-1000);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
[data-theme="dark"][data-brand="lemon"] {
|
|
417
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
/* Ember: Black primary buttons in light mode, light grey in dark mode */
|
|
421
|
+
[data-theme="light"][data-brand="ember"] {
|
|
422
|
+
--interactive-primary: var(--color-neutral-900);
|
|
423
|
+
--interactive-primary-hover: var(--color-neutral-700);
|
|
424
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
[data-theme="dark"][data-brand="ember"] {
|
|
428
|
+
--interactive-primary: var(--color-neutral-100);
|
|
429
|
+
--interactive-primary-hover: var(--color-neutral-0);
|
|
430
|
+
--interactive-primary-text: var(--color-neutral-900);
|
|
431
|
+
}
|
|
432
|
+
|
|
325
433
|
|
|
326
434
|
|
|
327
435
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -364,7 +472,7 @@
|
|
|
364
472
|
|
|
365
473
|
._breadcrumb_12bqk_8{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);list-style:none;margin:0;padding:0;font-family:var(--font-secondary)}._item_12bqk_20{display:flex;align-items:center}._link_12bqk_26{display:inline-flex;align-items:center;gap:var(--spacing-2);font-weight:var(--font-weight-regular);color:var(--text-secondary);text-decoration:none;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);transition:all var(--transition-fast)}._link_12bqk_26:hover{color:var(--text-primary);background:var(--surface-subtle)}._link_12bqk_26:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._current_12bqk_49{display:inline-flex;align-items:center;gap:var(--spacing-2);font-weight:var(--font-weight-medium);color:var(--text-primary);padding:var(--spacing-1) var(--spacing-2)}._separator_12bqk_59{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);-webkit-user-select:none;user-select:none;flex-shrink:0}._chevron_12bqk_69{width:16px;height:16px}._chevron_12bqk_69:after{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:2px}._slash_12bqk_86:after{content:"/";font-weight:var(--font-weight-regular);font-size:.875em;opacity:.5}._icon_12bqk_94{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.7}._link_12bqk_26:hover ._icon_12bqk_94,._current_12bqk_49 ._icon_12bqk_94{opacity:1}._homeIcon_12bqk_112{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}._ellipsis_12bqk_120{display:inline-flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;padding:var(--spacing-1) var(--spacing-2);letter-spacing:2px}._sm_12bqk_135 ._link_12bqk_26,._sm_12bqk_135 ._current_12bqk_49,._sm_12bqk_135 ._ellipsis_12bqk_120{font-size:var(--font-size-12);padding:2px var(--spacing-1)}._sm_12bqk_135 ._icon_12bqk_94,._sm_12bqk_135 ._homeIcon_12bqk_112,._sm_12bqk_135 ._separator_12bqk_59{width:14px;height:14px}._sm_12bqk_135 ._chevron_12bqk_69:after{width:5px;height:5px}._md_12bqk_158 ._link_12bqk_26,._md_12bqk_158 ._current_12bqk_49,._md_12bqk_158 ._ellipsis_12bqk_120{font-size:var(--font-size-14)}._md_12bqk_158 ._icon_12bqk_94,._md_12bqk_158 ._homeIcon_12bqk_112,._md_12bqk_158 ._separator_12bqk_59{width:16px;height:16px}._lg_12bqk_175 ._link_12bqk_26,._lg_12bqk_175 ._current_12bqk_49,._lg_12bqk_175 ._ellipsis_12bqk_120{font-size:var(--font-size-16);padding:var(--spacing-1) var(--spacing-2)}._lg_12bqk_175 ._icon_12bqk_94,._lg_12bqk_175 ._homeIcon_12bqk_112,._lg_12bqk_175 ._separator_12bqk_59{width:18px;height:18px}._lg_12bqk_175 ._chevron_12bqk_69:after{width:7px;height:7px}
|
|
366
474
|
|
|
367
|
-
.
|
|
475
|
+
._button_gjg2h_9{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-secondary);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s cubic-bezier(.34,1.56,.64,1);border:1px solid transparent;outline:none}._button_gjg2h_9:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._button_gjg2h_9:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._primary_gjg2h_49{background:var(--interactive-primary);color:var(--interactive-primary-text)}._primary_gjg2h_49:hover:not(:disabled){background:var(--interactive-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._primary_gjg2h_49:active:not(:disabled){transform:translateY(1px)}._secondary_gjg2h_65{background:var(--interactive-secondary);color:var(--interactive-secondary-text);border:1px solid var(--border-subtle)}._secondary_gjg2h_65:hover:not(:disabled){background:var(--interactive-secondary-hover);border-color:var(--border-subtle);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._secondary_gjg2h_65:active:not(:disabled){background:var(--surface-layer);transform:translateY(1px)}[data-theme=dark] ._secondary_gjg2h_65{background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);color:var(--text-primary);backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)));-webkit-backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)))}[data-theme=dark] ._secondary_gjg2h_65:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 22%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-theme=dark] ._secondary_gjg2h_65:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}._secondaryInverse_gjg2h_104{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent)}._secondaryInverse_gjg2h_104:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._secondaryInverse_gjg2h_104:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}._ghost_gjg2h_124{background:transparent;color:var(--text-primary)}._ghost_gjg2h_124:hover:not(:disabled){background:var(--interactive-ghost-hover);transform:translateY(var(--mode-hover-lift));box-shadow:0 0 0 4px color-mix(in srgb,var(--text-primary) 5%,transparent)}._ghost_gjg2h_124:active:not(:disabled){transform:scale(.98)}._ghostInverse_gjg2h_141{background:transparent;color:var(--color-neutral-0)}._ghostInverse_gjg2h_141:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);transform:translateY(var(--mode-hover-lift));box-shadow:0 0 0 4px color-mix(in srgb,var(--color-neutral-0) 8%,transparent)}._ghostInverse_gjg2h_141:active:not(:disabled){transform:scale(.98)}._danger_gjg2h_157{background:var(--status-error);color:var(--color-neutral-0)}._danger_gjg2h_157:hover:not(:disabled){background:color-mix(in srgb,var(--status-error) 85%,var(--color-neutral-1000));transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._danger_gjg2h_157:active:not(:disabled){transform:translateY(1px)}._inverse_gjg2h_178{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}._inverse_gjg2h_178:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900));transform:translateY(-2px);box-shadow:0 4px 12px -2px #0000001a}._inverse_gjg2h_178:active:not(:disabled){transform:translateY(1px)}[data-brand=lemon] ._inverse_gjg2h_178{color:var(--color-neutral-1000)}._sm_gjg2h_207{height:32px;padding:0 var(--spacing-3);font-size:var(--font-size-12);border-radius:var(--radius-button)}._md_gjg2h_214{height:40px;padding:0 var(--spacing-4);font-size:var(--font-size-16);border-radius:var(--radius-button)}._lg_gjg2h_221{height:48px;padding:0 var(--spacing-6);font-size:var(--font-size-18);border-radius:var(--radius-button)}._fullWidth_gjg2h_233{width:100%}._iconOnly_gjg2h_238._sm_gjg2h_207{width:32px;padding:0}._iconOnly_gjg2h_238._md_gjg2h_214{width:40px;padding:0}._iconOnly_gjg2h_238._lg_gjg2h_221{width:48px;padding:0}._loading_gjg2h_256{position:relative;pointer-events:none}._spinner_gjg2h_261{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;animation:_spin_gjg2h_261 .6s linear infinite}._primary_gjg2h_49 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary-text);border-top-color:transparent}._secondary_gjg2h_65 ._spinner_gjg2h_261{border:2px solid var(--text-primary);border-top-color:transparent}._secondaryInverse_gjg2h_104 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}._ghost_gjg2h_124 ._spinner_gjg2h_261{border:2px solid var(--text-primary);border-top-color:transparent}._ghostInverse_gjg2h_141 ._spinner_gjg2h_261,._danger_gjg2h_157 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}._inverse_gjg2h_178 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-brand=lemon] ._inverse_gjg2h_178 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-1000);border-top-color:transparent}[data-theme=light][data-brand=ember] ._primary_gjg2h_49{background:var(--color-neutral-900);color:var(--color-neutral-0)}[data-theme=light][data-brand=ember] ._primary_gjg2h_49:hover:not(:disabled){background:var(--color-neutral-700)}[data-theme=dark][data-brand=ember] ._primary_gjg2h_49{background:var(--color-neutral-100);color:var(--color-neutral-900)}[data-theme=dark][data-brand=ember] ._primary_gjg2h_49:hover:not(:disabled){background:var(--color-neutral-0)}._loadingContent_gjg2h_339{visibility:hidden}[data-dark-bg=true] ._primary_gjg2h_49{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}[data-dark-bg=true] ._primary_gjg2h_49:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900))}[data-dark-bg=true] ._primary_gjg2h_49:active:not(:disabled){transform:translateY(1px)}[data-dark-bg=true] ._secondary_gjg2h_65{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}[data-dark-bg=true] ._secondary_gjg2h_65:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}[data-dark-bg=true] ._secondary_gjg2h_65:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}[data-dark-bg=true] ._ghost_gjg2h_124{background:transparent;color:var(--color-neutral-0)}[data-dark-bg=true] ._ghost_gjg2h_124:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-dark-bg=true] ._ghost_gjg2h_124:active:not(:disabled){transform:scale(.98)}[data-dark-bg=true] ._primary_gjg2h_49 ._spinner_gjg2h_261{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-dark-bg=true] ._secondary_gjg2h_65 ._spinner_gjg2h_261,[data-dark-bg=true] ._ghost_gjg2h_124 ._spinner_gjg2h_261{border:2px solid var(--color-neutral-0);border-top-color:transparent}[data-brand=lemon][data-dark-bg=true] ._primary_gjg2h_49{color:var(--color-neutral-1000)}@keyframes _spin_gjg2h_261{to{transform:translate(-50%,-50%) rotate(360deg)}}._icon_gjg2h_238{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}._iconRight_gjg2h_437{order:1}
|
|
368
476
|
|
|
369
477
|
._calendar_1wpk4_7{display:inline-flex;flex-direction:column;padding:var(--spacing-3);font-family:var(--font-secondary);-webkit-user-select:none;user-select:none}._header_1wpk4_19{display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-1);margin-bottom:var(--spacing-2)}._monthLabel_1wpk4_27{font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);color:var(--text-primary)}._grid_1wpk4_37{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}._weekday_1wpk4_44{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--text-tertiary)}._day_1wpk4_59{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;font-size:var(--font-size-14);font-family:var(--font-secondary);color:var(--text-primary);background:transparent;border:none;border-radius:var(--radius-button);cursor:pointer;transition:all var(--transition-fast);position:relative}._day_1wpk4_59:hover:not(._disabled_1wpk4_77):not(._selected_1wpk4_77):not(._rangeStart_1wpk4_77):not(._rangeMiddle_1wpk4_77):not(._rangeEnd_1wpk4_78){background:var(--interactive-ghost-hover)}._day_1wpk4_59:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px;z-index:var(--z-dropdown)}._day_1wpk4_59:active:not(._disabled_1wpk4_77){transform:scale(.95)}._today_1wpk4_94:not(._selected_1wpk4_77):not(._rangeStart_1wpk4_77):not(._rangeEnd_1wpk4_78){font-weight:600;color:var(--interactive-primary)}._selected_1wpk4_77{background:var(--interactive-primary);color:var(--interactive-primary-text);font-weight:var(--font-weight-semibold)}._selected_1wpk4_77:hover{background:var(--interactive-primary-hover)}._rangeStart_1wpk4_77:before,._rangeMiddle_1wpk4_77:before,._rangeEnd_1wpk4_78:before{content:"";position:absolute;top:0;bottom:0;background:var(--soft-brand);z-index:-1}._rangeStart_1wpk4_77:before{left:50%;right:calc(var(--spacing-1) * -.5)}._rangeMiddle_1wpk4_77:before{left:calc(var(--spacing-1) * -.5);right:calc(var(--spacing-1) * -.5)}._rangeEnd_1wpk4_78:before{left:calc(var(--spacing-1) * -.5);right:50%}._rangeStart_1wpk4_77:hover,._rangeEnd_1wpk4_78:hover{background:var(--interactive-primary-hover)}._rangeStart_1wpk4_77{background:var(--interactive-primary);color:var(--interactive-primary-text);border-radius:var(--radius-button);font-weight:var(--font-weight-semibold)}._rangeMiddle_1wpk4_77{background:transparent;color:var(--text-primary);border-radius:0}._rangeEnd_1wpk4_78{background:var(--interactive-primary);color:var(--interactive-primary-text);border-radius:var(--radius-button);font-weight:var(--font-weight-semibold)}._rangeStart_1wpk4_77._rangeEnd_1wpk4_78:before{display:none}._outside_1wpk4_183{color:var(--text-tertiary);opacity:.5}._disabled_1wpk4_77{color:var(--text-tertiary);opacity:.35;cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){._day_1wpk4_59{transition:none}}
|
|
370
478
|
|
package/dist/theme.css
CHANGED
|
@@ -106,6 +106,11 @@
|
|
|
106
106
|
--blur-md: 8px;
|
|
107
107
|
--blur-lg: 12px;
|
|
108
108
|
--blur-xl: 24px;
|
|
109
|
+
|
|
110
|
+
/* Hover Animation Tokens */
|
|
111
|
+
--mode-hover-lift: -2px;
|
|
112
|
+
--mode-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
|
|
113
|
+
--mode-hover-duration: 200ms;
|
|
109
114
|
}
|
|
110
115
|
|
|
111
116
|
/* ─── Light Theme Semantics ─── */
|
|
@@ -279,29 +284,132 @@
|
|
|
279
284
|
|
|
280
285
|
/* ─── Deepblue Radius ─── */
|
|
281
286
|
[data-brand="deepblue"] {
|
|
287
|
+
/* Deepblue brand colors */
|
|
288
|
+
--color-brand-50: #e6f2ff;
|
|
289
|
+
--color-brand-100: #b3d9ff;
|
|
290
|
+
--color-brand-200: #80bfff;
|
|
291
|
+
--color-brand-300: #4da6ff;
|
|
292
|
+
--color-brand-400: #1a8cff;
|
|
293
|
+
--color-brand-500: #006FBA;
|
|
294
|
+
--color-brand-600: #0062a6;
|
|
295
|
+
--color-brand-700: #005592;
|
|
296
|
+
--color-brand-800: #00487d;
|
|
297
|
+
--color-brand-900: #003b69;
|
|
298
|
+
--color-brand-950: #002540;
|
|
282
299
|
/* Derived: button="md" (12px) → container="xl" (24px) */
|
|
283
300
|
--radius-button: var(--radius-md);
|
|
284
301
|
--radius-container: var(--radius-xl);
|
|
285
302
|
}
|
|
286
303
|
|
|
287
304
|
/* ─── Red Radius ─── */
|
|
305
|
+
/* ─── RED Brand Override ─── */
|
|
288
306
|
[data-brand="red"] {
|
|
307
|
+
/* Red brand colors */
|
|
308
|
+
--color-brand-50: #fdf2f2;
|
|
309
|
+
--color-brand-100: #fde8e8;
|
|
310
|
+
--color-brand-200: #fbd5d5;
|
|
311
|
+
--color-brand-300: #f8b4b4;
|
|
312
|
+
--color-brand-400: #f08282;
|
|
313
|
+
--color-brand-500: #D7282F;
|
|
314
|
+
--color-brand-600: #b91c22;
|
|
315
|
+
--color-brand-700: #93151b;
|
|
316
|
+
--color-brand-800: #7a151b;
|
|
317
|
+
--color-brand-900: #661619;
|
|
318
|
+
--color-brand-950: #3b090b;
|
|
289
319
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
290
320
|
--radius-button: var(--radius-full);
|
|
291
321
|
--radius-container: var(--radius-3xl);
|
|
292
322
|
}
|
|
293
323
|
|
|
294
|
-
/* ───
|
|
324
|
+
/* ─── ORANGE Brand Override ─── */
|
|
295
325
|
[data-brand="orange"] {
|
|
326
|
+
/* Orange brand colors */
|
|
327
|
+
--color-brand-50: #fef0eb;
|
|
328
|
+
--color-brand-100: #fdd5c9;
|
|
329
|
+
--color-brand-200: #fcb9a5;
|
|
330
|
+
--color-brand-300: #fa9d80;
|
|
331
|
+
--color-brand-400: #f87d52;
|
|
332
|
+
--color-brand-500: #F15D22;
|
|
333
|
+
--color-brand-600: #d9531f;
|
|
334
|
+
--color-brand-700: #c0491b;
|
|
335
|
+
--color-brand-800: #a63f17;
|
|
336
|
+
--color-brand-900: #8c3513;
|
|
337
|
+
--color-brand-950: #59220c;
|
|
296
338
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
297
339
|
--radius-button: var(--radius-full);
|
|
298
340
|
--radius-container: var(--radius-3xl);
|
|
299
341
|
}
|
|
300
342
|
|
|
301
|
-
/* ───
|
|
343
|
+
/* ─── LEMON Brand Override ─── */
|
|
302
344
|
[data-brand="lemon"] {
|
|
345
|
+
/* Lemon brand colors */
|
|
346
|
+
--color-brand-50: #F4FFE6;
|
|
347
|
+
--color-brand-100: #E5FFCC;
|
|
348
|
+
--color-brand-200: #CCFFAA;
|
|
349
|
+
--color-brand-300: #A8FF77;
|
|
350
|
+
--color-brand-400: #8DFF5C;
|
|
351
|
+
--color-brand-500: #72FF43;
|
|
352
|
+
--color-brand-600: #5CE629;
|
|
353
|
+
--color-brand-700: #47B31A;
|
|
354
|
+
--color-brand-800: #358C14;
|
|
355
|
+
--color-brand-900: #266B0F;
|
|
356
|
+
--color-brand-950: #1A4A0A;
|
|
303
357
|
/* Derived: button="full" (9999px) → container="3xl" (36px) */
|
|
304
358
|
--radius-button: var(--radius-full);
|
|
305
359
|
--radius-container: var(--radius-3xl);
|
|
306
360
|
}
|
|
307
361
|
|
|
362
|
+
/* ─── EMBER Brand Override ─── */
|
|
363
|
+
[data-brand="ember"] {
|
|
364
|
+
/* Ember brand: Neutral palette with black primary buttons */
|
|
365
|
+
--color-brand-50: #f8fafc;
|
|
366
|
+
--color-brand-100: #f1f5f9;
|
|
367
|
+
--color-brand-200: #e2e8f0;
|
|
368
|
+
--color-brand-300: #cbd5e1;
|
|
369
|
+
--color-brand-400: #94a3b8;
|
|
370
|
+
--color-brand-500: #475569;
|
|
371
|
+
--color-brand-600: #334155;
|
|
372
|
+
--color-brand-700: #1e293b;
|
|
373
|
+
--color-brand-800: #0f172a;
|
|
374
|
+
--color-brand-900: #020617;
|
|
375
|
+
--color-brand-950: #000000;
|
|
376
|
+
/* Derived: button="md" (12px radius, more refined than pill) */
|
|
377
|
+
--radius-button: var(--radius-md);
|
|
378
|
+
--radius-container: var(--radius-xl);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* ─── Brand-Specific Semantic Overrides ─── */
|
|
382
|
+
/* Orion, Red, Orange, Deepblue: interactive primary text is ALWAYS white */
|
|
383
|
+
[data-theme="light"][data-brand="orion"],
|
|
384
|
+
[data-theme="dark"][data-brand="orion"],
|
|
385
|
+
[data-theme="light"][data-brand="red"],
|
|
386
|
+
[data-theme="dark"][data-brand="red"],
|
|
387
|
+
[data-theme="light"][data-brand="orange"],
|
|
388
|
+
[data-theme="dark"][data-brand="orange"],
|
|
389
|
+
[data-theme="light"][data-brand="deepblue"],
|
|
390
|
+
[data-theme="dark"][data-brand="deepblue"] {
|
|
391
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/* Lemon: dark text in light mode, white in dark mode */
|
|
395
|
+
[data-theme="light"][data-brand="lemon"] {
|
|
396
|
+
--interactive-primary-text: var(--color-neutral-1000);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
[data-theme="dark"][data-brand="lemon"] {
|
|
400
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* Ember: Black primary buttons in light mode, light grey in dark mode */
|
|
404
|
+
[data-theme="light"][data-brand="ember"] {
|
|
405
|
+
--interactive-primary: var(--color-neutral-900);
|
|
406
|
+
--interactive-primary-hover: var(--color-neutral-700);
|
|
407
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
[data-theme="dark"][data-brand="ember"] {
|
|
411
|
+
--interactive-primary: var(--color-neutral-100);
|
|
412
|
+
--interactive-primary-hover: var(--color-neutral-0);
|
|
413
|
+
--interactive-primary-text: var(--color-neutral-900);
|
|
414
|
+
}
|
|
415
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orion-ds/react",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Orion Design System - React component library with 40+ AI-ready components and 9 templates",
|
|
6
6
|
"author": "Orion Design System Team",
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
"BUNDLE_OPTIMIZATION.md"
|
|
81
81
|
],
|
|
82
82
|
"scripts": {
|
|
83
|
+
"postinstall": "node scripts/validate-install.js",
|
|
83
84
|
"copy:assets": "mkdir -p assets/tokens && cp ../../theme.css assets/theme.css && cp ../../tokens/generated.css assets/tokens/generated.css",
|
|
84
85
|
"build": "npm run copy:assets && vite build && npm run build:styles",
|
|
85
86
|
"build:styles": "node scripts/bundle-styles.js",
|