@ibis-design/css 0.6.0 → 0.7.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 (32) hide show
  1. package/README.md +87 -58
  2. package/dist/components/banner.css +155 -0
  3. package/dist/components/button.css +179 -0
  4. package/dist/components/checkbox.css +103 -0
  5. package/dist/components/chips.css +76 -0
  6. package/dist/components/dropdown.css +105 -0
  7. package/dist/components/dropdownButton.css +81 -0
  8. package/dist/components/pillTab.css +59 -0
  9. package/dist/components/radio.css +108 -0
  10. package/dist/components/switch.css +68 -0
  11. package/dist/components/textInput.css +152 -0
  12. package/dist/components/textarea.css +91 -0
  13. package/dist/components/textlink.css +149 -0
  14. package/dist/components/tipIndicator.css +79 -0
  15. package/dist/components/toaster.css +129 -0
  16. package/dist/components/tooltip.css +0 -0
  17. package/dist/design-tokens.css +503 -0
  18. package/dist/tailwind.preset.js +5 -0
  19. package/dist/tailwind.theme.js +310 -0
  20. package/dist/tokens/alc-dark.json +1 -0
  21. package/dist/tokens/alc-light.json +1 -0
  22. package/dist/tokens/ib-dark.json +1 -0
  23. package/dist/tokens/ib-light.json +1 -0
  24. package/package.json +31 -28
  25. package/dist/alchemy/alchemy-design.css +0 -154
  26. package/dist/alchemy/alchemy-design.scss +0 -151
  27. package/dist/alchemy/tailwind.preset.js +0 -231
  28. package/dist/ibis/ibis-design.css +0 -267
  29. package/dist/ibis/ibis-design.scss +0 -264
  30. package/dist/ibis/tailwind.preset.js +0 -414
  31. package/dist/ibis/tokens.css +0 -196
  32. package/dist/ibis/tokens.scss +0 -193
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ibis-design/css
2
2
 
3
- Design tokens as CSS custom properties, optional base CSS, and a Tailwind v4–compatible preset for the IBIS design system. Framework-agnostic; usable from any stack.
3
+ Design tokens as CSS custom properties, shared component styles, and a Tailwind preset for the IBIS design system. Framework-agnostic; usable from any stack.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,59 +8,96 @@ Design tokens as CSS custom properties, optional base CSS, and a Tailwind v4–c
8
8
  npm install @ibis-design/css
9
9
  ```
10
10
 
11
- ## Usage
11
+ ## Quick start
12
12
 
13
- ### Brands / style sets
13
+ 1. Import the token stylesheet once in your app entry (or root layout).
14
+ 2. Set `data-theme` on `<html>` (or an ancestor) to pick brand and light/dark mode.
14
15
 
15
- The package ships two style sets. The default entry is **ibis**; use explicit paths for **alchemy**:
16
+ ```css
17
+ @import "@ibis-design/css";
18
+ ```
16
19
 
17
- | Import | Description |
18
- |--------|-------------|
19
- | `@ibis-design/css` or `@ibis-design/css/ibis-design.css` | IBIS design tokens (default) |
20
- | `@ibis-design/css/alchemy-design.css` | Alchemy design tokens |
21
- | `@ibis-design/css/ibis-design.scss` / `alchemy-design.scss` | SCSS variables for each brand |
20
+ ```html
21
+ <html data-theme="ib-light">
22
+ ```
22
23
 
23
- **Tailwind presets** — Use the preset that matches the token CSS you load:
24
+ ```js
25
+ document.documentElement.dataset.theme = "alc-dark";
26
+ ```
24
27
 
25
- | Import | Description |
26
- |--------|-------------|
27
- | `@ibis-design/css/tailwind.preset` or `@ibis-design/css/preset` | IBIS preset (default) |
28
- | `@ibis-design/css/ibis/tailwind.preset` | IBIS preset (explicit) |
29
- | `@ibis-design/css/alchemy/tailwind.preset` | Alchemy preset |
28
+ Without the stylesheet and `data-theme`, `var(--color-*)` and other tokens will not resolve.
30
29
 
31
- ### CSS variables
30
+ ## Theming (`data-theme`)
32
31
 
33
- Import the generated tokens in your CSS (or entry point) so that `:root` is populated with design tokens:
32
+ All themes expose the **same CSS variable names**; only the values change.
34
33
 
35
- ```css
36
- @import "@ibis-design/css";
37
- /* or */
38
- @import "@ibis-design/css/ibis-design.css";
34
+ | `data-theme` | Brand | Mode |
35
+ |--------------|-------|------|
36
+ | `ib-light` | Ibis | Light (default) |
37
+ | `ib-dark` | Ibis | Dark |
38
+ | `alc-light` | Alchemy | Light |
39
+ | `alc-dark` | Alchemy | Dark |
40
+
41
+ **Cascade:**
42
+
43
+ - **Global tokens** (spacing, shadows, motion, border widths, z-index) live on `:root` for every theme.
44
+ - **Theme tokens** (colors, font families/sizes, radii, gradients) come from the active `data-theme` block.
45
+ - **Ibis light** also applies to `:root` when no theme attribute is set (no-JS fallback).
46
+
47
+ Switch themes at runtime:
48
+
49
+ ```js
50
+ document.documentElement.dataset.theme = "alc-light";
39
51
  ```
