@ids-group-ltd/ids-design-system 0.1.0 → 0.2.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.
Files changed (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +37 -11
  3. package/fesm2022/ids-group-ltd-ids-design-system.mjs +241 -240
  4. package/fesm2022/ids-group-ltd-ids-design-system.mjs.map +1 -1
  5. package/package.json +3 -2
  6. package/styles/_dropdown-overlay.scss +117 -117
  7. package/styles/_fonts.scss +59 -59
  8. package/styles/_icon-base.scss +9 -9
  9. package/styles/_link.scss +77 -77
  10. package/styles/_reset.scss +17 -17
  11. package/styles/_scrollbar.scss +17 -17
  12. package/styles/_toast-overlay.scss +6 -6
  13. package/styles/_tokens-charts.scss +70 -70
  14. package/styles/_tokens.scss +614 -614
  15. package/styles/ds.scss +27 -27
  16. package/themes/README.md +96 -96
  17. package/themes/default/_palette.scss +159 -159
  18. package/themes/default/_theme.scss +274 -274
package/styles/_tokens-charts.scss CHANGED
@@ -1,71 +1,71 @@
1
- /* ============================================================
2
- Boilerplate — Chart / dataviz tokens
3
- ------------------------------------------------------------
4
- Categorical: 8 hues, ordered by perceptual distance not
5
- ramp position. First six are AA against both light and
6
- dark surface-default; the last two are reserved for
7
- "rest" / "other" buckets where contrast is less critical.
8
-
9
- Sequential: single-hue ramp (blue) for ordinal data —
10
- "low → high" magnitudes.
11
-
12
- Divergent: red ↔ neutral ↔ green for signed data —
13
- "bad ← zero → good". Used for Excess / Shortage matrix.
14
- ============================================================ */
15
-
16
- :root {
17
- /* CATEGORICAL (8) ----------------------------------------- */
18
- --chart-cat-1: hsl(229, 100%, 59%); /* blue (primary) */
19
- --chart-cat-2: hsl(165, 72%, 38%); /* teal */
20
- --chart-cat-3: hsl( 24, 95%, 55%); /* orange */
21
- --chart-cat-4: hsl(330, 82%, 55%); /* magenta */
22
- --chart-cat-5: hsl(45, 95%, 50%); /* amber */
23
- --chart-cat-6: hsl(190, 85%, 45%); /* cyan */
24
- --chart-cat-7: hsl(280, 60%, 60%); /* lavender */
25
- --chart-cat-8: hsl(130, 45%, 50%); /* moss */
26
-
27
- /* SEQUENTIAL — single-hue, light → dark */
28
- --chart-seq-1: var(--blue-100);
29
- --chart-seq-2: var(--blue-200);
30
- --chart-seq-3: var(--blue-300);
31
- --chart-seq-4: var(--blue-500);
32
- --chart-seq-5: var(--blue-700);
33
- --chart-seq-6: var(--blue-900);
34
-
35
- /* DIVERGENT — red ← neutral → green
36
- Values taken verbatim from the source design prototype
37
- (CLAUDE_DESIGN_DS/patterns.css) so the Excess/Shortage matrix
38
- matches the reference one-for-one. Explicit HSL keeps the ramp
39
- independent of palette retunes — re-skinning brand/red/green
40
- should not shift the dataviz colour story. */
41
- --chart-div--3: hsl(0 70% 40%); /* large negative (worst) */
42
- --chart-div--2: hsl(0 60% 58%);
43
- --chart-div--1: hsl(0 50% 80%);
44
- --chart-div-0: hsl(225 8% 92%); /* zero */
45
- --chart-div-1: hsl(140 35% 80%);
46
- --chart-div-2: hsl(140 45% 55%);
47
- --chart-div-3: hsl(140 55% 35%); /* large positive (best) */
48
-
49
- /* AXIS / GRID / LEGEND */
50
- --chart-axis-line: var(--neutral-300);
51
- --chart-axis-label: var(--text-tertiary);
52
- --chart-axis-title: var(--text-secondary);
53
- --chart-grid-line: var(--neutral-150);
54
- --chart-grid-line-strong: var(--neutral-200);
55
- --chart-tick-size: 4px;
56
- --chart-axis-fs: var(--font-size-2xs);
57
-
58
- /* HIGHLIGHT / HOVER */
59
- --chart-hover-bg: hsla(225, 39%, 7%, .04);
60
- --chart-cursor-line: var(--neutral-400);
61
- --chart-tooltip-bg: var(--neutral-900);
62
- --chart-tooltip-fg: var(--neutral-0);
63
- --chart-tooltip-border: var(--neutral-700);
64
-
65
- /* DIMENSIONS */
66
- --chart-bar-gap: 4px;
67
- --chart-line-w: 2px;
68
- --chart-line-w-bold: 3px;
69
- --chart-dot-r: 4px;
70
- --chart-dot-r-active: 6px;
1
+ /* ============================================================
2
+ Boilerplate — Chart / dataviz tokens
3
+ ------------------------------------------------------------
4
+ Categorical: 8 hues, ordered by perceptual distance not
5
+ ramp position. First six are AA against both light and
6
+ dark surface-default; the last two are reserved for
7
+ "rest" / "other" buckets where contrast is less critical.
8
+
9
+ Sequential: single-hue ramp (blue) for ordinal data —
10
+ "low → high" magnitudes.
11
+
12
+ Divergent: red ↔ neutral ↔ green for signed data —
13
+ "bad ← zero → good". Used for Excess / Shortage matrix.
14
+ ============================================================ */
15
+
16
+ :root {
17
+ /* CATEGORICAL (8) ----------------------------------------- */
18
+ --chart-cat-1: hsl(229, 100%, 59%); /* blue (primary) */
19
+ --chart-cat-2: hsl(165, 72%, 38%); /* teal */
20
+ --chart-cat-3: hsl( 24, 95%, 55%); /* orange */
21
+ --chart-cat-4: hsl(330, 82%, 55%); /* magenta */
22
+ --chart-cat-5: hsl(45, 95%, 50%); /* amber */
23
+ --chart-cat-6: hsl(190, 85%, 45%); /* cyan */
24
+ --chart-cat-7: hsl(280, 60%, 60%); /* lavender */
25
+ --chart-cat-8: hsl(130, 45%, 50%); /* moss */
26
+
27
+ /* SEQUENTIAL — single-hue, light → dark */
28
+ --chart-seq-1: var(--blue-100);
29
+ --chart-seq-2: var(--blue-200);
30
+ --chart-seq-3: var(--blue-300);
31
+ --chart-seq-4: var(--blue-500);
32
+ --chart-seq-5: var(--blue-700);
33
+ --chart-seq-6: var(--blue-900);
34
+
35
+ /* DIVERGENT — red ← neutral → green
36
+ Values taken verbatim from the source design prototype
37
+ (CLAUDE_DESIGN_DS/patterns.css) so the Excess/Shortage matrix
38
+ matches the reference one-for-one. Explicit HSL keeps the ramp
39
+ independent of palette retunes — re-skinning brand/red/green
40
+ should not shift the dataviz colour story. */
41
+ --chart-div--3: hsl(0 70% 40%); /* large negative (worst) */
42
+ --chart-div--2: hsl(0 60% 58%);
43
+ --chart-div--1: hsl(0 50% 80%);
44
+ --chart-div-0: hsl(225 8% 92%); /* zero */
45
+ --chart-div-1: hsl(140 35% 80%);
46
+ --chart-div-2: hsl(140 45% 55%);
47
+ --chart-div-3: hsl(140 55% 35%); /* large positive (best) */
48
+
49
+ /* AXIS / GRID / LEGEND */
50
+ --chart-axis-line: var(--neutral-300);
51
+ --chart-axis-label: var(--text-tertiary);
52
+ --chart-axis-title: var(--text-secondary);
53
+ --chart-grid-line: var(--neutral-150);
54
+ --chart-grid-line-strong: var(--neutral-200);
55
+ --chart-tick-size: 4px;
56
+ --chart-axis-fs: var(--font-size-2xs);
57
+
58
+ /* HIGHLIGHT / HOVER */
59
+ --chart-hover-bg: hsla(225, 39%, 7%, .04);
60
+ --chart-cursor-line: var(--neutral-400);
61
+ --chart-tooltip-bg: var(--neutral-900);
62
+ --chart-tooltip-fg: var(--neutral-0);
63
+ --chart-tooltip-border: var(--neutral-700);
64
+
65
+ /* DIMENSIONS */
66
+ --chart-bar-gap: 4px;
67
+ --chart-line-w: 2px;
68
+ --chart-line-w-bold: 3px;
69
+ --chart-dot-r: 4px;
70
+ --chart-dot-r-active: 6px;
71
71
  }