@tangle-network/brand 1.31.0 → 1.31.2
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/CHANGELOG.md +12 -0
- package/README.md +3 -2
- package/bin/drift-baseline.json +15 -13
- package/dist/index.d.ts +111 -111
- package/dist/index.js +111 -111
- package/package.json +1 -1
- package/src/palette.generated.ts +111 -111
- package/src/styles/accent-on-tint.test.ts +4 -1
- package/src/styles/legacy-light.css +1104 -1032
- package/src/styles/named-themes.css +298 -597
- package/src/styles/surface-ladder.test.ts +9 -24
- package/src/styles/system.css +52 -52
- package/src/styles/theme-scopes.ts +12 -21
- package/src/styles/tokens.css +450 -939
- package/src/styles/tokens.test.ts +38 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.31.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d8990b5: Re-export canonical server-safe speaker grouping from AgentInterface; preserve every UI chat name. Record the adopted GTM heading reduction in the owning drift baseline.
|
|
8
|
+
|
|
9
|
+
## 1.31.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 1986f4e: Generate canonical and named palettes, ink tiers, status colours and accent roles from shared theme inputs. Preserve public token names and mode boundaries while giving named themes their own raised planes and wells.
|
|
14
|
+
|
|
3
15
|
## 1.31.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -87,9 +87,10 @@ Choose this **instead of** `styles`, `tokens.css` and `named-themes.css`; do not
|
|
|
87
87
|
|
|
88
88
|
This export is the shared migration boundary, **not a claim that Agent App has already migrated** and not a replacement for that package's entire stylesheet. Its component-specific variables, neutral-ramp API, keyframes and structural rules remain consumer-owned until a separate, explicit migration reconciles them. Remove duplicate shared palette declarations in that migration rather than placing competing global token systems on the same page.
|
|
89
89
|
|
|
90
|
-
The
|
|
90
|
+
The palette inputs live in `scripts/palette.mjs`; `scripts/palette-template.css` owns selectors, public names, aliases and non-colour styling. `gen-ladders.mjs` generates both canonical stylesheets, every named theme and all accent scopes. Never edit generated CSS by hand. Regenerate the palette before its compatibility projection:
|
|
91
91
|
|
|
92
92
|
```sh
|
|
93
|
+
pnpm --filter @tangle-network/brand gen:ladders
|
|
93
94
|
pnpm --filter @tangle-network/brand gen:compat
|
|
94
95
|
pnpm --filter @tangle-network/brand check:compat
|
|
95
96
|
```
|
|
@@ -122,7 +123,7 @@ import { Logo, TangleKnot } from "@tangle-network/brand";
|
|
|
122
123
|
|
|
123
124
|
Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-color` meta) import `palettes` from `@tangle-network/brand`: resolved hex values for `light`, `dark`, `websiteLight` and `websiteDark`, generated from the stylesheets by `pnpm gen:palette`. Pages styled with CSS keep using the variables.
|
|
124
125
|
|
|
125
|
-
The
|
|
126
|
+
The palette table specifies canvas hue, chroma, plane lightnesses and accent hue per theme. The generator derives neutral ink tiers from contrast targets, status inks and washes from their semantic hues, and category/accent roles from the shared hue table. Dark planes rise in OKLCH lightness; light alternates paper and wells. Named themes resolve their own sidebar, raised planes and wells. Ink remains neutral so the chosen accent signals interaction. `tokens.test.ts`, `surface-ladder.test.ts` and the generator's contrast guards protect the hierarchy and legibility. Size and colour values belong to the executable inputs rather than a second table here.
|
|
126
127
|
|
|
127
128
|
Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Role radii are one ramp: `--radius-tag` 4, `--radius-control` 8, `--radius-card` 12, `--radius-container` 16, and `--radius-pill` for every chip; `--radius-chip`, `--radius-field` and `--radius-panel` are older names of control, card and container. Every shadow is drawn in `--shadow-color`, HSL channels that are black in dark and `220 40% 8%` in light; a named theme retints its shadows by setting that one token. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
|
|
128
129
|
|
package/bin/drift-baseline.json
CHANGED
|
@@ -619,29 +619,32 @@
|
|
|
619
619
|
"roots": [
|
|
620
620
|
""
|
|
621
621
|
],
|
|
622
|
+
"exclude": [
|
|
623
|
+
":!src/lib/.server/sandbox/creative/*"
|
|
624
|
+
],
|
|
622
625
|
"branch": "master",
|
|
623
|
-
"head": "
|
|
624
|
-
"tsx_files":
|
|
625
|
-
"css_files":
|
|
626
|
+
"head": "75cdc091b353",
|
|
627
|
+
"tsx_files": 148,
|
|
628
|
+
"css_files": 5,
|
|
626
629
|
"versions": {
|
|
627
630
|
"agent-app": [
|
|
628
|
-
"0.
|
|
631
|
+
"1.0.8"
|
|
629
632
|
],
|
|
630
633
|
"brand": [
|
|
631
|
-
"1.
|
|
634
|
+
"1.31.1"
|
|
632
635
|
],
|
|
633
636
|
"sandbox-ui": [
|
|
634
|
-
"
|
|
637
|
+
"1.1.10"
|
|
635
638
|
],
|
|
636
639
|
"ui": [
|
|
637
|
-
"11.
|
|
640
|
+
"11.51.1"
|
|
638
641
|
]
|
|
639
642
|
},
|
|
640
643
|
"importing_files": {
|
|
641
|
-
"brand":
|
|
642
|
-
"ui":
|
|
643
|
-
"sandbox-ui":
|
|
644
|
-
"agent-app":
|
|
644
|
+
"brand": 1,
|
|
645
|
+
"ui": 29,
|
|
646
|
+
"sandbox-ui": 113,
|
|
647
|
+
"agent-app": 400
|
|
645
648
|
},
|
|
646
649
|
"by_file": {
|
|
647
650
|
"raw_palette": {},
|
|
@@ -662,7 +665,6 @@
|
|
|
662
665
|
},
|
|
663
666
|
"page_heading": {
|
|
664
667
|
"src/components/access-refusal.tsx": 1,
|
|
665
|
-
"src/components/workspace-terminal-panel.tsx": 2,
|
|
666
668
|
"src/root.tsx": 1,
|
|
667
669
|
"src/routes/_index.tsx": 1,
|
|
668
670
|
"src/routes/admin.integrations.tsx": 1,
|
|
@@ -692,7 +694,7 @@
|
|
|
692
694
|
"size_literal": 0,
|
|
693
695
|
"native_control": 0,
|
|
694
696
|
"control_override": 4,
|
|
695
|
-
"page_heading":
|
|
697
|
+
"page_heading": 15,
|
|
696
698
|
"shell_override": 4,
|
|
697
699
|
"header_height_literal": 0,
|
|
698
700
|
"transcript_type_override": 0,
|
package/dist/index.d.ts
CHANGED
|
@@ -51,136 +51,136 @@ interface BrandPalette {
|
|
|
51
51
|
/** Resolved palettes for the canonical light and dark themes and the website named theme. */
|
|
52
52
|
export declare const palettes: {
|
|
53
53
|
readonly light: {
|
|
54
|
-
readonly canvas: "#
|
|
54
|
+
readonly canvas: "#eceef4";
|
|
55
55
|
readonly card: "#ffffff";
|
|
56
|
-
readonly well: "#
|
|
57
|
-
readonly nested: "#
|
|
56
|
+
readonly well: "#f4f5fb";
|
|
57
|
+
readonly nested: "#edeff5";
|
|
58
58
|
readonly overlay: "#ffffff";
|
|
59
59
|
readonly deepest: "#ffffff";
|
|
60
|
-
readonly hairline: "#
|
|
61
|
-
readonly ink: "#
|
|
62
|
-
readonly inkSecondary: "#
|
|
63
|
-
readonly inkMuted: "#
|
|
64
|
-
readonly accent: "#
|
|
65
|
-
readonly accentHover: "#
|
|
60
|
+
readonly hairline: "#c7c9ce";
|
|
61
|
+
readonly ink: "#3f3f3f";
|
|
62
|
+
readonly inkSecondary: "#505050";
|
|
63
|
+
readonly inkMuted: "#5d5d5d";
|
|
64
|
+
readonly accent: "#5f53cc";
|
|
65
|
+
readonly accentHover: "#6f64d1";
|
|
66
66
|
readonly onAccent: "#ffffff";
|
|
67
|
-
readonly accentText: "#
|
|
68
|
-
readonly danger: "#
|
|
69
|
-
readonly successBg: "#
|
|
70
|
-
readonly successBorder: "#
|
|
71
|
-
readonly successText: "#
|
|
72
|
-
readonly warningBg: "#
|
|
73
|
-
readonly warningBorder: "#
|
|
74
|
-
readonly warningText: "#
|
|
75
|
-
readonly dangerBg: "#
|
|
76
|
-
readonly dangerBorder: "#
|
|
77
|
-
readonly dangerText: "#
|
|
78
|
-
readonly infoBg: "#
|
|
79
|
-
readonly infoBorder: "#
|
|
80
|
-
readonly infoText: "#
|
|
81
|
-
readonly brandVibrant: "#
|
|
82
|
-
readonly brandCool: "#
|
|
83
|
-
readonly brandGlow: "#
|
|
84
|
-
readonly brandPurple: "#
|
|
67
|
+
readonly accentText: "#3822f6";
|
|
68
|
+
readonly danger: "#b01919";
|
|
69
|
+
readonly successBg: "#f1f6f4";
|
|
70
|
+
readonly successBorder: "#afcbc0";
|
|
71
|
+
readonly successText: "#166745";
|
|
72
|
+
readonly warningBg: "#f7f5f1";
|
|
73
|
+
readonly warningBorder: "#d1c5b0";
|
|
74
|
+
readonly warningText: "#775519";
|
|
75
|
+
readonly dangerBg: "#faf1f1";
|
|
76
|
+
readonly dangerBorder: "#e4b0b0";
|
|
77
|
+
readonly dangerText: "#b01919";
|
|
78
|
+
readonly infoBg: "#f1f5f8";
|
|
79
|
+
readonly infoBorder: "#b1c8d6";
|
|
80
|
+
readonly infoText: "#1c6085";
|
|
81
|
+
readonly brandVibrant: "#6457db";
|
|
82
|
+
readonly brandCool: "#8073f4";
|
|
83
|
+
readonly brandGlow: "#3822f6";
|
|
84
|
+
readonly brandPurple: "#7e6ff9";
|
|
85
85
|
};
|
|
86
86
|
readonly dark: {
|
|
87
|
-
readonly canvas: "#
|
|
87
|
+
readonly canvas: "#0b0a13";
|
|
88
88
|
readonly card: "#191826";
|
|
89
|
-
readonly well: "#
|
|
90
|
-
readonly nested: "#
|
|
91
|
-
readonly overlay: "#
|
|
89
|
+
readonly well: "#12111d";
|
|
90
|
+
readonly nested: "#242335";
|
|
91
|
+
readonly overlay: "#302f45";
|
|
92
92
|
readonly deepest: "#040408";
|
|
93
|
-
readonly hairline: "#
|
|
94
|
-
readonly ink: "#
|
|
95
|
-
readonly inkSecondary: "#
|
|
96
|
-
readonly inkMuted: "#
|
|
97
|
-
readonly accent: "#
|
|
98
|
-
readonly accentHover: "#
|
|
93
|
+
readonly hairline: "#37354d";
|
|
94
|
+
readonly ink: "#d7d7d7";
|
|
95
|
+
readonly inkSecondary: "#bdbdbd";
|
|
96
|
+
readonly inkMuted: "#ababab";
|
|
97
|
+
readonly accent: "#5f53cc";
|
|
98
|
+
readonly accentHover: "#6f64d1";
|
|
99
99
|
readonly onAccent: "#ffffff";
|
|
100
|
-
readonly accentText: "#
|
|
101
|
-
readonly danger: "#
|
|
102
|
-
readonly successBg: "#
|
|
103
|
-
readonly successBorder: "#
|
|
104
|
-
readonly successText: "#
|
|
105
|
-
readonly warningBg: "#
|
|
106
|
-
readonly warningBorder: "#
|
|
107
|
-
readonly warningText: "#
|
|
108
|
-
readonly dangerBg: "#
|
|
109
|
-
readonly dangerBorder: "#
|
|
110
|
-
readonly dangerText: "#
|
|
111
|
-
readonly infoBg: "#
|
|
112
|
-
readonly infoBorder: "#
|
|
113
|
-
readonly infoText: "#
|
|
114
|
-
readonly brandVibrant: "#
|
|
115
|
-
readonly brandCool: "#
|
|
116
|
-
readonly brandGlow: "#
|
|
117
|
-
readonly brandPurple: "#
|
|
100
|
+
readonly accentText: "#ccc7fd";
|
|
101
|
+
readonly danger: "#f9d6d6";
|
|
102
|
+
readonly successBg: "#21342c";
|
|
103
|
+
readonly successBorder: "#496b5d";
|
|
104
|
+
readonly successText: "#a6eccf";
|
|
105
|
+
readonly warningBg: "#362f22";
|
|
106
|
+
readonly warningBorder: "#6e634f";
|
|
107
|
+
readonly warningText: "#f0dcb8";
|
|
108
|
+
readonly dangerBg: "#412a2a";
|
|
109
|
+
readonly dangerBorder: "#785e5e";
|
|
110
|
+
readonly dangerText: "#f9d6d6";
|
|
111
|
+
readonly infoBg: "#243239";
|
|
112
|
+
readonly infoBorder: "#546771";
|
|
113
|
+
readonly infoText: "#c4e2f3";
|
|
114
|
+
readonly brandVibrant: "#8c83e5";
|
|
115
|
+
readonly brandCool: "#8073f4";
|
|
116
|
+
readonly brandGlow: "#ccc7fd";
|
|
117
|
+
readonly brandPurple: "#dedbfe";
|
|
118
118
|
};
|
|
119
119
|
readonly websiteLight: {
|
|
120
|
-
readonly canvas: "#
|
|
120
|
+
readonly canvas: "#efeff8";
|
|
121
121
|
readonly card: "#ffffff";
|
|
122
|
-
readonly well: "#
|
|
123
|
-
readonly nested: "#
|
|
122
|
+
readonly well: "#f7f7ff";
|
|
123
|
+
readonly nested: "#eeeef7";
|
|
124
124
|
readonly overlay: "#ffffff";
|
|
125
125
|
readonly deepest: "#ffffff";
|
|
126
|
-
readonly hairline: "#
|
|
127
|
-
readonly ink: "#
|
|
128
|
-
readonly inkSecondary: "#
|
|
129
|
-
readonly inkMuted: "#
|
|
130
|
-
readonly accent: "#
|
|
131
|
-
readonly accentHover: "#
|
|
126
|
+
readonly hairline: "#d0d0d9";
|
|
127
|
+
readonly ink: "#3f3f3f";
|
|
128
|
+
readonly inkSecondary: "#515151";
|
|
129
|
+
readonly inkMuted: "#5d5d5d";
|
|
130
|
+
readonly accent: "#5f53cc";
|
|
131
|
+
readonly accentHover: "#6f64d1";
|
|
132
132
|
readonly onAccent: "#ffffff";
|
|
133
|
-
readonly accentText: "#
|
|
134
|
-
readonly danger: "#
|
|
135
|
-
readonly successBg: "#
|
|
136
|
-
readonly successBorder: "#
|
|
137
|
-
readonly successText: "#
|
|
138
|
-
readonly warningBg: "#
|
|
139
|
-
readonly warningBorder: "#
|
|
140
|
-
readonly warningText: "#
|
|
141
|
-
readonly dangerBg: "#
|
|
142
|
-
readonly dangerBorder: "#
|
|
143
|
-
readonly dangerText: "#
|
|
144
|
-
readonly infoBg: "#
|
|
145
|
-
readonly infoBorder: "#
|
|
146
|
-
readonly infoText: "#
|
|
147
|
-
readonly brandVibrant: "#
|
|
148
|
-
readonly brandCool: "#
|
|
149
|
-
readonly brandGlow: "#
|
|
150
|
-
readonly brandPurple: "#
|
|
133
|
+
readonly accentText: "#3822f6";
|
|
134
|
+
readonly danger: "#b01919";
|
|
135
|
+
readonly successBg: "#f1f6f4";
|
|
136
|
+
readonly successBorder: "#afcbc0";
|
|
137
|
+
readonly successText: "#166745";
|
|
138
|
+
readonly warningBg: "#f7f5f1";
|
|
139
|
+
readonly warningBorder: "#d1c5b0";
|
|
140
|
+
readonly warningText: "#775519";
|
|
141
|
+
readonly dangerBg: "#faf1f1";
|
|
142
|
+
readonly dangerBorder: "#e4b0b0";
|
|
143
|
+
readonly dangerText: "#b01919";
|
|
144
|
+
readonly infoBg: "#f1f5f8";
|
|
145
|
+
readonly infoBorder: "#b1c8d6";
|
|
146
|
+
readonly infoText: "#1c6085";
|
|
147
|
+
readonly brandVibrant: "#6457db";
|
|
148
|
+
readonly brandCool: "#8073f4";
|
|
149
|
+
readonly brandGlow: "#3822f6";
|
|
150
|
+
readonly brandPurple: "#7e6ff9";
|
|
151
151
|
};
|
|
152
152
|
readonly websiteDark: {
|
|
153
153
|
readonly canvas: "#0c0b1d";
|
|
154
|
-
readonly card: "#
|
|
155
|
-
readonly well: "#
|
|
156
|
-
readonly nested: "#
|
|
157
|
-
readonly overlay: "#
|
|
158
|
-
readonly deepest: "#
|
|
159
|
-
readonly hairline: "#
|
|
160
|
-
readonly ink: "#
|
|
161
|
-
readonly inkSecondary: "#
|
|
162
|
-
readonly inkMuted: "#
|
|
163
|
-
readonly accent: "#
|
|
164
|
-
readonly accentHover: "#
|
|
154
|
+
readonly card: "#201e3e";
|
|
155
|
+
readonly well: "#16142d";
|
|
156
|
+
readonly nested: "#2b294f";
|
|
157
|
+
readonly overlay: "#363462";
|
|
158
|
+
readonly deepest: "#04040e";
|
|
159
|
+
readonly hairline: "#403d72";
|
|
160
|
+
readonly ink: "#e4e4e4";
|
|
161
|
+
readonly inkSecondary: "#c8c8c8";
|
|
162
|
+
readonly inkMuted: "#b6b6b6";
|
|
163
|
+
readonly accent: "#5f53cc";
|
|
164
|
+
readonly accentHover: "#6f64d1";
|
|
165
165
|
readonly onAccent: "#ffffff";
|
|
166
|
-
readonly accentText: "#
|
|
167
|
-
readonly danger: "#
|
|
168
|
-
readonly successBg: "#
|
|
169
|
-
readonly successBorder: "#
|
|
170
|
-
readonly successText: "#
|
|
171
|
-
readonly warningBg: "#
|
|
172
|
-
readonly warningBorder: "#
|
|
173
|
-
readonly warningText: "#
|
|
174
|
-
readonly dangerBg: "#
|
|
175
|
-
readonly dangerBorder: "#
|
|
176
|
-
readonly dangerText: "#
|
|
177
|
-
readonly infoBg: "#
|
|
178
|
-
readonly infoBorder: "#
|
|
179
|
-
readonly infoText: "#
|
|
180
|
-
readonly brandVibrant: "#
|
|
181
|
-
readonly brandCool: "#
|
|
182
|
-
readonly brandGlow: "#
|
|
183
|
-
readonly brandPurple: "#
|
|
166
|
+
readonly accentText: "#ccc7fd";
|
|
167
|
+
readonly danger: "#f9d6d6";
|
|
168
|
+
readonly successBg: "#21342c";
|
|
169
|
+
readonly successBorder: "#496b5d";
|
|
170
|
+
readonly successText: "#a6eccf";
|
|
171
|
+
readonly warningBg: "#362f22";
|
|
172
|
+
readonly warningBorder: "#6e634f";
|
|
173
|
+
readonly warningText: "#f0dcb8";
|
|
174
|
+
readonly dangerBg: "#412a2a";
|
|
175
|
+
readonly dangerBorder: "#785e5e";
|
|
176
|
+
readonly dangerText: "#f9d6d6";
|
|
177
|
+
readonly infoBg: "#243239";
|
|
178
|
+
readonly infoBorder: "#546771";
|
|
179
|
+
readonly infoText: "#c4e2f3";
|
|
180
|
+
readonly brandVibrant: "#8c83e5";
|
|
181
|
+
readonly brandCool: "#8073f4";
|
|
182
|
+
readonly brandGlow: "#ccc7fd";
|
|
183
|
+
readonly brandPurple: "#dedbfe";
|
|
184
184
|
};
|
|
185
185
|
};
|
|
186
186
|
export { type BrandPalette, type LogoProps, type TangleKnotProps, knot, knotGradientIds, knotSvg };
|
package/dist/index.js
CHANGED
|
@@ -92,136 +92,136 @@ function Logo({ size = "md", variant = "full", suffix = null, className }) {
|
|
|
92
92
|
/** Resolved palettes for the canonical light and dark themes and the website named theme. */
|
|
93
93
|
const palettes = {
|
|
94
94
|
light: {
|
|
95
|
-
canvas: "#
|
|
95
|
+
canvas: "#eceef4",
|
|
96
96
|
card: "#ffffff",
|
|
97
|
-
well: "#
|
|
98
|
-
nested: "#
|
|
97
|
+
well: "#f4f5fb",
|
|
98
|
+
nested: "#edeff5",
|
|
99
99
|
overlay: "#ffffff",
|
|
100
100
|
deepest: "#ffffff",
|
|
101
|
-
hairline: "#
|
|
102
|
-
ink: "#
|
|
103
|
-
inkSecondary: "#
|
|
104
|
-
inkMuted: "#
|
|
105
|
-
accent: "#
|
|
106
|
-
accentHover: "#
|
|
101
|
+
hairline: "#c7c9ce",
|
|
102
|
+
ink: "#3f3f3f",
|
|
103
|
+
inkSecondary: "#505050",
|
|
104
|
+
inkMuted: "#5d5d5d",
|
|
105
|
+
accent: "#5f53cc",
|
|
106
|
+
accentHover: "#6f64d1",
|
|
107
107
|
onAccent: "#ffffff",
|
|
108
|
-
accentText: "#
|
|
109
|
-
danger: "#
|
|
110
|
-
successBg: "#
|
|
111
|
-
successBorder: "#
|
|
112
|
-
successText: "#
|
|
113
|
-
warningBg: "#
|
|
114
|
-
warningBorder: "#
|
|
115
|
-
warningText: "#
|
|
116
|
-
dangerBg: "#
|
|
117
|
-
dangerBorder: "#
|
|
118
|
-
dangerText: "#
|
|
119
|
-
infoBg: "#
|
|
120
|
-
infoBorder: "#
|
|
121
|
-
infoText: "#
|
|
122
|
-
brandVibrant: "#
|
|
123
|
-
brandCool: "#
|
|
124
|
-
brandGlow: "#
|
|
125
|
-
brandPurple: "#
|
|
108
|
+
accentText: "#3822f6",
|
|
109
|
+
danger: "#b01919",
|
|
110
|
+
successBg: "#f1f6f4",
|
|
111
|
+
successBorder: "#afcbc0",
|
|
112
|
+
successText: "#166745",
|
|
113
|
+
warningBg: "#f7f5f1",
|
|
114
|
+
warningBorder: "#d1c5b0",
|
|
115
|
+
warningText: "#775519",
|
|
116
|
+
dangerBg: "#faf1f1",
|
|
117
|
+
dangerBorder: "#e4b0b0",
|
|
118
|
+
dangerText: "#b01919",
|
|
119
|
+
infoBg: "#f1f5f8",
|
|
120
|
+
infoBorder: "#b1c8d6",
|
|
121
|
+
infoText: "#1c6085",
|
|
122
|
+
brandVibrant: "#6457db",
|
|
123
|
+
brandCool: "#8073f4",
|
|
124
|
+
brandGlow: "#3822f6",
|
|
125
|
+
brandPurple: "#7e6ff9"
|
|
126
126
|
},
|
|
127
127
|
dark: {
|
|
128
|
-
canvas: "#
|
|
128
|
+
canvas: "#0b0a13",
|
|
129
129
|
card: "#191826",
|
|
130
|
-
well: "#
|
|
131
|
-
nested: "#
|
|
132
|
-
overlay: "#
|
|
130
|
+
well: "#12111d",
|
|
131
|
+
nested: "#242335",
|
|
132
|
+
overlay: "#302f45",
|
|
133
133
|
deepest: "#040408",
|
|
134
|
-
hairline: "#
|
|
135
|
-
ink: "#
|
|
136
|
-
inkSecondary: "#
|
|
137
|
-
inkMuted: "#
|
|
138
|
-
accent: "#
|
|
139
|
-
accentHover: "#
|
|
134
|
+
hairline: "#37354d",
|
|
135
|
+
ink: "#d7d7d7",
|
|
136
|
+
inkSecondary: "#bdbdbd",
|
|
137
|
+
inkMuted: "#ababab",
|
|
138
|
+
accent: "#5f53cc",
|
|
139
|
+
accentHover: "#6f64d1",
|
|
140
140
|
onAccent: "#ffffff",
|
|
141
|
-
accentText: "#
|
|
142
|
-
danger: "#
|
|
143
|
-
successBg: "#
|
|
144
|
-
successBorder: "#
|
|
145
|
-
successText: "#
|
|
146
|
-
warningBg: "#
|
|
147
|
-
warningBorder: "#
|
|
148
|
-
warningText: "#
|
|
149
|
-
dangerBg: "#
|
|
150
|
-
dangerBorder: "#
|
|
151
|
-
dangerText: "#
|
|
152
|
-
infoBg: "#
|
|
153
|
-
infoBorder: "#
|
|
154
|
-
infoText: "#
|
|
155
|
-
brandVibrant: "#
|
|
156
|
-
brandCool: "#
|
|
157
|
-
brandGlow: "#
|
|
158
|
-
brandPurple: "#
|
|
141
|
+
accentText: "#ccc7fd",
|
|
142
|
+
danger: "#f9d6d6",
|
|
143
|
+
successBg: "#21342c",
|
|
144
|
+
successBorder: "#496b5d",
|
|
145
|
+
successText: "#a6eccf",
|
|
146
|
+
warningBg: "#362f22",
|
|
147
|
+
warningBorder: "#6e634f",
|
|
148
|
+
warningText: "#f0dcb8",
|
|
149
|
+
dangerBg: "#412a2a",
|
|
150
|
+
dangerBorder: "#785e5e",
|
|
151
|
+
dangerText: "#f9d6d6",
|
|
152
|
+
infoBg: "#243239",
|
|
153
|
+
infoBorder: "#546771",
|
|
154
|
+
infoText: "#c4e2f3",
|
|
155
|
+
brandVibrant: "#8c83e5",
|
|
156
|
+
brandCool: "#8073f4",
|
|
157
|
+
brandGlow: "#ccc7fd",
|
|
158
|
+
brandPurple: "#dedbfe"
|
|
159
159
|
},
|
|
160
160
|
websiteLight: {
|
|
161
|
-
canvas: "#
|
|
161
|
+
canvas: "#efeff8",
|
|
162
162
|
card: "#ffffff",
|
|
163
|
-
well: "#
|
|
164
|
-
nested: "#
|
|
163
|
+
well: "#f7f7ff",
|
|
164
|
+
nested: "#eeeef7",
|
|
165
165
|
overlay: "#ffffff",
|
|
166
166
|
deepest: "#ffffff",
|
|
167
|
-
hairline: "#
|
|
168
|
-
ink: "#
|
|
169
|
-
inkSecondary: "#
|
|
170
|
-
inkMuted: "#
|
|
171
|
-
accent: "#
|
|
172
|
-
accentHover: "#
|
|
167
|
+
hairline: "#d0d0d9",
|
|
168
|
+
ink: "#3f3f3f",
|
|
169
|
+
inkSecondary: "#515151",
|
|
170
|
+
inkMuted: "#5d5d5d",
|
|
171
|
+
accent: "#5f53cc",
|
|
172
|
+
accentHover: "#6f64d1",
|
|
173
173
|
onAccent: "#ffffff",
|
|
174
|
-
accentText: "#
|
|
175
|
-
danger: "#
|
|
176
|
-
successBg: "#
|
|
177
|
-
successBorder: "#
|
|
178
|
-
successText: "#
|
|
179
|
-
warningBg: "#
|
|
180
|
-
warningBorder: "#
|
|
181
|
-
warningText: "#
|
|
182
|
-
dangerBg: "#
|
|
183
|
-
dangerBorder: "#
|
|
184
|
-
dangerText: "#
|
|
185
|
-
infoBg: "#
|
|
186
|
-
infoBorder: "#
|
|
187
|
-
infoText: "#
|
|
188
|
-
brandVibrant: "#
|
|
189
|
-
brandCool: "#
|
|
190
|
-
brandGlow: "#
|
|
191
|
-
brandPurple: "#
|
|
174
|
+
accentText: "#3822f6",
|
|
175
|
+
danger: "#b01919",
|
|
176
|
+
successBg: "#f1f6f4",
|
|
177
|
+
successBorder: "#afcbc0",
|
|
178
|
+
successText: "#166745",
|
|
179
|
+
warningBg: "#f7f5f1",
|
|
180
|
+
warningBorder: "#d1c5b0",
|
|
181
|
+
warningText: "#775519",
|
|
182
|
+
dangerBg: "#faf1f1",
|
|
183
|
+
dangerBorder: "#e4b0b0",
|
|
184
|
+
dangerText: "#b01919",
|
|
185
|
+
infoBg: "#f1f5f8",
|
|
186
|
+
infoBorder: "#b1c8d6",
|
|
187
|
+
infoText: "#1c6085",
|
|
188
|
+
brandVibrant: "#6457db",
|
|
189
|
+
brandCool: "#8073f4",
|
|
190
|
+
brandGlow: "#3822f6",
|
|
191
|
+
brandPurple: "#7e6ff9"
|
|
192
192
|
},
|
|
193
193
|
websiteDark: {
|
|
194
194
|
canvas: "#0c0b1d",
|
|
195
|
-
card: "#
|
|
196
|
-
well: "#
|
|
197
|
-
nested: "#
|
|
198
|
-
overlay: "#
|
|
199
|
-
deepest: "#
|
|
200
|
-
hairline: "#
|
|
201
|
-
ink: "#
|
|
202
|
-
inkSecondary: "#
|
|
203
|
-
inkMuted: "#
|
|
204
|
-
accent: "#
|
|
205
|
-
accentHover: "#
|
|
195
|
+
card: "#201e3e",
|
|
196
|
+
well: "#16142d",
|
|
197
|
+
nested: "#2b294f",
|
|
198
|
+
overlay: "#363462",
|
|
199
|
+
deepest: "#04040e",
|
|
200
|
+
hairline: "#403d72",
|
|
201
|
+
ink: "#e4e4e4",
|
|
202
|
+
inkSecondary: "#c8c8c8",
|
|
203
|
+
inkMuted: "#b6b6b6",
|
|
204
|
+
accent: "#5f53cc",
|
|
205
|
+
accentHover: "#6f64d1",
|
|
206
206
|
onAccent: "#ffffff",
|
|
207
|
-
accentText: "#
|
|
208
|
-
danger: "#
|
|
209
|
-
successBg: "#
|
|
210
|
-
successBorder: "#
|
|
211
|
-
successText: "#
|
|
212
|
-
warningBg: "#
|
|
213
|
-
warningBorder: "#
|
|
214
|
-
warningText: "#
|
|
215
|
-
dangerBg: "#
|
|
216
|
-
dangerBorder: "#
|
|
217
|
-
dangerText: "#
|
|
218
|
-
infoBg: "#
|
|
219
|
-
infoBorder: "#
|
|
220
|
-
infoText: "#
|
|
221
|
-
brandVibrant: "#
|
|
222
|
-
brandCool: "#
|
|
223
|
-
brandGlow: "#
|
|
224
|
-
brandPurple: "#
|
|
207
|
+
accentText: "#ccc7fd",
|
|
208
|
+
danger: "#f9d6d6",
|
|
209
|
+
successBg: "#21342c",
|
|
210
|
+
successBorder: "#496b5d",
|
|
211
|
+
successText: "#a6eccf",
|
|
212
|
+
warningBg: "#362f22",
|
|
213
|
+
warningBorder: "#6e634f",
|
|
214
|
+
warningText: "#f0dcb8",
|
|
215
|
+
dangerBg: "#412a2a",
|
|
216
|
+
dangerBorder: "#785e5e",
|
|
217
|
+
dangerText: "#f9d6d6",
|
|
218
|
+
infoBg: "#243239",
|
|
219
|
+
infoBorder: "#546771",
|
|
220
|
+
infoText: "#c4e2f3",
|
|
221
|
+
brandVibrant: "#8c83e5",
|
|
222
|
+
brandCool: "#8073f4",
|
|
223
|
+
brandGlow: "#ccc7fd",
|
|
224
|
+
brandPurple: "#dedbfe"
|
|
225
225
|
}
|
|
226
226
|
};
|
|
227
227
|
export { Logo, TangleKnot, knot, knotGradientIds, knotSvg, palettes };
|
package/package.json
CHANGED