@tristan.stavast/blueprintx 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +97 -0
  2. package/fesm2022/tristan.stavast-blueprintx.mjs +6845 -0
  3. package/fesm2022/tristan.stavast-blueprintx.mjs.map +1 -0
  4. package/index.d.ts +2728 -0
  5. package/package.json +58 -0
  6. package/styles/_core-tokens.scss +68 -0
  7. package/styles/_dark-theme.scss +50 -0
  8. package/styles/_light-theme.scss +50 -0
  9. package/styles/index.scss +11 -0
  10. package/styles/themes/auto.scss +27 -0
  11. package/styles/themes/dark.scss +14 -0
  12. package/styles/themes/light.scss +15 -0
  13. package/themes/auto.css +1 -0
  14. package/themes/dark.css +1 -0
  15. package/themes/light.css +1 -0
package/package.json ADDED
@@ -0,0 +1,58 @@
1
+ {
2
+ "name": "@tristan.stavast/blueprintx",
3
+ "version": "0.1.0",
4
+ "description": "BlueprintX — a modern, accessible Angular component library.",
5
+ "keywords": [
6
+ "angular",
7
+ "components",
8
+ "ui",
9
+ "design-system",
10
+ "blueprintx"
11
+ ],
12
+ "license": "MIT",
13
+ "sideEffects": false,
14
+ "peerDependencies": {
15
+ "@angular/cdk": "^20.0.0",
16
+ "@angular/common": "^20.3.0",
17
+ "@angular/core": "^20.3.0",
18
+ "@angular/platform-browser": "^20.3.0"
19
+ },
20
+ "dependencies": {
21
+ "tslib": "^2.3.0"
22
+ },
23
+ "exports": {
24
+ "./styles": {
25
+ "sass": "./styles/index.scss"
26
+ },
27
+ "./themes/light.css": {
28
+ "style": "./themes/light.css",
29
+ "default": "./themes/light.css"
30
+ },
31
+ "./themes/dark.css": {
32
+ "style": "./themes/dark.css",
33
+ "default": "./themes/dark.css"
34
+ },
35
+ "./themes/auto.css": {
36
+ "style": "./themes/auto.css",
37
+ "default": "./themes/auto.css"
38
+ },
39
+ "./themes/light": {
40
+ "sass": "./styles/themes/light.scss"
41
+ },
42
+ "./themes/dark": {
43
+ "sass": "./styles/themes/dark.scss"
44
+ },
45
+ "./themes/auto": {
46
+ "sass": "./styles/themes/auto.scss"
47
+ },
48
+ "./package.json": {
49
+ "default": "./package.json"
50
+ },
51
+ ".": {
52
+ "types": "./index.d.ts",
53
+ "default": "./fesm2022/tristan.stavast-blueprintx.mjs"
54
+ }
55
+ },
56
+ "module": "fesm2022/tristan.stavast-blueprintx.mjs",
57
+ "typings": "index.d.ts"
58
+ }
package/styles/_core-tokens.scss ADDED
@@ -0,0 +1,68 @@
1
+ // BlueprintX — Core design tokens (theme-agnostic)
2
+ // These do not change between light/dark. They define the shape, rhythm,
3
+ // typography, elevation and motion of the system as CSS custom properties.
4
+ // Consumed everywhere as var(--bpx-...). Included by every theme.
5
+
6
+ @mixin core-tokens {
7
+ // ── Spacing scale (4px base) ────────────────────────────────
8
+ --bpx-space-0: 0;
9
+ --bpx-space-1: 0.25rem; // 4px
10
+ --bpx-space-2: 0.5rem; // 8px
11
+ --bpx-space-3: 0.75rem; // 12px
12
+ --bpx-space-4: 1rem; // 16px
13
+ --bpx-space-5: 1.5rem; // 24px
14
+ --bpx-space-6: 2rem; // 32px
15
+ --bpx-space-7: 3rem; // 48px
16
+ --bpx-space-8: 4rem; // 64px
17
+
18
+ // ── Radius ──────────────────────────────────────────────────
19
+ --bpx-radius-sm: 0.25rem;
20
+ --bpx-radius-md: 0.5rem;
21
+ --bpx-radius-lg: 0.75rem;
22
+ --bpx-radius-xl: 1rem;
23
+ --bpx-radius-full: 9999px;
24
+
25
+ // ── Typography ──────────────────────────────────────────────
26
+ --bpx-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
27
+ --bpx-font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
28
+
29
+ --bpx-font-size-xs: 0.75rem;
30
+ --bpx-font-size-sm: 0.875rem;
31
+ --bpx-font-size-md: 1rem;
32
+ --bpx-font-size-lg: 1.125rem;
33
+ --bpx-font-size-xl: 1.25rem;
34
+ --bpx-font-size-2xl: 1.5rem;
35
+
36
+ --bpx-font-weight-normal: 400;
37
+ --bpx-font-weight-medium: 500;
38
+ --bpx-font-weight-semibold: 600;
39
+ --bpx-font-weight-bold: 700;
40
+
41
+ --bpx-line-height-tight: 1.25;
42
+ --bpx-line-height-normal: 1.5;
43
+
44
+ // ── Elevation (shadows) ─────────────────────────────────────
45
+ --bpx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
46
+ --bpx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
47
+ --bpx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
48
+ --bpx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
49
+
50
+ // ── Motion ──────────────────────────────────────────────────
51
+ --bpx-duration-fast: 120ms;
52
+ --bpx-duration-normal: 200ms;
53
+ --bpx-duration-slow: 320ms;
54
+ --bpx-easing-standard: cubic-bezier(0.2, 0, 0, 1);
55
+ --bpx-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
56
+
57
+ // ── Z-index layers ──────────────────────────────────────────
58
+ --bpx-z-dropdown: 1000;
59
+ --bpx-z-sticky: 1100;
60
+ --bpx-z-overlay: 1200;
61
+ --bpx-z-modal: 1300;
62
+ --bpx-z-toast: 1400;
63
+ --bpx-z-tooltip: 1500;
64
+
65
+ // ── Focus ring ──────────────────────────────────────────────
66
+ --bpx-focus-ring-width: 2px;
67
+ --bpx-focus-ring-offset: 2px;
68
+ }
package/styles/_dark-theme.scss ADDED
@@ -0,0 +1,50 @@
1
+ // BlueprintX — Dark theme color tokens
2
+ // Same semantic contract as the light theme, remapped for dark surfaces.
3
+
4
+ @mixin dark-theme {
5
+ color-scheme: dark;
6
+
7
+ // ── Surfaces ────────────────────────────────────────────────
8
+ --bpx-color-background: #0f172a;
9
+ --bpx-color-surface: #1e293b;
10
+ --bpx-color-surface-raised: #273549;
11
+ --bpx-color-surface-sunken: #0b1220;
12
+ --bpx-color-overlay-backdrop: rgb(0 0 0 / 0.6);
13
+
14
+ // ── Text ────────────────────────────────────────────────────
15
+ --bpx-color-text: #f1f5f9;
16
+ --bpx-color-text-muted: #cbd5e1;
17
+ --bpx-color-text-subtle: #64748b;
18
+ --bpx-color-text-on-accent: #ffffff;
19
+
20
+ // ── Borders ─────────────────────────────────────────────────
21
+ --bpx-color-border: #334155;
22
+ --bpx-color-border-strong: #475569;
23
+
24
+ // ── Primary (brand) ─────────────────────────────────────────
25
+ --bpx-color-primary: #3b82f6;
26
+ --bpx-color-primary-hover: #60a5fa;
27
+ --bpx-color-primary-active: #93c5fd;
28
+ --bpx-color-primary-subtle: #172554;
29
+ --bpx-color-primary-subtle-hover: #1e3a8a;
30
+
31
+ // ── Neutral (secondary) ─────────────────────────────────────
32
+ --bpx-color-neutral: #334155;
33
+ --bpx-color-neutral-hover: #3f4d63;
34
+ --bpx-color-neutral-active: #475569;
35
+
36
+ // ── Status ──────────────────────────────────────────────────
37
+ --bpx-color-success: #22c55e;
38
+ --bpx-color-success-subtle: #052e16;
39
+ --bpx-color-warning: #f59e0b;
40
+ --bpx-color-warning-subtle: #451a03;
41
+ --bpx-color-danger: #ef4444;
42
+ --bpx-color-danger-hover: #f87171;
43
+ --bpx-color-danger-active: #fca5a5;
44
+ --bpx-color-danger-subtle: #450a0a;
45
+ --bpx-color-info: #06b6d4;
46
+ --bpx-color-info-subtle: #083344;
47
+
48
+ // ── Focus ring color ────────────────────────────────────────
49
+ --bpx-color-focus-ring: #60a5fa;
50
+ }
package/styles/_light-theme.scss ADDED
@@ -0,0 +1,50 @@
1
+ // BlueprintX — Light theme color tokens
2
+ // Semantic, role-based tokens. Components never reference raw hex — only these.
3
+
4
+ @mixin light-theme {
5
+ color-scheme: light;
6
+
7
+ // ── Surfaces ────────────────────────────────────────────────
8
+ --bpx-color-background: #ffffff;
9
+ --bpx-color-surface: #ffffff;
10
+ --bpx-color-surface-raised: #ffffff;
11
+ --bpx-color-surface-sunken: #f9fafb;
12
+ --bpx-color-overlay-backdrop: rgb(15 23 42 / 0.45);
13
+
14
+ // ── Text ────────────────────────────────────────────────────
15
+ --bpx-color-text: #0f172a;
16
+ --bpx-color-text-muted: #475569;
17
+ --bpx-color-text-subtle: #94a3b8;
18
+ --bpx-color-text-on-accent: #ffffff;
19
+
20
+ // ── Borders ─────────────────────────────────────────────────
21
+ --bpx-color-border: #e2e8f0;
22
+ --bpx-color-border-strong: #cbd5e1;
23
+
24
+ // ── Primary (brand) ─────────────────────────────────────────
25
+ --bpx-color-primary: #2563eb;
26
+ --bpx-color-primary-hover: #1d4ed8;
27
+ --bpx-color-primary-active: #1e40af;
28
+ --bpx-color-primary-subtle: #eff6ff;
29
+ --bpx-color-primary-subtle-hover: #dbeafe;
30
+
31
+ // ── Neutral (secondary) ─────────────────────────────────────
32
+ --bpx-color-neutral: #f1f5f9;
33
+ --bpx-color-neutral-hover: #e2e8f0;
34
+ --bpx-color-neutral-active: #cbd5e1;
35
+
36
+ // ── Status ──────────────────────────────────────────────────
37
+ --bpx-color-success: #16a34a;
38
+ --bpx-color-success-subtle: #f0fdf4;
39
+ --bpx-color-warning: #d97706;
40
+ --bpx-color-warning-subtle: #fffbeb;
41
+ --bpx-color-danger: #dc2626;
42
+ --bpx-color-danger-hover: #b91c1c;
43
+ --bpx-color-danger-active: #991b1b;
44
+ --bpx-color-danger-subtle: #fef2f2;
45
+ --bpx-color-info: #0891b2;
46
+ --bpx-color-info-subtle: #ecfeff;
47
+
48
+ // ── Focus ring color ────────────────────────────────────────
49
+ --bpx-color-focus-ring: #2563eb;
50
+ }
package/styles/index.scss ADDED
@@ -0,0 +1,11 @@
1
+ // BlueprintX — Public SCSS API
2
+ // Advanced consumers can build a custom theme:
3
+ //
4
+ // @use 'blueprintx/styles' as bpx;
5
+ // :root { @include bpx.core-tokens; @include bpx.light-theme; }
6
+ //
7
+ // Or override individual tokens after including a preset theme.
8
+
9
+ @forward 'core-tokens';
10
+ @forward 'light-theme';
11
+ @forward 'dark-theme';
package/styles/themes/auto.scss ADDED
@@ -0,0 +1,27 @@
1
+ // BlueprintX — AUTO theme
2
+ // Light by default, dark when the OS requests it. Also supports manual
3
+ // override via .bpx-theme-light / .bpx-theme-dark on any ancestor.
4
+ // @use 'blueprintx/themes/auto';
5
+
6
+ @use '../core-tokens' as core;
7
+ @use '../light-theme' as light;
8
+ @use '../dark-theme' as dark;
9
+
10
+ :root {
11
+ @include core.core-tokens;
12
+ @include light.light-theme;
13
+ }
14
+
15
+ @media (prefers-color-scheme: dark) {
16
+ :root {
17
+ @include dark.dark-theme;
18
+ }
19
+ }
20
+
21
+ // Manual overrides always win over the media query.
22
+ .bpx-theme-light {
23
+ @include light.light-theme;
24
+ }
25
+ .bpx-theme-dark {
26
+ @include dark.dark-theme;
27
+ }
package/styles/themes/dark.scss ADDED
@@ -0,0 +1,14 @@
1
+ // BlueprintX — Prebuilt DARK theme
2
+ // Import at app root for an always-dark app:
3
+ // @use 'blueprintx/themes/dark';
4
+ //
5
+ // Applies to :root and to any subtree scoped with .bpx-theme-dark.
6
+
7
+ @use '../core-tokens' as core;
8
+ @use '../dark-theme' as dark;
9
+
10
+ :root,
11
+ .bpx-theme-dark {
12
+ @include core.core-tokens;
13
+ @include dark.dark-theme;
14
+ }
package/styles/themes/light.scss ADDED
@@ -0,0 +1,15 @@
1
+ // BlueprintX — Prebuilt LIGHT theme
2
+ // Drop-in stylesheet. Import once at your app root:
3
+ // @use 'blueprintx/themes/light'; (SCSS)
4
+ // or reference the compiled blueprintx/themes/light.css
5
+ //
6
+ // Applies to :root and to any element scoped with .bpx-theme-light.
7
+
8
+ @use '../core-tokens' as core;
9
+ @use '../light-theme' as light;
10
+
11
+ :root,
12
+ .bpx-theme-light {
13
+ @include core.core-tokens;
14
+ @include light.light-theme;
15
+ }
package/themes/auto.css ADDED
@@ -0,0 +1 @@
1
+ :root{--bpx-space-0: 0;--bpx-space-1: 0.25rem;--bpx-space-2: 0.5rem;--bpx-space-3: 0.75rem;--bpx-space-4: 1rem;--bpx-space-5: 1.5rem;--bpx-space-6: 2rem;--bpx-space-7: 3rem;--bpx-space-8: 4rem;--bpx-radius-sm: 0.25rem;--bpx-radius-md: 0.5rem;--bpx-radius-lg: 0.75rem;--bpx-radius-xl: 1rem;--bpx-radius-full: 9999px;--bpx-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--bpx-font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;--bpx-font-size-xs: 0.75rem;--bpx-font-size-sm: 0.875rem;--bpx-font-size-md: 1rem;--bpx-font-size-lg: 1.125rem;--bpx-font-size-xl: 1.25rem;--bpx-font-size-2xl: 1.5rem;--bpx-font-weight-normal: 400;--bpx-font-weight-medium: 500;--bpx-font-weight-semibold: 600;--bpx-font-weight-bold: 700;--bpx-line-height-tight: 1.25;--bpx-line-height-normal: 1.5;--bpx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--bpx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--bpx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--bpx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--bpx-duration-fast: 120ms;--bpx-duration-normal: 200ms;--bpx-duration-slow: 320ms;--bpx-easing-standard: cubic-bezier(0.2, 0, 0, 1);--bpx-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);--bpx-z-dropdown: 1000;--bpx-z-sticky: 1100;--bpx-z-overlay: 1200;--bpx-z-modal: 1300;--bpx-z-toast: 1400;--bpx-z-tooltip: 1500;--bpx-focus-ring-width: 2px;--bpx-focus-ring-offset: 2px;color-scheme:light;--bpx-color-background: #ffffff;--bpx-color-surface: #ffffff;--bpx-color-surface-raised: #ffffff;--bpx-color-surface-sunken: #f9fafb;--bpx-color-overlay-backdrop: rgb(15 23 42 / 0.45);--bpx-color-text: #0f172a;--bpx-color-text-muted: #475569;--bpx-color-text-subtle: #94a3b8;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #e2e8f0;--bpx-color-border-strong: #cbd5e1;--bpx-color-primary: #2563eb;--bpx-color-primary-hover: #1d4ed8;--bpx-color-primary-active: #1e40af;--bpx-color-primary-subtle: #eff6ff;--bpx-color-primary-subtle-hover: #dbeafe;--bpx-color-neutral: #f1f5f9;--bpx-color-neutral-hover: #e2e8f0;--bpx-color-neutral-active: #cbd5e1;--bpx-color-success: #16a34a;--bpx-color-success-subtle: #f0fdf4;--bpx-color-warning: #d97706;--bpx-color-warning-subtle: #fffbeb;--bpx-color-danger: #dc2626;--bpx-color-danger-hover: #b91c1c;--bpx-color-danger-active: #991b1b;--bpx-color-danger-subtle: #fef2f2;--bpx-color-info: #0891b2;--bpx-color-info-subtle: #ecfeff;--bpx-color-focus-ring: #2563eb}@media(prefers-color-scheme: dark){:root{color-scheme:dark;--bpx-color-background: #0f172a;--bpx-color-surface: #1e293b;--bpx-color-surface-raised: #273549;--bpx-color-surface-sunken: #0b1220;--bpx-color-overlay-backdrop: rgb(0 0 0 / 0.6);--bpx-color-text: #f1f5f9;--bpx-color-text-muted: #cbd5e1;--bpx-color-text-subtle: #64748b;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #334155;--bpx-color-border-strong: #475569;--bpx-color-primary: #3b82f6;--bpx-color-primary-hover: #60a5fa;--bpx-color-primary-active: #93c5fd;--bpx-color-primary-subtle: #172554;--bpx-color-primary-subtle-hover: #1e3a8a;--bpx-color-neutral: #334155;--bpx-color-neutral-hover: #3f4d63;--bpx-color-neutral-active: #475569;--bpx-color-success: #22c55e;--bpx-color-success-subtle: #052e16;--bpx-color-warning: #f59e0b;--bpx-color-warning-subtle: #451a03;--bpx-color-danger: #ef4444;--bpx-color-danger-hover: #f87171;--bpx-color-danger-active: #fca5a5;--bpx-color-danger-subtle: #450a0a;--bpx-color-info: #06b6d4;--bpx-color-info-subtle: #083344;--bpx-color-focus-ring: #60a5fa}}.bpx-theme-light{color-scheme:light;--bpx-color-background: #ffffff;--bpx-color-surface: #ffffff;--bpx-color-surface-raised: #ffffff;--bpx-color-surface-sunken: #f9fafb;--bpx-color-overlay-backdrop: rgb(15 23 42 / 0.45);--bpx-color-text: #0f172a;--bpx-color-text-muted: #475569;--bpx-color-text-subtle: #94a3b8;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #e2e8f0;--bpx-color-border-strong: #cbd5e1;--bpx-color-primary: #2563eb;--bpx-color-primary-hover: #1d4ed8;--bpx-color-primary-active: #1e40af;--bpx-color-primary-subtle: #eff6ff;--bpx-color-primary-subtle-hover: #dbeafe;--bpx-color-neutral: #f1f5f9;--bpx-color-neutral-hover: #e2e8f0;--bpx-color-neutral-active: #cbd5e1;--bpx-color-success: #16a34a;--bpx-color-success-subtle: #f0fdf4;--bpx-color-warning: #d97706;--bpx-color-warning-subtle: #fffbeb;--bpx-color-danger: #dc2626;--bpx-color-danger-hover: #b91c1c;--bpx-color-danger-active: #991b1b;--bpx-color-danger-subtle: #fef2f2;--bpx-color-info: #0891b2;--bpx-color-info-subtle: #ecfeff;--bpx-color-focus-ring: #2563eb}.bpx-theme-dark{color-scheme:dark;--bpx-color-background: #0f172a;--bpx-color-surface: #1e293b;--bpx-color-surface-raised: #273549;--bpx-color-surface-sunken: #0b1220;--bpx-color-overlay-backdrop: rgb(0 0 0 / 0.6);--bpx-color-text: #f1f5f9;--bpx-color-text-muted: #cbd5e1;--bpx-color-text-subtle: #64748b;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #334155;--bpx-color-border-strong: #475569;--bpx-color-primary: #3b82f6;--bpx-color-primary-hover: #60a5fa;--bpx-color-primary-active: #93c5fd;--bpx-color-primary-subtle: #172554;--bpx-color-primary-subtle-hover: #1e3a8a;--bpx-color-neutral: #334155;--bpx-color-neutral-hover: #3f4d63;--bpx-color-neutral-active: #475569;--bpx-color-success: #22c55e;--bpx-color-success-subtle: #052e16;--bpx-color-warning: #f59e0b;--bpx-color-warning-subtle: #451a03;--bpx-color-danger: #ef4444;--bpx-color-danger-hover: #f87171;--bpx-color-danger-active: #fca5a5;--bpx-color-danger-subtle: #450a0a;--bpx-color-info: #06b6d4;--bpx-color-info-subtle: #083344;--bpx-color-focus-ring: #60a5fa}
package/themes/dark.css ADDED
@@ -0,0 +1 @@
1
+ :root,.bpx-theme-dark{--bpx-space-0: 0;--bpx-space-1: 0.25rem;--bpx-space-2: 0.5rem;--bpx-space-3: 0.75rem;--bpx-space-4: 1rem;--bpx-space-5: 1.5rem;--bpx-space-6: 2rem;--bpx-space-7: 3rem;--bpx-space-8: 4rem;--bpx-radius-sm: 0.25rem;--bpx-radius-md: 0.5rem;--bpx-radius-lg: 0.75rem;--bpx-radius-xl: 1rem;--bpx-radius-full: 9999px;--bpx-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--bpx-font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;--bpx-font-size-xs: 0.75rem;--bpx-font-size-sm: 0.875rem;--bpx-font-size-md: 1rem;--bpx-font-size-lg: 1.125rem;--bpx-font-size-xl: 1.25rem;--bpx-font-size-2xl: 1.5rem;--bpx-font-weight-normal: 400;--bpx-font-weight-medium: 500;--bpx-font-weight-semibold: 600;--bpx-font-weight-bold: 700;--bpx-line-height-tight: 1.25;--bpx-line-height-normal: 1.5;--bpx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--bpx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--bpx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--bpx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--bpx-duration-fast: 120ms;--bpx-duration-normal: 200ms;--bpx-duration-slow: 320ms;--bpx-easing-standard: cubic-bezier(0.2, 0, 0, 1);--bpx-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);--bpx-z-dropdown: 1000;--bpx-z-sticky: 1100;--bpx-z-overlay: 1200;--bpx-z-modal: 1300;--bpx-z-toast: 1400;--bpx-z-tooltip: 1500;--bpx-focus-ring-width: 2px;--bpx-focus-ring-offset: 2px;color-scheme:dark;--bpx-color-background: #0f172a;--bpx-color-surface: #1e293b;--bpx-color-surface-raised: #273549;--bpx-color-surface-sunken: #0b1220;--bpx-color-overlay-backdrop: rgb(0 0 0 / 0.6);--bpx-color-text: #f1f5f9;--bpx-color-text-muted: #cbd5e1;--bpx-color-text-subtle: #64748b;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #334155;--bpx-color-border-strong: #475569;--bpx-color-primary: #3b82f6;--bpx-color-primary-hover: #60a5fa;--bpx-color-primary-active: #93c5fd;--bpx-color-primary-subtle: #172554;--bpx-color-primary-subtle-hover: #1e3a8a;--bpx-color-neutral: #334155;--bpx-color-neutral-hover: #3f4d63;--bpx-color-neutral-active: #475569;--bpx-color-success: #22c55e;--bpx-color-success-subtle: #052e16;--bpx-color-warning: #f59e0b;--bpx-color-warning-subtle: #451a03;--bpx-color-danger: #ef4444;--bpx-color-danger-hover: #f87171;--bpx-color-danger-active: #fca5a5;--bpx-color-danger-subtle: #450a0a;--bpx-color-info: #06b6d4;--bpx-color-info-subtle: #083344;--bpx-color-focus-ring: #60a5fa}
package/themes/light.css ADDED
@@ -0,0 +1 @@
1
+ :root,.bpx-theme-light{--bpx-space-0: 0;--bpx-space-1: 0.25rem;--bpx-space-2: 0.5rem;--bpx-space-3: 0.75rem;--bpx-space-4: 1rem;--bpx-space-5: 1.5rem;--bpx-space-6: 2rem;--bpx-space-7: 3rem;--bpx-space-8: 4rem;--bpx-radius-sm: 0.25rem;--bpx-radius-md: 0.5rem;--bpx-radius-lg: 0.75rem;--bpx-radius-xl: 1rem;--bpx-radius-full: 9999px;--bpx-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--bpx-font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;--bpx-font-size-xs: 0.75rem;--bpx-font-size-sm: 0.875rem;--bpx-font-size-md: 1rem;--bpx-font-size-lg: 1.125rem;--bpx-font-size-xl: 1.25rem;--bpx-font-size-2xl: 1.5rem;--bpx-font-weight-normal: 400;--bpx-font-weight-medium: 500;--bpx-font-weight-semibold: 600;--bpx-font-weight-bold: 700;--bpx-line-height-tight: 1.25;--bpx-line-height-normal: 1.5;--bpx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--bpx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--bpx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--bpx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--bpx-duration-fast: 120ms;--bpx-duration-normal: 200ms;--bpx-duration-slow: 320ms;--bpx-easing-standard: cubic-bezier(0.2, 0, 0, 1);--bpx-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);--bpx-z-dropdown: 1000;--bpx-z-sticky: 1100;--bpx-z-overlay: 1200;--bpx-z-modal: 1300;--bpx-z-toast: 1400;--bpx-z-tooltip: 1500;--bpx-focus-ring-width: 2px;--bpx-focus-ring-offset: 2px;color-scheme:light;--bpx-color-background: #ffffff;--bpx-color-surface: #ffffff;--bpx-color-surface-raised: #ffffff;--bpx-color-surface-sunken: #f9fafb;--bpx-color-overlay-backdrop: rgb(15 23 42 / 0.45);--bpx-color-text: #0f172a;--bpx-color-text-muted: #475569;--bpx-color-text-subtle: #94a3b8;--bpx-color-text-on-accent: #ffffff;--bpx-color-border: #e2e8f0;--bpx-color-border-strong: #cbd5e1;--bpx-color-primary: #2563eb;--bpx-color-primary-hover: #1d4ed8;--bpx-color-primary-active: #1e40af;--bpx-color-primary-subtle: #eff6ff;--bpx-color-primary-subtle-hover: #dbeafe;--bpx-color-neutral: #f1f5f9;--bpx-color-neutral-hover: #e2e8f0;--bpx-color-neutral-active: #cbd5e1;--bpx-color-success: #16a34a;--bpx-color-success-subtle: #f0fdf4;--bpx-color-warning: #d97706;--bpx-color-warning-subtle: #fffbeb;--bpx-color-danger: #dc2626;--bpx-color-danger-hover: #b91c1c;--bpx-color-danger-active: #991b1b;--bpx-color-danger-subtle: #fef2f2;--bpx-color-info: #0891b2;--bpx-color-info-subtle: #ecfeff;--bpx-color-focus-ring: #2563eb}