@ibis-design/css 0.6.0 → 0.7.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 (32) hide show
  1. package/README.md +90 -53
  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 +15 -12
  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,67 @@ 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
+ ## Theming (`data-theme`)
12
12
 
13
- ### Brands / style sets
13
+ Import the bundled stylesheet once. All themes share the **same variable names**; values change by `data-theme` on `<html>` (or any ancestor).
14
14
 
15
- The package ships two style sets. The default entry is **ibis**; use explicit paths for **alchemy**:
15
+ | `data-theme` value | Brand | Mode |
16
+ |--------------------|-------|------|
17
+ | `ib-light` | Ibis | Light (default) |
18
+ | `ib-dark` | Ibis | Dark (placeholder values) |
19
+ | `alc-light` | Alchemy | Light |
20
+ | `alc-dark` | Alchemy | Dark (placeholder values) |
16
21
 
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 |
22
-
23
- **Tailwind presets** — Use the preset that matches the token CSS you load:
24
-
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 |
30
-
31
- ### CSS variables
32
-
33
- Import the generated tokens in your CSS (or entry point) so that `:root` is populated with design tokens:
22
+ `:root` holds **global** tokens (spacing, shadows, motion, border widths, z-index). `:root` and `[data-theme="ib-light"]` share Ibis light **theme** tokens (colors, typography, radii) for no-JS fallback.
34
23
 
35
24
  ```css
36
25
  @import "@ibis-design/css";
37
- /* or */
38
- @import "@ibis-design/css/ibis-design.css";
39
26
  ```
40
27
 
41
- All tokens are exposed as custom properties, for example:
28
+ ```html
29
+ <html data-theme="ib-light">
30
+ ```
31
+
32
+ ```js
33
+ document.documentElement.dataset.theme = 'alc-dark';
34
+ ```
42
35
 
43
- - `--color-primary-500`, `--color-success-text`, …
44
- - `--spacing-1`, `--spacing-4`, …
45
- - `--font-sans`, `--font-size-base`, …
46
- - `--radius-sm`, `--radius-lg`, …
36
+ ### CSS variable naming
47
37
 
48
- Use them in your own CSS:
38
+ | Category | Pattern | Example |
39
+ |----------|---------|---------|
40
+ | Color primitive | `color.{palette}.{step}` | `--color-primary-500` |
41
+ | Color semantic | `color.{role}` or `color.brand.{name}` | `--color-text-primary`, `--color-brand-secondary` |
42
+ | Spacing | `spacing.{n}` | `--spacing-4` |
43
+ | Typography size | `font-size.body.{size}` | `--font-size-body-sm` |
44
+ | Border radius | `border-radius.{size}` | `--border-radius-md` |
45
+ | Shadow | `shadow.elevation.{size}`, `shadow.focus.{variant}` | `--shadow-focus-default` |
46
+ | Gradient | `gradient.{name}` | `--gradient-button` |
49
47
 
50
48
  ```css
51
49
  .card {
52
- background: var(--color-primary-50);
50
+ background: var(--color-backgrounds-classic-light);
51
+ color: var(--color-text-primary);
53
52
  padding: var(--spacing-4);
54
- border-radius: var(--radius-md);
55
- font-family: var(--font-sans);
53
+ border-radius: var(--border-radius-md);
54
+ box-shadow: var(--shadow-elevation-sm);
56
55
  }
57
56
  ```
58
57
 
59
- ### Tailwind preset
58
+ ### Component CSS
59
+
60
+ Shared presentation for web components lives in `src/styles/components/` (not in token JSON). Import per component:
61
+
62
+ ```css
63
+ @import "@ibis-design/css/components/button.css";
64
+ @import "@ibis-design/css/components/checkbox.css";
65
+ ```
66
+
67
+ Available stylesheets: `banner`, `button`, `checkbox`, `chips`, `dropdown`, `dropdownButton`, `pillTab`, `radio`, `switch`, `textarea`, `textInput`, `textlink`, `tipIndicator`, `toaster`, `tooltip`.
60
68
 
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.
69
+ `@ibis-design/svelte` components import these directly (e.g. `import '@ibis-design/css/components/button.css'` in `Button.svelte`).
62
70
 