40
52
 
41
- All tokens are exposed as custom properties, for example:
53
+ ## CSS custom properties
42
54
 
43
- - `--color-primary-500`, `--color-success-text`, …
44
- - `--spacing-1`, `--spacing-4`, …
45
- - `--font-sans`, `--font-size-base`, …
46
- - `--radius-sm`, `--radius-lg`, …
55
+ ### Naming
47
56
 
48
- Use them in your own CSS:
57
+ | Category | Example variable |
58
+ |----------|------------------|
59
+ | Color primitive | `--color-primary-500` |
60
+ | Color semantic | `--color-text-primary`, `--color-brand-secondary` |
61
+ | Spacing | `--spacing-4` |
62
+ | Typography size | `--font-size-body-sm` |
63
+ | Border radius | `--border-radius-md` |
64
+ | Shadow | `--shadow-elevation-sm`, `--shadow-focus-default` |
65
+ | Gradient | `--gradient-button` |
66
+
67
+ ### Example
49
68
 
50
69
  ```css
51
70
  .card {
52
- background: var(--color-primary-50);
71
+ background: var(--color-backgrounds-classic-light);
72
+ color: var(--color-text-primary);
53
73
  padding: var(--spacing-4);
54
- border-radius: var(--radius-md);
55
- font-family: var(--font-sans);
74
+ border-radius: var(--border-radius-md);
75
+ box-shadow: var(--shadow-elevation-sm);
56
76
  }
57
77
  ```
58
78
 
59
- ### Tailwind preset
79
+ Semantic brand accents (values differ per theme):
80
+
81
+ - `--color-brand-primary`
82
+ - `--color-brand-secondary`
83
+ - `--color-brand-neutral`
60
84
 
61
- Use the preset so Tailwind utilities (e.g. `bg-primary-500`, `p-4`, `rounded-md`) map to the same token values. Load the preset that matches the token CSS you use.
85
+ ## Component styles
62
86
 
63
- **Ibis:**
87
+ Optional stylesheets for shared `.ibis-*` classes. Import only what you need:
88
+
89
+ ```css
90
+ @import "@ibis-design/css/components/button.css";
91
+ @import "@ibis-design/css/components/checkbox.css";
92
+ ```
93
+
94
+ Available entry points: `banner`, `button`, `checkbox`, `chips`, `dropdown`, `dropdownButton`, `pillTab`, `radio`, `switch`, `textarea`, `textInput`, `textlink`, `tipIndicator`, `toaster`, `tooltip`.
95
+
96
+ If you use **@ibis-design/svelte**, components already import the matching stylesheet; you do not need these unless you use the same class names outside Svelte.
97
+
98
+ ## Tailwind CSS
99
+
100
+ Use the preset in `tailwind.config.js` (Tailwind v3):
64
101
 
