@galaxy-io/dls 2.5.1 → 2.6.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 +8 -0
- package/dist/beacons/Beacon.d.ts +11 -6
- package/dist/beacons/Beacon.js +13 -12
- package/dist/charts/ChartLegend.js +16 -8
- package/dist/charts/Sparkline.d.ts +10 -5
- package/dist/charts/Sparkline.js +8 -8
- package/dist/charts/chartPalette.d.ts +1 -1
- package/dist/charts/chartPalette.js +6 -6
- package/dist/chips/Chip.d.ts +9 -13
- package/dist/feedback/ProgressBar.d.ts +10 -5
- package/dist/feedback/ProgressBar.js +4 -4
- package/dist/feedback/ProgressCircle.d.ts +10 -5
- package/dist/feedback/ProgressCircle.js +4 -4
- package/dist/shapes/Circle.d.ts +11 -6
- package/dist/shapes/Circle.js +9 -9
- package/dist/shapes/Square.d.ts +11 -6
- package/dist/shapes/Square.js +9 -9
- package/dist/styles.css +1 -1
- package/dist/theme/tokens/dark.js +23 -0
- package/dist/theme/tokens/light.js +25 -0
- package/dist/theme/tokens/types.d.ts +7 -1
- package/dist/timeline/Timeline.d.ts +6 -1
- package/dist/tokens.css +40 -0
- package/package.json +6 -2
|
@@ -11,6 +11,7 @@ import { TYPE_SCALE } from "./scales.js";
|
|
|
11
11
|
* yellow are pulled apart in hue (80° / 98°) so they never read alike.
|
|
12
12
|
* - `background`: palette 500 at 16% over `background.base`, a subtle tint.
|
|
13
13
|
* - `border`: palette 500 at 55% over `background.base`.
|
|
14
|
+
* - `mark`: the `text` value. Text this vivid already reads as a filled mark.
|
|
14
15
|
* - `solid`: shared with Light (see `solid` below).
|
|
15
16
|
*
|
|
16
17
|
* Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
|
|
@@ -112,6 +113,28 @@ var DARK_THEME = {
|
|
|
112
113
|
pink: "#8b315e",
|
|
113
114
|
rose: "#8f2c3d"
|
|
114
115
|
},
|
|
116
|
+
mark: {
|
|
117
|
+
success: "#19e184",
|
|
118
|
+
warning: "#febc6c",
|
|
119
|
+
error: "#fd6b6d",
|
|
120
|
+
red: "#fe7f7e",
|
|
121
|
+
orange: "#fe9b4e",
|
|
122
|
+
amber: "#fec14f",
|
|
123
|
+
yellow: "#fadb31",
|
|
124
|
+
lime: "#acf043",
|
|
125
|
+
green: "#56e889",
|
|
126
|
+
emerald: "#43dda2",
|
|
127
|
+
teal: "#3ddec9",
|
|
128
|
+
cyan: "#36ddf8",
|
|
129
|
+
sky: "#52c6fe",
|
|
130
|
+
blue: "#6dadfd",
|
|
131
|
+
indigo: "#8b97fd",
|
|
132
|
+
violet: "#ae95fd",
|
|
133
|
+
purple: "#c58dfd",
|
|
134
|
+
fuchsia: "#ee88fe",
|
|
135
|
+
pink: "#fe7dbf",
|
|
136
|
+
rose: "#fe7c8d"
|
|
137
|
+
},
|
|
115
138
|
solid: {
|
|
116
139
|
primary: {
|
|
117
140
|
background: "#ffffff",
|
|
@@ -11,6 +11,9 @@ import { TYPE_SCALE } from "./scales.js";
|
|
|
11
11
|
* and yellow are pulled apart in hue (42° / 62° / 95°) so they never read alike.
|
|
12
12
|
* - `background`: palette 100.
|
|
13
13
|
* - `border`: OKLCH mix of palette 300 → 500 at 65%.
|
|
14
|
+
* - `mark`: the `solid` fill, deepened at its OKLCH hue (largest in-gamut chroma) only as far as
|
|
15
|
+
* 2.2:1 on every surface, so a 1.5px chart line still reads; amber sits at 62° like its text.
|
|
16
|
+
* Vivid where `text` is deepened for copy.
|
|
14
17
|
* - `solid`: shared with Dark (see `solid` below).
|
|
15
18
|
*
|
|
16
19
|
* Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
|
|
@@ -111,6 +114,28 @@ var LIGHT_THEME = {
|
|
|
111
114
|
pink: "#f47db8",
|
|
112
115
|
rose: "#fb7989"
|
|
113
116
|
},
|
|
117
|
+
mark: {
|
|
118
|
+
success: "#0cba6c",
|
|
119
|
+
warning: "#e29100",
|
|
120
|
+
error: "#e50f36",
|
|
121
|
+
red: "#d83939",
|
|
122
|
+
orange: "#f97316",
|
|
123
|
+
amber: "#ef8a00",
|
|
124
|
+
yellow: "#cb9b00",
|
|
125
|
+
lime: "#72b400",
|
|
126
|
+
green: "#04bb55",
|
|
127
|
+
emerald: "#10b981",
|
|
128
|
+
teal: "#0db6a4",
|
|
129
|
+
cyan: "#00b2d0",
|
|
130
|
+
sky: "#0ea5e9",
|
|
131
|
+
blue: "#3270e3",
|
|
132
|
+
indigo: "#6163ed",
|
|
133
|
+
violet: "#8555ee",
|
|
134
|
+
purple: "#9b4be7",
|
|
135
|
+
fuchsia: "#bb36cc",
|
|
136
|
+
pink: "#d0377d",
|
|
137
|
+
rose: "#da3253"
|
|
138
|
+
},
|
|
114
139
|
solid: {
|
|
115
140
|
primary: {
|
|
116
141
|
background: "#101010",
|
|
@@ -113,6 +113,12 @@ export type Theme = {
|
|
|
113
113
|
/** Disabled controls. */
|
|
114
114
|
disabled: string;
|
|
115
115
|
};
|
|
116
|
+
/**
|
|
117
|
+
* Small filled marks that carry a color, not words: chart series and legend swatches, `Square`
|
|
118
|
+
* and `Circle` keys, the `Beacon` dot, `Sparkline`, `ProgressBar` and `ProgressCircle` fills. The
|
|
119
|
+
* same value as `text` in Dark; vivid in Light, where `text` is deepened for copy.
|
|
120
|
+
*/
|
|
121
|
+
mark: RoleColors;
|
|
116
122
|
/**
|
|
117
123
|
* Fills with the text drawn on them. `primary` is the monochrome fill (`text.primary` with
|
|
118
124
|
* `background.base` on it): the primary button, checked controls, the brand mark. `neutral` is
|
|
@@ -187,7 +193,7 @@ export type Scales = {
|
|
|
187
193
|
xLarge: string;
|
|
188
194
|
};
|
|
189
195
|
};
|
|
190
|
-
/** The mode-stable primitive palette: the same hex in every theme. For app-side chart and canvas code that needs a fixed hex; DLS charts draw series with `t.color.
|
|
196
|
+
/** The mode-stable primitive palette: the same hex in every theme. For app-side chart and canvas code that needs a fixed hex; DLS charts draw series with `t.color.mark.<family>`. */
|
|
191
197
|
palette: Record<PaletteColor, Record<PaletteStep, string>>;
|
|
192
198
|
};
|
|
193
199
|
/** Mirrors a token tree with every leaf replaced by its `var(--gx-…)` string. */
|
|
@@ -67,7 +67,12 @@ interface TimelineItemVariantProps {
|
|
|
67
67
|
* @default TimelineVariant.SECONDARY
|
|
68
68
|
*/
|
|
69
69
|
variant?: TimelineVariant;
|
|
70
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
|
|
72
|
+
* (`"success"`, `"error"`): the dot or icon takes `text.<name>` and the box `border.<name>`, the
|
|
73
|
+
* way a status variant renders. For an event's category or data-driven color (a source, a team,
|
|
74
|
+
* a run status map); a status that is meaning takes `variant`. Not with `variant`.
|
|
75
|
+
*/
|
|
71
76
|
color?: undefined;
|
|
72
77
|
}
|
|
73
78
|
/** An event whose marker is colored by category (`color`). */
|
package/dist/tokens.css
CHANGED
|
@@ -192,6 +192,26 @@
|
|
|
192
192
|
--gx-color-border-fuchsia: #80308d;
|
|
193
193
|
--gx-color-border-pink: #8b315e;
|
|
194
194
|
--gx-color-border-rose: #8f2c3d;
|
|
195
|
+
--gx-color-mark-success: #19e184;
|
|
196
|
+
--gx-color-mark-warning: #febc6c;
|
|
197
|
+
--gx-color-mark-error: #fd6b6d;
|
|
198
|
+
--gx-color-mark-red: #fe7f7e;
|
|
199
|
+
--gx-color-mark-orange: #fe9b4e;
|
|
200
|
+
--gx-color-mark-amber: #fec14f;
|
|
201
|
+
--gx-color-mark-yellow: #fadb31;
|
|
202
|
+
--gx-color-mark-lime: #acf043;
|
|
203
|
+
--gx-color-mark-green: #56e889;
|
|
204
|
+
--gx-color-mark-emerald: #43dda2;
|
|
205
|
+
--gx-color-mark-teal: #3ddec9;
|
|
206
|
+
--gx-color-mark-cyan: #36ddf8;
|
|
207
|
+
--gx-color-mark-sky: #52c6fe;
|
|
208
|
+
--gx-color-mark-blue: #6dadfd;
|
|
209
|
+
--gx-color-mark-indigo: #8b97fd;
|
|
210
|
+
--gx-color-mark-violet: #ae95fd;
|
|
211
|
+
--gx-color-mark-purple: #c58dfd;
|
|
212
|
+
--gx-color-mark-fuchsia: #ee88fe;
|
|
213
|
+
--gx-color-mark-pink: #fe7dbf;
|
|
214
|
+
--gx-color-mark-rose: #fe7c8d;
|
|
195
215
|
--gx-color-solid-primary-background: #ffffff;
|
|
196
216
|
--gx-color-solid-primary-text: #141415;
|
|
197
217
|
--gx-color-solid-primary-hovered: #e3e3e3;
|
|
@@ -462,6 +482,26 @@
|
|
|
462
482
|
--gx-color-border-fuchsia: #e47ff7;
|
|
463
483
|
--gx-color-border-pink: #f47db8;
|
|
464
484
|
--gx-color-border-rose: #fb7989;
|
|
485
|
+
--gx-color-mark-success: #0cba6c;
|
|
486
|
+
--gx-color-mark-warning: #e29100;
|
|
487
|
+
--gx-color-mark-error: #e50f36;
|
|
488
|
+
--gx-color-mark-red: #d83939;
|
|
489
|
+
--gx-color-mark-orange: #f97316;
|
|
490
|
+
--gx-color-mark-amber: #ef8a00;
|
|
491
|
+
--gx-color-mark-yellow: #cb9b00;
|
|
492
|
+
--gx-color-mark-lime: #72b400;
|
|
493
|
+
--gx-color-mark-green: #04bb55;
|
|
494
|
+
--gx-color-mark-emerald: #10b981;
|
|
495
|
+
--gx-color-mark-teal: #0db6a4;
|
|
496
|
+
--gx-color-mark-cyan: #00b2d0;
|
|
497
|
+
--gx-color-mark-sky: #0ea5e9;
|
|
498
|
+
--gx-color-mark-blue: #3270e3;
|
|
499
|
+
--gx-color-mark-indigo: #6163ed;
|
|
500
|
+
--gx-color-mark-violet: #8555ee;
|
|
501
|
+
--gx-color-mark-purple: #9b4be7;
|
|
502
|
+
--gx-color-mark-fuchsia: #bb36cc;
|
|
503
|
+
--gx-color-mark-pink: #d0377d;
|
|
504
|
+
--gx-color-mark-rose: #da3253;
|
|
465
505
|
--gx-color-solid-primary-background: #101010;
|
|
466
506
|
--gx-color-solid-primary-text: #ffffff;
|
|
467
507
|
--gx-color-solid-primary-hovered: #2d2d2d;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@galaxy-io/dls",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.1",
|
|
4
4
|
"description": "Galaxy Design Language System",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -776,13 +776,17 @@
|
|
|
776
776
|
"test": "vitest run",
|
|
777
777
|
"build": "node scripts/build.mjs",
|
|
778
778
|
"codemod:build": "pnpm --filter @galaxy-io/dls-codemod build && publint --strict codemod",
|
|
779
|
+
"create-app": "node create-galaxy-app/src/cli.ts",
|
|
780
|
+
"create-app:build": "pnpm --filter @galaxy-io/create-galaxy-app build && publint --strict create-galaxy-app",
|
|
781
|
+
"templates:check": "node scripts/templates-check.ts",
|
|
782
|
+
"templates:smoke": "node scripts/templates-check.ts --smoke",
|
|
779
783
|
"check:package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./tokens.css ./fonts.css ./biome",
|
|
780
784
|
"storybook": "storybook dev -p 6006",
|
|
781
785
|
"build-storybook": "storybook build",
|
|
782
786
|
"skill:check": "node scripts/skill-check.ts",
|
|
783
787
|
"skill:sync": "node scripts/skill-check.ts --write",
|
|
784
788
|
"skill:pack": "node scripts/skill-pack.ts",
|
|
785
|
-
"verify": "pnpm assets:check && pnpm exports:check && pnpm migration:check && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm codemod:build && pnpm check:package && pnpm build-storybook && pnpm skill:check",
|
|
789
|
+
"verify": "pnpm assets:check && pnpm exports:check && pnpm migration:check && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm codemod:build && pnpm create-app:build && pnpm templates:check && pnpm check:package && pnpm build-storybook && pnpm skill:check",
|
|
786
790
|
"changeset": "changeset",
|
|
787
791
|
"clean": "rm -rf dist storybook-static",
|
|
788
792
|
"prepublishOnly": "pnpm build"
|