@ibis-design/css 0.8.2 → 1.0.0-alpha.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 (35) hide show
  1. package/README.md +46 -14
  2. package/dist/bootstrap-overrides.css +81 -0
  3. package/dist/components/authLayout.css +124 -0
  4. package/dist/components/banner.css +13 -17
  5. package/dist/components/button.css +13 -13
  6. package/dist/components/card.css +55 -0
  7. package/dist/components/cardLayout.css +71 -0
  8. package/dist/components/checkbox.css +29 -11
  9. package/dist/components/chips.css +8 -8
  10. package/dist/components/dashboardLayout.css +92 -0
  11. package/dist/components/dropdown.css +34 -16
  12. package/dist/components/dropdownButton.css +42 -28
  13. package/dist/components/formLayout.css +88 -0
  14. package/dist/components/navBottom.css +32 -0
  15. package/dist/components/navButton.css +233 -0
  16. package/dist/components/navDrawer.css +168 -0
  17. package/dist/components/navRail.css +135 -0
  18. package/dist/components/navShell.css +314 -0
  19. package/dist/components/pillTab.css +7 -12
  20. package/dist/components/radio.css +14 -13
  21. package/dist/components/switch.css +5 -8
  22. package/dist/components/textInput.css +12 -15
  23. package/dist/components/textarea.css +7 -13
  24. package/dist/components/textlink.css +6 -14
  25. package/dist/components/tipIndicator.css +4 -10
  26. package/dist/components/toaster.css +21 -27
  27. package/dist/components/topBar.css +52 -0
  28. package/dist/design-tokens.css +210 -86
  29. package/dist/tailwind.preset.js +1 -1
  30. package/dist/tailwind.theme.js +42 -2
  31. package/package.json +34 -31
  32. package/src/lib/assemble-bootstrap-overrides.ts +23 -0
  33. package/src/lib/assemble-design-tokens.ts +22 -0
  34. package/src/lib/set-theme.ts +79 -0
  35. 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 |