65
102
  ```js
66
103
  /** @type {import('tailwindcss').Config} */
@@ -70,36 +107,28 @@ module.exports = {
70
107
  };
71
108
  ```
72
109
 
73
- **Alchemy:**
74
-
75
- ```js
76
- presets: [require("@ibis-design/css/alchemy/tailwind.preset")],
77
- ```
78
-
79
- Ensure the matching token CSS is loaded in your app (e.g. `@import "@ibis-design/css/ibis-design.css"` for ibis or `@import "@ibis-design/css/alchemy-design.css"` for alchemy) so that the `var(--...)` references resolve.
80
-
81
- Tailwind v4 may use a different config or CSS-based theme; the preset shape is compatible with Tailwind v3. For v4, use the same preset via `@config` if supported, or import the tokens CSS and extend your theme with the same variable names.
82
-
83
- ## Build
84
-
85
- From the package directory (or from the repo root with `npm run build:css`):
110
+ - Utilities map to the same `var(--*)` names as the CSS bundle.
111
+ - Dark mode utilities use `[data-theme$="-dark"]` (configured in the preset).
112
+ - You must still import `@ibis-design/css` in your app and set `data-theme` on the document.
86
113
 
87
- ```bash
88
- npm run build
89
- ```
114
+ ## Fonts
90
115
 
91
- This runs Style Dictionary for each token set in `src/tokens/` (e.g. `ibis.json`, `alchemy.json`) and writes per brand under `dist/<brand>/`:
116
+ Font family tokens (Inter, Metrisch, Beyond Infinity, etc.) are **not** bundled. Load the fonts in your application to match the stacks referenced in the tokens.
92
117
 
93
- - `dist/<brand>/<brand>-design.css` — `:root` block with all CSS custom properties
94
- - `dist/<brand>/<brand>-design.scss` — SCSS variables
95
- - `dist/<brand>/tailwind.preset.js` — Tailwind theme extend object that references those variables
118
+ ## Package entry points
96
119
 
97
- Do not edit the files in `dist/`; they are generated. To change tokens, edit the JSON files in `src/tokens/` and run `npm run build` again.
120
+ | Import | Purpose |
121
+ |--------|---------|
122
+ | `@ibis-design/css` | Full design token stylesheet (`design-tokens.css`) |
123
+ | `@ibis-design/css/design-tokens.css` | Same as default export |
124
+ | `@ibis-design/css/tailwind.preset` | Tailwind preset (includes dark mode selector) |
125
+ | `@ibis-design/css/components/<name>.css` | Per-component presentation CSS |
98
126
 
99
- ## Token source
127
+ ### Legacy paths
100
128
 
101
- Tokens are defined in DTCG format in `src/tokens/` (e.g. `ibis.json`, `alchemy.json`). The build is driven by `src/scripts/build.ts` and `src/config/style-dictionary.config.ts`. Style Dictionary reads the token JSON and emits CSS, SCSS, and the Tailwind preset. Other packages (e.g. Svelte, React Native) can consume the generated CSS or preset for consistent values.
129
+ These resolve to the same unified token bundle as `@ibis-design/css`:
102
130
 
103
- ## Fonts
131
+ - `@ibis-design/css/ibis-design.css`
132
+ - `@ibis-design/css/alchemy-design.css`
104
133
 