63
- **Ibis:**
71
+ ### Tailwind preset
64
72
 
65
73
  ```js
66
74
  /** @type {import('tailwindcss').Config} */
@@ -70,36 +78,65 @@ module.exports = {
70
78
  };
71
79
  ```
72
80
 
73
- **Alchemy:**
81
+ Dark mode utilities respond to `[data-theme$="-dark"]` (configured in the preset). Load `@ibis-design/css` and set `data-theme` so `var(--color-*)` resolves.
74
82
 
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.
83
+ ## Build
80
84
 
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.
85
+ From the repo root:
82
86
 
83
- ## Build
87
+ ```bash
88
+ npm run build:css
89
+ ```
84
90
 
85
- From the package directory (or from the repo root with `npm run build:css`):
91
+ From this package:
86
92
 
87
93
  ```bash
88
- npm run build
94
+ npm run build # build + validate contract
95
+ npm run validate # check dist/design-tokens.css only
89
96
  ```
90
97
 
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>/`:
98
+ The build runs **five Style Dictionary instances** (one global + one per theme) — [documented SD pattern](https://styledictionary.com/reference/config/) when token paths collide across themes. Each instance uses `formatPlatform` (in-memory); results are concatenated into one file. No CSS regex merging.
99
+
100
+ 1. `global.json` → `:root` block in `dist/design-tokens.css`
101
+ 2. Each `themes/{id}.json` → `[data-theme="…"]` block (ib-light also targets `:root` for no-JS fallback)
102
+ 3. `dist/tokens/{themeId}.json` — flat `--var` maps via custom `json/css-vars-flat` format
103
+ 4. `src/tailwind.preset.js` (hand-written) + generated `dist/tailwind.theme.js`
104
+ 5. Copy `src/styles/components/*.css` → `dist/components/`
105
+
106
+ Do not edit `dist/` by hand. Change tokens in `src/tokens/` and rebuild.
92
107
 
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
108
+ ## Token source layout
96
109
 
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.
110
+ | Path | Role |
111
+ |------|------|
112
+ | `src/tokens/global.json` | Spacing, shadows, motion, border widths, z-index, opacity, sizes |
113
+ | `src/tokens/themes/ib-light.json` | Ibis light colors, fonts, radii, gradients |
114
+ | `src/tokens/themes/ib-dark.json` | Minimal dark overrides + PLACEHOLDER descriptions |
115
+ | `src/tokens/themes/alc-light.json` | Alchemy light |
116
+ | `src/tokens/themes/alc-dark.json` | Minimal dark overrides |
117
+ | `src/tokens/contract/required-keys.json` | CI contract for required CSS variables |
98
118
 
99
- ## Token source
119
+ Tokens use [DTCG](https://design-tokens.github.io/community-group/format/) JSON.
100
120
 
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.
121
+ ### Brand semantics
122
+
123
+ Every theme defines:
124
+
125
+ - `color.brand.primary`
126
+ - `color.brand.secondary`
127
+ - `color.brand.neutral`
128
+
129
+ Alchemy maps legacy `brand.blue` / yellow accents into these keys (see `docs/tokens-and-build.md`).
102
130
 
103
131
  ## Fonts
104
132
 
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.
133
+ Token font stacks (Inter, Metrisch, Beyond Infinity, etc.) are not bundled. Load fonts in your application to match the token values.
134
+
135
+ ## Legacy imports
136
+
137
+ These paths resolve to the unified bundle:
138
+
139
+ - `@ibis-design/css/ibis-design.css`
140
+ - `@ibis-design/css/alchemy-design.css`
141
+
142
+ Prefer `@ibis-design/css` or `@ibis-design/css/design-tokens.css` and control brand/mode with `data-theme`.
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
+ }