46
50
 
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.
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.
52
+
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,31 @@ 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`).
442
+
443
+ ---
444
+
445
+ ## Bootstrap 5.3 CSS variables
446
+
447
+ Map IBIS semantic tokens onto Bootstrap's `--bs-*` custom properties for apps that use [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/customize/css-variables/):
448
+
449
+ ```html
450
+ <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
451
+ <link rel="stylesheet" href="/path/to/app.css" />
452
+ ```
453
+
454
+ ```css
455
+ @import "@ibis-design/css";
456
+ @import "@ibis-design/css/bootstrap-overrides.css";
457
+ ```
458
+
459
+ `bootstrap-overrides.css` sets `--bs-primary`, `--bs-body-bg`, `--bs-body-color`, and related vars from IBIS semantic tokens under each `[data-brand][data-color-mode]` selector.
460
+
461
+ For Bootstrap's native dark mode, pass `syncBootstrapTheme: true` to `setTheme()` so `data-bs-theme` stays in sync with `data-color-mode`:
462
+
463
+ ```ts
464
+ setTheme({ brand: "ib", colorMode: "dark", syncBootstrapTheme: true });
465
+ ```
435
466
 
436
467
  ---
437
468
 
@@ -448,5 +479,6 @@ Font stacks in tokens (Inter, Metrisch, Beyond Infinity, etc.) are **not** inclu
448
479
  | `@ibis-design/css` | Full token stylesheet |
449
480
  | `@ibis-design/css/components/<name>.css` | Component presentation |
450
481
  | `@ibis-design/css/tailwind.preset` | Tailwind preset |
482
+ | `@ibis-design/css/bootstrap-overrides.css` | Bootstrap 5.3 `--bs-*` overrides |
451
483
 
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.
484
+ 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/bootstrap-overrides.css ADDED
@@ -0,0 +1,81 @@
1
+ /**
2
+ * Do not edit directly. Generated by @ibis-design/css build.
3
+ * Load after Bootstrap CSS and @ibis-design/css design tokens.
4
+ * IBIS theme selectors set --bs-* vars from semantic --color-* / --font-* tokens.
5
+ */
6
+
7
+ :root, [data-brand="ib"][data-color-mode="light"] {
8
+ --bs-primary: var(--color-brand-primary);
9
+ --bs-secondary: var(--color-brand-secondary);
10
+ --bs-success: var(--color-status-success);
11
+ --bs-danger: var(--color-status-error);
12
+ --bs-warning: var(--color-status-warning);
13
+ --bs-body-color: var(--color-text-primary);
14
+ --bs-secondary-color: var(--color-text-secondary);
15
+ --bs-body-bg: var(--color-surface-page);
16
+ --bs-secondary-bg: var(--color-surface-muted);
17
+ --bs-tertiary-bg: var(--color-surface-subtle);
18
+ --bs-link-color: var(--color-interactive-primary-fg);
19
+ --bs-link-hover-color: var(--color-interactive-primary-bg-emphasized);
20
+ --bs-border-color: var(--border-color-default);
21
+ --bs-border-radius: var(--border-radius-md);
22
+ --bs-font-sans-serif: var(--font-family-sans);
23
+ --bs-body-font-size: var(--font-size-body-md);
24
+ }
25
+
26
+ [data-brand="ib"][data-color-mode="dark"] {
27
+ --bs-primary: var(--color-brand-primary);
28
+ --bs-secondary: var(--color-brand-secondary);
29
+ --bs-success: var(--color-status-success);
30
+ --bs-danger: var(--color-status-error);
31
+ --bs-warning: var(--color-status-warning);
32
+ --bs-body-color: var(--color-text-primary);
33
+ --bs-secondary-color: var(--color-text-secondary);
34
+ --bs-body-bg: var(--color-surface-page);
35
+ --bs-secondary-bg: var(--color-surface-muted);
36
+ --bs-tertiary-bg: var(--color-surface-subtle);
37
+ --bs-link-color: var(--color-interactive-primary-fg);
38
+ --bs-link-hover-color: var(--color-interactive-primary-bg-emphasized);
39
+ --bs-border-color: var(--border-color-default);
40
+ --bs-border-radius: var(--border-radius-md);
41
+ --bs-font-sans-serif: var(--font-family-sans);
42
+ --bs-body-font-size: var(--font-size-body-md);
43
+ }
44
+
45
+ [data-brand="alc"][data-color-mode="light"] {
46
+ --bs-primary: var(--color-brand-primary);
47
+ --bs-secondary: var(--color-brand-secondary);
48
+ --bs-success: var(--color-status-success);
49
+ --bs-danger: var(--color-status-error);
50
+ --bs-warning: var(--color-status-warning);
51
+ --bs-body-color: var(--color-text-primary);
52
+ --bs-secondary-color: var(--color-text-secondary);
53
+ --bs-body-bg: var(--color-surface-page);
54
+ --bs-secondary-bg: var(--color-surface-muted);
55
+ --bs-tertiary-bg: var(--color-surface-subtle);
56
+ --bs-link-color: var(--color-interactive-primary-fg);
57
+ --bs-link-hover-color: var(--color-interactive-primary-bg-emphasized);
58
+ --bs-border-color: var(--border-color-default);
59
+ --bs-border-radius: var(--border-radius-md);
60
+ --bs-font-sans-serif: var(--font-family-sans);
61
+ --bs-body-font-size: var(--font-size-body-md);
62
+ }
63
+
64
+ [data-brand="alc"][data-color-mode="dark"] {
65
+ --bs-primary: var(--color-brand-primary);
66
+ --bs-secondary: var(--color-brand-secondary);
67
+ --bs-success: var(--color-status-success);
68
+ --bs-danger: var(--color-status-error);
69
+ --bs-warning: var(--color-status-warning);
70
+ --bs-body-color: var(--color-text-primary);
71
+ --bs-secondary-color: var(--color-text-secondary);
72
+ --bs-body-bg: var(--color-surface-page);
73
+ --bs-secondary-bg: var(--color-surface-muted);
74
+ --bs-tertiary-bg: var(--color-surface-subtle);
75
+ --bs-link-color: var(--color-interactive-primary-fg);
76
+ --bs-link-hover-color: var(--color-interactive-primary-bg-emphasized);
77
+ --bs-border-color: var(--border-color-default);
78
+ --bs-border-radius: var(--border-radius-md);
79
+ --bs-font-sans-serif: var(--font-family-sans);
80
+ --bs-body-font-size: var(--font-size-body-md);
81
+ }
package/dist/components/authLayout.css ADDED
@@ -0,0 +1,124 @@
1
+ /* Auth Layout — import via @ibis-design/css/components/authLayout.css */
2
+
3
+ .ib-auth-layout {
4
+ display: flex;
5
+ flex-direction: row;
6
+ height: 100dvh;
7
+ width: 100%;
8
+ background-color: var(--color-surface-muted);
9
+ overflow: hidden;
10
+ }
11
+
12
+ /* Left panel */
13
+ .ib-auth-layout__left {
14
+ display: flex;
15
+ flex-direction: column;
16
+ flex: 0 0 50%;
17
+ padding: var(--spacing-6);
18
+ position: relative;
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ .ib-auth-layout__logo {
23
+ display: flex;
24
+ align-items: flex-start;
25
+ justify-content: flex-start;
26
+ flex-shrink: 0;
27
+ }
28
+
29
+ .ib-auth-layout__logo-placeholder {
30
+ width: 48px;
31
+ height: 48px;
32
+ border-radius: var(--border-radius-full);
33
+ background: var(--gradient-brand-primary);
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ color: var(--color-text-inverse);
38
+ font-family: var(--font-family-heading);
39
+ font-weight: var(--font-weight-bold);
40
+ font-size: var(--font-size-body-lg);
41
+ }
42
+
43
+ .ib-auth-layout-logo-image {
44
+ height: 48px;
45
+ width: auto;
46
+ object-fit: contain;
47
+ }
48
+
49
+ .ib-auth-layout__content {
50
+ display: flex;
51
+ flex-direction: column;
52
+ gap: var(--spacing-6);
53
+ flex: 1;
54
+ justify-content: center;
55
+ padding: 0 var(--spacing-12);
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .ib-auth-layout__heading {
60
+ display: flex;
61
+ flex-direction: column;
62
+ gap: var(--spacing-2);
63
+ }
64
+
65
+ .ib-auth-layout__title {
66
+ font-family: var(--font-family-heading);
67
+ font-size: var(--font-size-heading-h2);
68
+ font-weight: var(--font-weight-bold);
69
+ color: var(--color-text-primary);
70
+ margin: 0;
71
+ }
72
+
73
+ .ib-auth-layout__subtitle {
74
+ font-family: var(--font-family-sans);
75
+ font-size: var(--font-size-body-md);
76
+ color: var(--color-text-secondary);
77
+ margin: 0;
78
+ }
79
+
80
+ .ib-auth-layout__form {
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: var(--spacing-4);
84
+ align-items: center;
85
+ }
86
+
87
+ .ib-auth-layout__copyright {
88
+ font-family: var(--font-family-sans);
89
+ font-size: var(--font-size-body-sm);
90
+ color: var(--color-text-muted);
91
+ flex-shrink: 0;
92
+ }
93
+
94
+ /* Right panel */
95
+ .ib-auth-layout__right {
96
+ flex: 0 0 50%;
97
+ padding: var(--spacing-4);
98
+ box-sizing: border-box;
99
+ display: flex;
100
+ align-items: stretch;
101
+ }
102
+
103
+ .ib-auth-layout__image-placeholder {
104
+ width: 100%;
105
+ border-radius: var(--border-radius-2xl);
106
+ border: var(--border-width-thin) solid var(--border-color-default);
107
+ overflow: hidden;
108
+ display: flex;
109
+ align-items: stretch;
110
+ background-color: var(--color-surface-default);
111
+ }
112
+
113
+ .ib-auth-layout__image-placeholder svg {
114
+ width: 100%;
115
+ height: 100%;
116
+ }
117
+
118
+ .ib-auth-layout__image {
119
+ width: 100%;
120
+ height: 100%;
121
+ object-fit: cover;
122
+ border-radius: var(--border-radius-2xl);
123
+ display: block;
124
+ }
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/card.css ADDED
@@ -0,0 +1,55 @@
1
+ /* Card component — import via @ibis-design/css/components/card.css */
2
+
3
+ .ibis-card {
4
+ display: flex;
5
+ flex-direction: column;
6
+ background-color: var(--color-surface-default);
7
+ border: var(--border-width-thin) solid var(--border-color-subtle);
8
+ border-radius: var(--border-radius-lg);
9
+ box-shadow: var(--shadow-elevation-sm);
10
+ overflow: hidden;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ .ibis-card__header {
15
+ display: flex;
16
+ flex-direction: column;
17
+ gap: var(--spacing-1);
18
+ padding: var(--spacing-4) var(--spacing-4) 0;
19
+ }
20
+
21
+ .ibis-card__title {
22
+ font-family: var(--font-family-heading);
23
+ font-size: var(--font-size-heading-h5);
24
+ font-weight: var(--font-weight-semibold);
25
+ color: var(--color-text-primary);
26
+ margin: 0;
27
+ }
28
+
29
+ .ibis-card__subtitle {
30
+ font-family: var(--font-family-sans);
31
+ font-size: var(--font-size-body-sm);
32
+ color: var(--color-text-muted);
33
+ margin: 0;
34
+ }
35
+
36
+ .ibis-card__body {
37
+ flex: 1;
38
+ padding: var(--spacing-4);
39
+ font-family: var(--font-family-sans);
40
+ font-size: var(--font-size-body-md);
41
+ color: var(--color-text-primary);
42
+ line-height: var(--line-height-normal);
43
+ }
44
+
45
+ .ibis-card__footer {
46
+ display: flex;
47
+ flex-direction: row;
48
+ align-items: center;
49
+ justify-content: flex-end;
50
+ gap: var(--spacing-2);
51
+ padding: 0 var(--spacing-4) var(--spacing-4);
52
+ border-top: var(--border-width-thin) solid var(--border-color-subtle);
53
+ padding-top: var(--spacing-3);
54
+ margin-top: var(--spacing-2);
55
+ }
package/dist/components/cardLayout.css ADDED
@@ -0,0 +1,71 @@
1
+ /* Card Layout — import via @ibis-design/css/components/cardLayout.css */
2
+
3
+ .ibis-card-layout {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--spacing-4);
7
+ width: 100%;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ .ibis-card-layout__header {
12
+ display: flex;
13
+ flex-direction: row;
14
+ align-items: flex-start;
15
+ justify-content: space-between;
16
+ gap: var(--spacing-4);
17
+ }
18
+
19
+ .ibis-card-layout__header-text {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: var(--spacing-1);
23
+ }
24
+
25
+ .ibis-card-layout__title {
26
+ font-family: var(--font-family-heading);
27
+ font-size: var(--font-size-heading-h4);
28
+ font-weight: var(--font-weight-bold);
29
+ color: var(--color-text-primary);
30
+ margin: 0;
31
+ }
32
+
33
+ .ibis-card-layout__subtitle {
34
+ font-family: var(--font-family-sans);
35
+ font-size: var(--font-size-body-sm);
36
+ color: var(--color-text-muted);
37
+ margin: 0;
38
+ }
39
+
40
+ .ibis-card-layout__header-action {
41
+ display: flex;
42
+ align-items: center;
43
+ flex-shrink: 0;
44
+ }
45
+
46
+ .ibis-card-layout__grid {
47
+ display: grid;
48
+ gap: var(--spacing-4);
49
+ grid-template-columns: 1fr;
50
+ }
51
+
52
+ /* sm — 2 columns */
53
+ @media (min-width: 640px) {
54
+ .ibis-card-layout__grid {
55
+ grid-template-columns: repeat(2, 1fr);
56
+ }
57
+ }
58
+
59
+ /* lg — 3 columns */
60
+ @media (min-width: 1024px) {
61
+ .ibis-card-layout__grid {
62
+ grid-template-columns: repeat(3, 1fr);
63
+ }
64
+ }
65
+
66
+ /* xl — 4 columns */
67
+ @media (min-width: 1280px) {
68
+ .ibis-card-layout__grid {
69
+ grid-template-columns: repeat(4, 1fr);
70
+ }
71
+ }
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
  }