105
- The tokens reference font families (e.g. Inter, Metrisch, Beyond Infinity). This package does not bundle or load font files. To get the intended typography, load the fonts in your app (e.g. via Google Fonts, a CDN, or self-hosted assets) and ensure the font names match the token values.
134
+ Prefer `@ibis-design/css` and switch brand/mode with `data-theme` instead of separate brand CSS files.
package/dist/components/banner.css ADDED
@@ -0,0 +1,155 @@
1
+ .ibis-banner {
2
+ font-family: var(--font-family-sans);
3
+ display: flex;
4
+ align-items: flex-start;
5
+ gap: var(--spacing-2);
6
+ padding: var(--spacing-2) var(--spacing-4);
7
+ border-radius: 16px;
8
+ border: var(--border-width-default) solid var(--color-neutral-200);
9
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
10
+
11
+ max-width: 300px;
12
+ position: relative;
13
+ margin-bottom: 2px;
14
+ }
15
+
16
+ /* ICON */
17
+ .ibis-banner__icon {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+
22
+ width: 20px;
23
+ height: 20px;
24
+ top: 2px;
25
+ left: 2px;
26
+
27
+ flex-shrink: 0;
28
+
29
+ margin-top: 2px;
30
+ color: var(--color-white);
31
+ }
32
+
33
+ .ibis-banner__icon :global(svg) {
34
+ width: 100%;
35
+ height: 100%;
36
+ }
37
+
38
+ .ibis-banner__content {
39
+ flex: 1;
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: var(--spacing-1);
43
+ }
44
+
45
+ .ibis-banner__title {
46
+ font-weight: var(--font-weight-medium);
47
+ font-size: var(--font-size-body-sm);
48
+ }
49
+
50
+ .ibis-banner__message {
51
+ font-size: var(--font-size-body-sm);
52
+ color: var(--color-white);
53
+ }
54
+
55
+ .ibis-banner--default .ibis-banner__message {
56
+ font-size: var(--font-size-body-sm);
57
+ color: var(--color-primary-900);
58
+ }
59
+
60
+ .ibis-banner--success .ibis-banner__message {
61
+ font-size: var(--font-size-body-sm);
62
+ color: var(--color-status-success);
63
+ }
64
+
65
+ .ibis-banner--error .ibis-banner__message {
66
+ font-size: var(--font-size-body-sm);
67
+ color: var(--color-status-error);
68
+ }
69
+
70
+ .ibis-banner__close {
71
+ background: transparent;
72
+ border: none;
73
+ cursor: pointer;
74
+ font-size: var(--font-size-body-lg);
75
+ line-height: 1;
76
+ color: var(--color-white);
77
+ flex-shrink: 0;
78
+ }
79
+
80
+ /* SUCCESS */
81
+ .ibis-banner--success {
82
+ border-color: var(--color-status-success) var(--opacity-1);
83
+ background-color: var(--color-status-success) var(--opacity-1);
84
+ }
85
+
86
+ .ibis-banner--success .ibis-banner__title {
87
+ color: var(--color-status-success);
88
+ }
89
+
90
+ .ibis-banner--success .ibis-banner__icon {
91
+ color: var(--color-status-success);
92
+ }
93
+
94
+ .ibis-banner--success .ibis-banner__close {
95
+ color: var(--color-status-success);
96
+ border-color: var(--color-status-success);
97
+ }
98
+
99
+ /* ERROR */
100
+ .ibis-banner--error {
101
+ border-color: var(--color-status-error) var(--opacity-1);
102
+ background-color: var(--color-status-error) var(--opacity-1);
103
+ }
104
+
105
+ .ibis-banner--error .ibis-banner__title {
106
+ color: var(--color-status-error);
107
+ }
108
+
109
+ .ibis-banner--error .ibis-banner__icon {
110
+ color: var(--color-status-error);
111
+ }
112
+
113
+ .ibis-banner--error .ibis-banner__close {
114
+ color: var(--color-status-error);
115
+ border-color: var(--color-status-error);
116
+ }
117
+
118
+ /* DEFAULT */
119
+ .ibis-banner--default {
120
+ border-color: var(--color-primary-800) var(--opacity-1);
121
+ background-color: var(--color-primary-800) var(--opacity-1);
122
+ }
123
+
124
+ .ibis-banner--default .ibis-banner__title {
125
+ color: var(--color-primary-900);
126
+ }
127
+
128
+ .ibis-banner--default .ibis-banner__icon {
129
+ color: var(--color-primary-900);
130
+ }
131
+
132
+ .ibis-banner--default .ibis-banner__close {
133
+ color: var(--color-primary-900);
134
+ border-color: var(--color-primary-900);
135
+ }
136
+
137
+ .ibis-banner__loader {
138
+ width: 1em;
139
+ height: 1em;
140
+
141
+ border: var(--border-width-default) solid var(--color-primary-300);
142
+ border-top-color: var(--color-primary-900);
143
+ border-radius: 50%;
144
+
145
+ animation: ibis-banner-spin 0.8s linear infinite;
146
+ }
147
+
148
+ @keyframes ibis-banner-spin {
149
+ from {
150
+ transform: rotate(0deg);
151
+ }
152
+ to {
153
+ transform: rotate(360deg);
154
+ }
155
+ }
package/dist/components/button.css ADDED
@@ -0,0 +1,179 @@
1
+ /* Shared button styles — import via @ibis-design/css/components/button.css */
2
+
3
+ .ibis-button {
4
+ font-family: var(--font-family-sans);
5
+ font-weight: var(--font-weight-normal);
6
+ border: var(--border-width-default) solid transparent;
7
+ cursor: pointer;
8
+ transition:
9
+ filter var(--transition-duration-fast) var(--transition-timing-default),
10
+ transform var(--transition-duration-fast) var(--transition-timing-default),
11
+ box-shadow var(--transition-duration-fast) var(--transition-timing-default);
12
+ display: inline-flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ }
16
+
17
+ .ibis-button :global(svg) {
18
+ width: 1em;
19
+ height: 1em;
20
+ display: inline-block;
21
+ vertical-align: middle;
22
+ gap: var(--spacing-1);
23
+ }
24
+
25
+ .ibis-button__content {
26
+ display: inline-flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ gap: var(--spacing-1);
30
+ }
31
+
32
+ .ibis-button__content--hidden {
33
+ visibility: hidden;
34
+ }
35
+
36
+ .ibis-button--sm {
37
+ padding: var(--spacing-1) var(--spacing-2);
38
+ font-size: var(--font-size-body-sm);
39
+ border-radius: var(--border-radius-sm);
40
+ }
41
+
42
+ .ibis-button--md {
43
+ padding: var(--spacing-2) var(--spacing-4);
44
+ font-size: var(--font-size-body-md);
45
+ border-radius: var(--border-radius-md);
46
+ }
47
+
48
+ .ibis-button--lg {
49
+ padding: var(--spacing-3) var(--spacing-6);
50
+ font-size: var(--font-size-body-lg);
51
+ border-radius: var(--border-radius-lg);
52
+ }
53
+
54
+ .ibis-button--primary {
55
+ background: var(--gradient-button);
56
+ color: var(--color-white);
57
+ box-shadow: var(--shadow-elevation-sm);
58
+ border: var(--border-width-hairline) solid var(--border-color-button);
59
+ }
60
+
61
+ .ibis-button--primary:not(:disabled):hover,
62
+ .ibis-button--primary:not(:disabled):active {
63
+ box-shadow: none;
64
+ }
65
+
66
+ .ibis-button--primary:not(:disabled):hover {
67
+ background: var(--color-primary-800);
68
+ border-width: var(--border-width-hairline);
69
+ }
70
+
71
+ .ibis-button--primary:not(:disabled):active {
72
+ background: var(--color-primary-800);
73
+ border-color: var(--color-primary-400);
74
+ border-width: var(--border-width-thin);
75
+ }
76
+
77
+ .ibis-button--primary:disabled {
78
+ background: var(--color-neutral-400);
79
+ color: var(--color-neutral-600);
80
+ border-color: var(--color-neutral-600);
81
+ }
82
+
83
+ .ibis-button--secondary {
84
+ background-color: transparent;
85
+ color: var(--color-brand-secondary);
86
+ border-color: var(--color-brand-secondary);
87
+ }
88
+
89
+ .ibis-button--secondary:not(:disabled):hover {
90
+ background-color: var(--color-primary-50);
91
+ }
92
+
93
+ .ibis-button--icon-only {
94
+ padding: var(--spacing-2);
95
+ }
96
+
97
+ .ibis-button--icon-only .ibis-button__content {
98
+ gap: 0;
99
+ }
100
+
101
+ .ibis-button:disabled {
102
+ opacity: var(--opacity-disabled);
103
+ cursor: not-allowed;
104
+ }
105
+
106
+ .ibis-button--loading {
107
+ position: relative;
108
+ cursor: not-allowed;
109
+ pointer-events: none;
110
+ }
111
+
112
+ .ibis-button__loader {
113
+ position: absolute;
114
+ width: 1em;
115
+ height: 1em;
116
+ border: var(--border-width-default) solid var(--color-black);
117
+ border-top-color: var(--color-white);
118
+ border-radius: 50%;
119
+ animation: ibis-button-spin 0.8s linear infinite;
120
+ top: 50%;
121
+ left: 50%;
122
+ transform: translate(-50%, -50%);
123
+ }
124
+
125
+ .ibis-button--skeleton {
126
+ position: relative;
127
+ overflow: hidden;
128
+ background: var(--color-neutral-200);
129
+ color: transparent;
130
+ border-color: var(--color-neutral-500);
131
+ cursor: default;
132
+ pointer-events: none;
133
+ }
134
+
135
+ .ibis-button--skeleton::after {
136
+ content: "";
137
+ position: absolute;
138
+ top: 50%;
139
+ left: 50%;
140
+ transform: translate(-50%, -50%);
141
+ width: 80%;
142
+ height: 1em;
143
+ background-color: var(--color-neutral-400);
144
+ }
145
+
146
+ .ibis-button--icon-only--skeleton::after {
147
+ width: 1em;
148
+ height: 1em;
149
+ border-radius: var(--border-radius-xs);
150
+ }
151
+
152
+ .ibis-button--skeleton::before {
153
+ content: "";
154
+ position: absolute;
155
+ inset: 0;
156
+ background: var(--gradient-skeleton);
157
+ transform: translateX(-100%);
158
+ animation: ibis-shimmer 2s infinite;
159
+ border-radius: inherit;
160
+ }
161
+
162
+ @keyframes ibis-button-spin {
163
+ from {
164
+ transform: translate(-50%, -50%) rotate(0deg);
165
+ }
166
+ to {
167
+ transform: translate(-50%, -50%) rotate(360deg);
168
+ }
169
+ }
170
+
171
+ @keyframes ibis-shimmer {
172
+ 0% {
173
+ transform: translateX(-100%);
174
+ }
175
+
176
+ 100% {
177
+ transform: translateX(100%);
178
+ }
179
+ }
package/dist/components/checkbox.css ADDED
@@ -0,0 +1,103 @@
1
+ .ibis-checkbox {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--spacing-1);
5
+ }
6
+
7
+ .ibis-checkbox__label-wrapper {
8
+ display: flex;
9
+ flex-direction: column;
10
+ gap: var(--spacing-1);
11
+ }
12
+
13
+ .ibis-checkbox__label {
14
+ font-size: var(--font-size-body-md);
15
+ color: var(--color-neutral-700);
16
+ }
17
+
18
+ .ibis-checkbox__description {
19
+ font-size: var(--font-size-body-sm);
20
+ color: var(--color-neutral-500);
21
+ }
22
+
23
+ .ibis-checkbox__wrapper {
24
+ display: flex;
25
+ }
26
+
27
+ .ibis-checkbox__control {
28
+ display: inline-flex;
29
+ align-items: center;
30
+ gap: var(--spacing-2);
31
+ cursor: pointer;
32
+ user-select: none;
33
+ }
34
+
35
+ .ibis-checkbox__input {
36
+ display: none;
37
+ }
38
+
39
+ .ibis-checkbox__box {
40
+ width: 18px;
41
+ height: 18px;
42
+ border: var(--border-width-default) solid var(--color-neutral-300);
43
+ border-radius: var(--border-radius-sm);
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ background: var(--color-neutral-100);
48
+ transition:
49
+ box-shadow var(--transition-duration-normal) var(--transition-timing-default),
50
+ border-color var(--transition-duration-normal) var(--transition-timing-default),
51
+ background var(--transition-duration-normal) var(--transition-timing-default);
52
+ }
53
+
54
+ .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 */
57
+ }
58
+
59
+ .ibis-checkbox__input:checked + .ibis-checkbox__box {
60
+ background: var(--color-primary-200);
61
+ border-color: var(--color-primary-800);
62
+ }
63
+
64
+ .ibis-checkbox__control:hover .ibis-checkbox__input:checked + .ibis-checkbox__box {
65
+ box-shadow: var(--shadow-focus-primary); /* TODO: replace with token */
66
+ }
67
+
68
+ .ibis-checkbox__text {
69
+ font-size: var(--font-size-body-md);
70
+ color: var(--color-text-primary);
71
+ }
72
+
73
+ .ibis-checkbox__help {
74
+ font-size: var(--font-size-body-sm);
75
+ color: var(--color-neutral-500);
76
+ }
77
+
78
+ .ibis-checkbox__error {
79
+ font-size: var(--font-size-body-sm);
80
+ color: var(--color-status-error);
81
+ }
82
+
83
+ .ibis-checkbox--disabled {
84
+ opacity: var(--opacity-5);
85
+ cursor: not-allowed;
86
+ }
87
+
88
+ .ibis-checkbox--invalid .ibis-checkbox__box {
89
+ border-color: var(--color-status-error);
90
+ }
91
+
92
+ .ibis-checkbox--invalid .ibis-checkbox__text {
93
+ font-size: var(--font-size-body-md);
94
+ color: var(--color-status-error);
95
+ }
96
+
97
+ .ibis-checkbox--invalid
98
+ .ibis-checkbox__control:hover
99
+ .ibis-checkbox__input:not(:checked)
100
+ + .ibis-checkbox__box {
101
+ box-shadow: var(--shadow-focus-error); /* TODO: replace with token */
102
+ border-color: var(--color-status-error);
103
+ }
package/dist/components/chips.css ADDED
@@ -0,0 +1,76 @@
1
+ .ibis-chips {
2
+ font-family: var(--font-family-sans);
3
+ font-weight: var(--font-weight-normal);
4
+ border-radius: var(--border-radius-sm);
5
+ padding: var(--spacing-1) var(--spacing-3);
6
+ background-color: var(--color-white);
7
+ color: var(--color-text-primary);
8
+ border: var(--border-width-thin) solid var(--color-neutral-200);
9
+ cursor: pointer;
10
+ }
11
+
12
+ .ibis-chips__content {
13
+ display: inline-flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ gap: var(--spacing-2);
17
+ }
18
+
19
+ .ibis-chips__icon {
20
+ display: inline-flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ }
24
+
25
+ .ibis-chips__label {
26
+ display: inline-flex;
27
+ }
28
+
29
+ .ibis-chips :global(svg) {
30
+ width: 1rem;
31
+ height: 1rem;
32
+ display: inline-block;
33
+ vertical-align: middle;
34
+ gap: var(--spacing-2);
35
+ }
36
+
37
+ .ibis-chips--sm {
38
+ font-size: var(--font-size-body-sm);
39
+ }
40
+
41
+ .ibis-chips--md {
42
+ font-size: var(--font-size-body-md);
43
+ }
44
+
45
+ .ibis-chips--lg {
46
+ font-size: var(--font-size-body-lg);
47
+ }
48
+
49
+ .ibis-chips--skeleton {
50
+ background-color: var(--color-neutral-200);
51
+ color: transparent;
52
+ pointer-events: none;
53
+ }
54
+
55
+ .ibis-chips__content--hidden {
56
+ visibility: hidden;
57
+ }
58
+
59
+ .ibis-chips:disabled {
60
+ opacity: var(--opacity-disabled);
61
+ cursor: not-allowed;
62
+ }
63
+
64
+ .ibis-chips:not(:disabled):hover {
65
+ background-color: var(--color-neutral-200);
66
+ }
67
+
68
+ .ibis-chips--selected {
69
+ background-color: var(--color-primary-100);
70
+ color: var(--color-primary-800);
71
+ border-color: var(--color-primary-800);
72
+ }
73
+
74
+ .ibis-chips--selected:not(:disabled):hover {
75
+ background-color: var(--color-primary-200);
76
+ }