@ibis-design/css 0.8.2 → 0.9.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 (23) hide show
  1. package/README.md +21 -14
  2. package/dist/components/banner.css +13 -17
  3. package/dist/components/button.css +13 -13
  4. package/dist/components/checkbox.css +29 -11
  5. package/dist/components/chips.css +8 -8
  6. package/dist/components/dropdown.css +12 -20
  7. package/dist/components/dropdownButton.css +13 -20
  8. package/dist/components/navButton.css +233 -0
  9. package/dist/components/pillTab.css +7 -12
  10. package/dist/components/radio.css +14 -13
  11. package/dist/components/switch.css +5 -8
  12. package/dist/components/textInput.css +12 -15
  13. package/dist/components/textarea.css +7 -13
  14. package/dist/components/textlink.css +6 -14
  15. package/dist/components/tipIndicator.css +4 -10
  16. package/dist/components/toaster.css +21 -27
  17. package/dist/design-tokens.css +209 -84
  18. package/dist/tailwind.preset.js +1 -1
  19. package/dist/tailwind.theme.js +40 -1
  20. package/package.json +7 -5
  21. package/src/lib/assemble-design-tokens.ts +20 -0
  22. package/src/lib/set-theme.ts +73 -0
  23. package/src/lib/themes.ts +74 -0
package/README.md CHANGED
@@ -14,7 +14,7 @@ Every page needs **tokens** once, then **component CSS** only for the components
14
14
 
15
15
  ```html
16
16
  <!DOCTYPE html>
17
- <html lang="en" data-theme="ib-light">
17
+ <html lang="en" data-brand="ib" data-color-mode="light">
18
18
  <head>
19
19
  <link rel="stylesheet" href="/path/to/your/app.css" />
20
20
  </head>
@@ -32,19 +32,25 @@ Every page needs **tokens** once, then **component CSS** only for the components
32
32
  @import "@ibis-design/css/components/button.css";
33
33
  ```
34
34
 
35
- ```js
36
- // Switch brand or mode at runtime
37
- document.documentElement.dataset.theme = "alc-dark";
35
+ ```ts
36
+ import { setTheme } from '@ibis-design/css/theme';
37
+
38
+ setTheme({ brand: 'alc', colorMode: 'dark' });
38
39
  ```
39
40
 
40
- | `data-theme` | Brand | Mode |
41
- |--------------|-------|------|
42
- | `ib-light` | Ibis | Light (default) |
43
- | `ib-dark` | Ibis | Dark |
44
- | `alc-light` | Alchemy | Light |
45
- | `alc-dark` | Alchemy | Dark |
41
+ | `data-brand` | Brand |
42
+ |--------------|-------|
43
+ | `ib` | Ibis (default) |
44
+ | `alc` | Alchemy |
45
+
46
+ | `data-color-mode` | Mode |
47
+ |-------------------|------|
48
+ | `light` | Light (default) |
49
+ | `dark` | Dark |
50
+
51
+ **Cascade:** spacing, shadows, and motion tokens live on `:root`. Colors, typography, and radii follow the active brand and color mode. Ibis light also applies on `:root` when attributes are unset.
46
52
 
47
- **Cascade:** spacing, shadows, and motion tokens live on `:root`. Colors, typography, and radii follow the active `data-theme`. Ibis light also applies when `data-theme` is unset.
53
+ Engineering docs hub: [docs/README.md](../../docs/README.md). Migration from legacy `data-theme`: [docs/migration/theme-v1.md](../../docs/migration/theme-v1.md).
48
54
 
49
55
  ---
50
56
 
@@ -54,8 +60,9 @@ Use semantic variables in your own CSS:
54
60
 
55
61
  ```css
56
62
  .my-panel {
57
- background: var(--color-backgrounds-classic-light);
63
+ background: var(--color-surface-page);
58
64
  color: var(--color-text-primary);
65
+ border: 1px solid var(--border-color-default);
59
66
  padding: var(--spacing-4);
60
67
  border-radius: var(--border-radius-md);
61
68
  box-shadow: var(--shadow-elevation-sm);
@@ -431,7 +438,7 @@ module.exports = {
431
438
  @import "@ibis-design/css";
432
439
  ```
433
440
 
434
- Dark-mode utilities respond to `[data-theme$="-dark"]`. You still must set `data-theme` on `<html>`.
441
+ Dark-mode utilities respond to `[data-color-mode="dark"]`. Set `data-brand` and `data-color-mode` on `<html>` (or use `setTheme`).
435
442
 
436
443
  ---
437
444
 
@@ -449,4 +456,4 @@ Font stacks in tokens (Inter, Metrisch, Beyond Infinity, etc.) are **not** inclu
449
456
  | `@ibis-design/css/components/<name>.css` | Component presentation |
450
457
  | `@ibis-design/css/tailwind.preset` | Tailwind preset |
451
458
 
452
- Legacy aliases `@ibis-design/css/ibis-design.css` and `@ibis-design/css/alchemy-design.css` point at the same token bundle—use `data-theme` instead.
459
+ Legacy aliases `@ibis-design/css/ibis-design.css` and `@ibis-design/css/alchemy-design.css` point at the same token bundle—use `data-brand` and `data-color-mode` instead.
package/dist/components/banner.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: var(--spacing-2);
6
6
  padding: var(--spacing-2) var(--spacing-4);
7
7
  border-radius: 16px;
8
- border: var(--border-width-default) solid var(--color-neutral-200);
8
+ border: var(--border-width-default) solid var(--border-color-default);
9
9
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
10
10
 
11
11
  max-width: 300px;
@@ -13,7 +13,6 @@
13
13
  margin-bottom: 2px;
14
14
  }
15
15
 
16
- /* ICON */
17
16
  .ibis-banner__icon {
18
17
  display: flex;
19
18
  align-items: center;
@@ -27,7 +26,7 @@
27
26
  flex-shrink: 0;
28
27
 
29
28
  margin-top: 2px;
30
- color: var(--color-white);
29
+ color: var(--color-text-on-primary);
31
30
  }
32
31
 
33
32
  .ibis-banner__icon :global(svg) {
@@ -49,12 +48,12 @@
49
48
 
50
49
  .ibis-banner__message {
51
50
  font-size: var(--font-size-body-sm);
52
- color: var(--color-white);
51
+ color: var(--color-text-on-primary);
53
52
  }
54
53
 
55
54
  .ibis-banner--default .ibis-banner__message {
56
55
  font-size: var(--font-size-body-sm);
57
- color: var(--color-primary-900);
56
+ color: var(--color-interactive-primary-indicator);
58
57
  }
59
58
 
60
59
  .ibis-banner--success .ibis-banner__message {
@@ -73,11 +72,10 @@
73
72
  cursor: pointer;
74
73
  font-size: var(--font-size-body-lg);
75
74
  line-height: 1;
76
- color: var(--color-white);
75
+ color: var(--color-text-on-primary);
77
76
  flex-shrink: 0;
78
77
  }
79
78
 
80
- /* SUCCESS */
81
79
  .ibis-banner--success {
82
80
  border-color: var(--color-status-success) var(--opacity-1);
83
81
  background-color: var(--color-status-success) var(--opacity-1);
@@ -96,7 +94,6 @@
96
94
  border-color: var(--color-status-success);
97
95
  }
98
96
 
99
- /* ERROR */
100
97
  .ibis-banner--error {
101
98
  border-color: var(--color-status-error) var(--opacity-1);
102
99
  background-color: var(--color-status-error) var(--opacity-1);
@@ -115,31 +112,30 @@
115
112
  border-color: var(--color-status-error);
116
113
  }
117
114
 
118
- /* DEFAULT */
119
115
  .ibis-banner--default {
120
- border-color: var(--color-primary-800) var(--opacity-1);
121
- background-color: var(--color-primary-800) var(--opacity-1);
116
+ border-color: var(--color-interactive-primary-bg-emphasized) var(--opacity-1);
117
+ background-color: var(--color-interactive-primary-bg-emphasized) var(--opacity-1);
122
118
  }
123
119
 
124
120
  .ibis-banner--default .ibis-banner__title {
125
- color: var(--color-primary-900);
121
+ color: var(--color-interactive-primary-indicator);
126
122
  }
127
123
 
128
124
  .ibis-banner--default .ibis-banner__icon {
129
- color: var(--color-primary-900);
125
+ color: var(--color-interactive-primary-indicator);
130
126
  }
131
127
 
132
128
  .ibis-banner--default .ibis-banner__close {
133
- color: var(--color-primary-900);
134
- border-color: var(--color-primary-900);
129
+ color: var(--color-interactive-primary-indicator);
130
+ border-color: var(--color-interactive-primary-indicator);
135
131
  }
136
132
 
137
133
  .ibis-banner__loader {
138
134
  width: 1em;
139
135
  height: 1em;
140
136
 
141
- border: var(--border-width-default) solid var(--color-primary-300);
142
- border-top-color: var(--color-primary-900);
137
+ border: var(--border-width-default) solid var(--border-color-focus);
138
+ border-top-color: var(--color-interactive-primary-indicator);
143
139
  border-radius: 50%;
144
140
 
145
141
  animation: ibis-banner-spin 0.8s linear infinite;
package/dist/components/button.css CHANGED
@@ -53,7 +53,7 @@
53
53
 
54
54
  .ibis-button--primary {
55
55
  background: var(--gradient-button);
56
- color: var(--color-white);
56
+ color: var(--color-text-on-primary);
57
57
  box-shadow: var(--shadow-elevation-sm);
58
58
  border: var(--border-width-hairline) solid var(--border-color-button);
59
59
  }
@@ -64,20 +64,20 @@
64
64
  }
65
65
 
66
66
  .ibis-button--primary:not(:disabled):hover {
67
- background: var(--color-primary-800);
67
+ background: var(--color-interactive-primary-bg-emphasized);
68
68
  border-width: var(--border-width-hairline);
69
69
  }
70
70
 
71
71
  .ibis-button--primary:not(:disabled):active {
72
- background: var(--color-primary-800);
73
- border-color: var(--color-primary-400);
72
+ background: var(--color-interactive-primary-bg-emphasized);
73
+ border-color: var(--border-color-focus);
74
74
  border-width: var(--border-width-thin);
75
75
  }
76
76
 
77
77
  .ibis-button--primary:disabled {
78
- background: var(--color-neutral-400);
79
- color: var(--color-neutral-600);
80
- border-color: var(--color-neutral-600);
78
+ background: var(--color-interactive-primary-bg-disabled);
79
+ color: var(--color-interactive-primary-fg-on-disabled);
80
+ border-color: var(--color-interactive-primary-fg-on-disabled);
81
81
  }
82
82
 
83
83
  .ibis-button--secondary {
@@ -87,7 +87,7 @@
87
87
  }
88
88
 
89
89
  .ibis-button--secondary:not(:disabled):hover {
90
- background-color: var(--color-primary-50);
90
+ background-color: var(--color-surface-subtle);
91
91
  }
92
92
 
93
93
  .ibis-button--icon-only {
@@ -113,8 +113,8 @@
113
113
  position: absolute;
114
114
  width: 1em;
115
115
  height: 1em;
116
- border: var(--border-width-default) solid var(--color-black);
117
- border-top-color: var(--color-white);
116
+ border: var(--border-width-default) solid var(--color-text-primary);
117
+ border-top-color: var(--color-text-on-primary);
118
118
  border-radius: 50%;
119
119
  animation: ibis-button-spin 0.8s linear infinite;
120
120
  top: 50%;
@@ -125,9 +125,9 @@
125
125
  .ibis-button--skeleton {
126
126
  position: relative;
127
127
  overflow: hidden;
128
- background: var(--color-neutral-200);
128
+ background: var(--color-surface-muted);
129
129
  color: transparent;
130
- border-color: var(--color-neutral-500);
130
+ border-color: var(--color-text-muted);
131
131
  cursor: default;
132
132
  pointer-events: none;
133
133
  }
@@ -140,7 +140,7 @@
140
140
  transform: translate(-50%, -50%);
141
141
  width: 80%;
142
142
  height: 1em;
143
- background-color: var(--color-neutral-400);
143
+ background-color: var(--color-text-disabled);
144
144
  }
145
145
 
146
146
  .ibis-button--icon-only--skeleton::after {
package/dist/components/checkbox.css CHANGED
@@ -12,12 +12,12 @@
12
12
 
13
13
  .ibis-checkbox__label {
14
14
  font-size: var(--font-size-body-md);
15
- color: var(--color-neutral-700);
15
+ color: var(--color-text-secondary);
16
16
  }
17
17
 
18
18
  .ibis-checkbox__description {
19
19
  font-size: var(--font-size-body-sm);
20
- color: var(--color-neutral-500);
20
+ color: var(--color-text-muted);
21
21
  }
22
22
 
23
23
  .ibis-checkbox__wrapper {
@@ -39,30 +39,48 @@
39
39
  .ibis-checkbox__box {
40
40
  width: 18px;
41
41
  height: 18px;
42
- border: var(--border-width-default) solid var(--color-neutral-300);
42
+ border: var(--border-width-default) solid var(--border-color-strong);
43
43
  border-radius: var(--border-radius-sm);
44
44
  display: flex;
45
45
  align-items: center;
46
46
  justify-content: center;
47
- background: var(--color-neutral-100);
47
+ background: var(--color-surface-muted);
48
48
  transition:
49
49
  box-shadow var(--transition-duration-normal) var(--transition-timing-default),
50
50
  border-color var(--transition-duration-normal) var(--transition-timing-default),
51
51
  background var(--transition-duration-normal) var(--transition-timing-default);
52
52
  }
53
53
 
54
+ .ibis-checkbox__icon {
55
+ display: none;
56
+ color: var(--color-interactive-primary-indicator);
57
+ width: 12px;
58
+ height: 12px;
59
+ }
60
+
61
+ .ibis-checkbox__checkmark {
62
+ width: 100%;
63
+ height: 100%;
64
+ }
65
+
54
66
  .ibis-checkbox__control:hover .ibis-checkbox__input:not(:checked) + .ibis-checkbox__box {
55
- border-color: var(--color-neutral-700);
56
- box-shadow: var(--shadow-focus-default); /* TODO: replace with token */
67
+ border-color: var(--color-text-secondary);
68
+ box-shadow: var(--shadow-focus-default);
57
69
  }
58
70
 
59
71
  .ibis-checkbox__input:checked + .ibis-checkbox__box {
60
- background: var(--color-primary-200);
61
- border-color: var(--color-primary-800);
72
+ background: var(--color-interactive-primary-bg-selected);
73
+ border-color: var(--color-interactive-primary-border-selected);
74
+ }
75
+
76
+ .ibis-checkbox__input:checked + .ibis-checkbox__box .ibis-checkbox__icon {
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
62
80
  }
63
81
 
64
82
  .ibis-checkbox__control:hover .ibis-checkbox__input:checked + .ibis-checkbox__box {
65
- box-shadow: var(--shadow-focus-primary); /* TODO: replace with token */
83
+ box-shadow: var(--shadow-focus-primary);
66
84
  }
67
85
 
68
86
  .ibis-checkbox__text {
@@ -72,7 +90,7 @@
72
90
 
73
91
  .ibis-checkbox__help {
74
92
  font-size: var(--font-size-body-sm);
75
- color: var(--color-neutral-500);
93
+ color: var(--color-text-muted);
76
94
  }
77
95
 
78
96
  .ibis-checkbox__error {
@@ -98,6 +116,6 @@
98
116
  .ibis-checkbox__control:hover
99
117
  .ibis-checkbox__input:not(:checked)
100
118
  + .ibis-checkbox__box {
101
- box-shadow: var(--shadow-focus-error); /* TODO: replace with token */
119
+ box-shadow: var(--shadow-focus-error);
102
120
  border-color: var(--color-status-error);
103
121
  }
package/dist/components/chips.css CHANGED
@@ -3,9 +3,9 @@
3
3
  font-weight: var(--font-weight-normal);
4
4
  border-radius: var(--border-radius-sm);
5
5
  padding: var(--spacing-1) var(--spacing-3);
6
- background-color: var(--color-white);
6
+ background-color: var(--color-surface-default);
7
7
  color: var(--color-text-primary);
8
- border: var(--border-width-thin) solid var(--color-neutral-200);
8
+ border: var(--border-width-thin) solid var(--border-color-default);
9
9
  cursor: pointer;
10
10
  }
11
11
 
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  .ibis-chips--skeleton {
50
- background-color: var(--color-neutral-200);
50
+ background-color: var(--color-surface-muted);
51
51
  color: transparent;
52
52
  pointer-events: none;
53
53
  }
@@ -62,15 +62,15 @@
62
62
  }
63
63
 
64
64
  .ibis-chips:not(:disabled):hover {
65
- background-color: var(--color-neutral-200);
65
+ background-color: var(--color-interactive-neutral-bg-hover);
66
66
  }
67
67
 
68
68
  .ibis-chips--selected {
69
- background-color: var(--color-primary-100);
70
- color: var(--color-primary-800);
71
- border-color: var(--color-primary-800);
69
+ background-color: var(--color-interactive-primary-bg-selected);
70
+ color: var(--color-interactive-primary-indicator);
71
+ border-color: var(--color-interactive-primary-border-selected);
72
72
  }
73
73
 
74
74
  .ibis-chips--selected:not(:disabled):hover {
75
- background-color: var(--color-primary-200);
75
+ background-color: var(--color-interactive-primary-bg-hover);
76
76
  }
package/dist/components/dropdown.css CHANGED
@@ -11,7 +11,6 @@
11
11
  cursor: pointer;
12
12
  }
13
13
 
14
- /* Override TextInput styles inside trigger */
15
14
  .ibis-dropdown__trigger .ibis-input {
16
15
  gap: var(--spacing-0);
17
16
  }
@@ -25,40 +24,35 @@
25
24
  display: none;
26
25
  }
27
26
 
28
- /* Default field wrapper radius */
29
27
  .ibis-dropdown__trigger .ibis-input__field-wrapper {
30
28
  border-radius: var(--border-radius-lg);
31
29
  transition: border-radius var(--transition-duration-fast) var(--transition-timing-default);
32
30
  }
33
31
 
34
- /* ↓ ADDED — remove bottom radius on input when open so it connects to menu */
35
32
  .ibis-dropdown--open .ibis-dropdown__trigger .ibis-input__field-wrapper {
36
33
  border-bottom-left-radius: 0;
37
34
  border-bottom-right-radius: 0;
38
35
  border-bottom-color: transparent;
39
36
  }
40
37
 
41
- /* Menu */
42
38
  .ibis-dropdown__menu {
43
39
  position: absolute;
44
40
  width: 100%;
45
- background-color: var(--color-white);
46
- border: 2px solid var(--color-primary-950);
41
+ background-color: var(--color-surface-default);
42
+ border: 2px solid var(--border-color-emphasis);
47
43
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
48
44
  border-top: none;
49
45
  margin-top: 0;
50
- z-index: 10; /* TODO: replace with token */
46
+ z-index: 10;
51
47
  list-style: none;
52
48
  padding: var(--spacing-0);
53
49
  overflow: hidden;
54
50
  }
55
51
 
56
- /* Dividers between items */
57
52
  .ibis-dropdown__menu li + li {
58
- border-top: 1px solid var(--color-neutral-200);
53
+ border-top: 1px solid var(--border-color-default);
59
54
  }
60
55
 
61
- /* Menu items */
62
56
  .ibis-dropdown__item {
63
57
  all: unset;
64
58
  display: flex;
@@ -71,34 +65,32 @@
71
65
  font-family: var(--font-family-sans);
72
66
  font-size: var(--font-size-body-md);
73
67
  font-weight: var(--font-weight-medium);
74
- color: var(--color-neutral-900);
68
+ color: var(--color-text-primary);
75
69
  text-align: center;
76
70
  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
77
71
  }
78
72
 
79
73
  .ibis-dropdown__item:hover {
80
- background-color: var(--color-primary-400);
81
- color: var(--color-white);
74
+ background-color: var(--color-interactive-primary-bg-menu-hover);
75
+ color: var(--color-text-on-primary);
82
76
  }
83
77
 
84
- /* ↓ CHANGED — scoped to li aria-selected for correct specificity */
85
78
  li[aria-selected="true"] .ibis-dropdown__item {
86
- background-color: var(--color-primary-500);
87
- color: var(--color-white);
79
+ background-color: var(--color-interactive-primary-bg-menu-selected);
80
+ color: var(--color-text-on-primary);
88
81
  font-weight: var(--font-weight-bold);
89
82
  }
90
83
 
91
84
  li[aria-selected="true"] .ibis-dropdown__item:hover {
92
- background-color: var(--color-primary-700);
93
- color: var(--color-white);
85
+ background-color: var(--color-interactive-primary-bg-menu-selected-hover);
86
+ color: var(--color-text-on-primary);
94
87
  }
95
88
 
96
89
  .ibis-dropdown__item:focus {
97
90
  outline: none;
98
- background-color: var(--color-neutral-200);
91
+ background-color: var(--color-interactive-neutral-bg-hover);
99
92
  }
100
93
 
101
- /* Disabled */
102
94
  .ibis-dropdown__trigger:disabled {
103
95
  cursor: not-allowed;
104
96
  opacity: var(--opacity-5);
package/dist/components/dropdownButton.css CHANGED
@@ -15,8 +15,8 @@
15
15
  left: 0;
16
16
  margin-top: var(--spacing-1);
17
17
  min-width: 160px;
18
- background: var(--color-white);
19
- border: 1px solid var(--color-neutral-300);
18
+ background: var(--color-surface-default);
19
+ border: 1px solid var(--border-color-strong);
20
20
  border-radius: var(--border-radius-md);
21
21
  box-shadow: var(--shadow-elevation-sm);
22
22
  z-index: var(--z-index-dropdown);
@@ -25,17 +25,6 @@
25
25
  flex-direction: column;
26
26
  }
27
27
 
28
- /* .ibis-dropdown-menu :global(button) {
29
- all: unset;
30
- padding: 8px;
31
- cursor: pointer;
32
- border-radius: 4px;
33
- }
34
-
35
- .ibis-dropdown-menu :global(button:hover) {
36
- background-color: var(--color-neutral-100);
37
- } */
38
-
39
28
  .ibis-dropdown-menu :global(.ibis-dropdown-menu__item) {
40
29
  all: unset;
41
30
  display: flex;
@@ -48,25 +37,25 @@
48
37
  font-family: var(--font-family-sans);
49
38
  font-size: var(--font-size-body-md);
50
39
  font-weight: var(--font-weight-medium);
51
- color: var(--color-neutral-900);
40
+ color: var(--color-text-primary);
52
41
  text-align: center;
53
42
  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
54
43
  }
55
44
 
56
45
  .ibis-dropdown-menu :global(.ibis-dropdown-menu__item:hover) {
57
- background-color: var(--color-primary-400);
58
- color: var(--color-white);
46
+ background-color: var(--color-interactive-primary-bg-menu-hover);
47
+ color: var(--color-text-on-primary);
59
48
  }
60
49
 
61
50
  .ibis-dropdown-menu :global(.ibis-dropdown-menu__item--selected) {
62
- background-color: var(--color-primary-500);
63
- color: var(--color-white);
51
+ background-color: var(--color-interactive-primary-bg-menu-selected);
52
+ color: var(--color-text-on-primary);
64
53
  font-weight: var(--font-weight-bold);
65
54
  }
66
55
 
67
56
  .ibis-dropdown-menu :global(.ibis-dropdown-menu__item--selected:hover) {
68
- background-color: var(--color-primary-700);
69
- color: var(--color-white);
57
+ background-color: var(--color-interactive-primary-bg-menu-selected-hover);
58
+ color: var(--color-text-on-primary);
70
59
  }
71
60
 
72
61
  .ibis-caret {
@@ -79,3 +68,7 @@
79
68
  .ibis-caret--open {
80
69
  transform: rotate(180deg);
81
70
  }
71
+
72
+ .ibis-dropdown-button .ibis-button {
73
+ white-space: nowrap;
74
+ }