@ibis-design/css 1.0.0-alpha.4 → 1.0.0-alpha.5

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 +138 -129
  2. package/dist/components/appLayout.css +6 -6
  3. package/dist/components/banner.css +25 -25
  4. package/dist/components/button.css +28 -28
  5. package/dist/components/card.css +13 -13
  6. package/dist/components/cardLayout.css +16 -16
  7. package/dist/components/checkbox.css +24 -24
  8. package/dist/components/chips.css +14 -14
  9. package/dist/components/dropdown.css +21 -21
  10. package/dist/components/dropdownButton.css +13 -13
  11. package/dist/components/formLayout.css +18 -18
  12. package/dist/components/pillTab.css +8 -8
  13. package/dist/components/pillTabWrapper.css +1 -1
  14. package/dist/components/radio.css +22 -22
  15. package/dist/components/switch.css +12 -12
  16. package/dist/components/textInput.css +29 -29
  17. package/dist/components/textarea.css +77 -56
  18. package/dist/components/textlink.css +24 -24
  19. package/dist/components/tipIndicator.css +12 -12
  20. package/dist/components/toaster.css +21 -21
  21. package/dist/components/topBar.css +1 -1
  22. package/package.json +1 -1
  23. package/src/lib/set-theme.ts +35 -6
package/dist/components/textInput.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* TextInput component — import via @ibis-design/css/components/textInput.css */
2
2
 
3
- .ibis-input {
3
+ .ib-input {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  gap: var(--spacing-1);
@@ -8,19 +8,19 @@
8
8
  max-width: 300px;
9
9
  }
10
10
 
11
- .ibis-input__label-wrapper {
11
+ .ib-input__label-wrapper {
12
12
  display: flex;
13
13
  flex-direction: column;
14
14
  gap: var(--spacing-1);
15
15
  }
16
16
 
17
- .ibis-input__label {
17
+ .ib-input__label {
18
18
  font-family: var(--font-family-sans);
19
19
  font-size: var(--font-size-body-md);
20
20
  color: var(--color-text-secondary);
21
21
  }
22
22
 
23
- .ibis-input__description {
23
+ .ib-input__description {
24
24
  font-family: var(--font-family-sans);
25
25
  font-size: var(--font-size-body-sm);
26
26
  color: var(--color-text-muted);
@@ -28,7 +28,7 @@
28
28
 
29
29
  /* ===== WRAPPER — layout only, no border ===== */
30
30
 
31
- .ibis-input__wrapper {
31
+ .ib-input__wrapper {
32
32
  display: flex;
33
33
  align-items: stretch;
34
34
  border-radius: var(--border-radius-lg);
@@ -37,7 +37,7 @@
37
37
 
38
38
  /* ===== PREPEND ===== */
39
39
 
40
- .ibis-input__prepend {
40
+ .ib-input__prepend {
41
41
  display: flex;
42
42
  align-items: center;
43
43
  padding: 0 var(--spacing-3);
@@ -51,17 +51,17 @@
51
51
  transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
52
52
  }
53
53
 
54
- .ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend {
54
+ .ib-input__wrapper:not(:focus-within):hover .ib-input__prepend {
55
55
  border-color: var(--border-color-strong);
56
56
  }
57
57
 
58
- .ibis-input__wrapper:focus-within .ibis-input__prepend {
58
+ .ib-input__wrapper:focus-within .ib-input__prepend {
59
59
  border-color: var(--border-color-focus);
60
60
  }
61
61
 
62
62
  /* ===== FIELD WRAPPER — owns the visible border ===== */
63
63
 
64
- .ibis-input__field-wrapper {
64
+ .ib-input__field-wrapper {
65
65
  display: flex;
66
66
  align-items: center;
67
67
  flex: 1;
@@ -72,37 +72,37 @@
72
72
  }
73
73
 
74
74
  /* When prepend is present, remove left radius and border */
75
- .ibis-input__wrapper--with-prepend .ibis-input__field-wrapper {
75
+ .ib-input__wrapper--with-prepend .ib-input__field-wrapper {
76
76
  border-left: none;
77
77
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
78
78
  }
79
79
 
80
80
  /* Hover */
81
- .ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
82
- .ibis-input__field-wrapper:not(:focus-within):hover {
81
+ .ib-input:not(.ib-input--disabled):not(.ib-input--invalid)
82
+ .ib-input__field-wrapper:not(:focus-within):hover {
83
83
  border-color: var(--border-color-strong);
84
84
  }
85
85
 
86
86
  /* Focus */
87
- .ibis-input__field-wrapper:focus-within {
87
+ .ib-input__field-wrapper:focus-within {
88
88
  border-color: var(--border-color-focus);
89
89
  }
90
90
 
91
- .ibis-input--sm .ibis-input__field-wrapper {
91
+ .ib-input--sm .ib-input__field-wrapper {
92
92
  padding: var(--spacing-1) var(--spacing-2);
93
93
  }
94
94
 
95
- .ibis-input--md .ibis-input__field-wrapper {
95
+ .ib-input--md .ib-input__field-wrapper {
96
96
  padding: var(--spacing-2);
97
97
  }
98
98
 
99
- .ibis-input--lg .ibis-input__field-wrapper {
99
+ .ib-input--lg .ib-input__field-wrapper {
100
100
  padding: var(--spacing-3) var(--spacing-4);
101
101
  }
102
102
 
103
103
  /* ===== FIELD ===== */
104
104
 
105
- .ibis-input__field {
105
+ .ib-input__field {
106
106
  flex: 1;
107
107
  width: 100%;
108
108
  min-width: 0;
@@ -114,14 +114,14 @@
114
114
  font-size: var(--font-size-body-md);
115
115
  }
116
116
 
117
- .ibis-input__field::placeholder {
117
+ .ib-input__field::placeholder {
118
118
  color: var(--color-text-muted);
119
119
  }
120
120
 
121
121
  /* ===== PREFIX / SUFFIX ===== */
122
122
 
123
- .ibis-input__prefix,
124
- .ibis-input__suffix {
123
+ .ib-input__prefix,
124
+ .ib-input__suffix {
125
125
  display: inline-flex;
126
126
  align-items: center;
127
127
  padding: 0 var(--spacing-2);
@@ -130,13 +130,13 @@
130
130
 
131
131
  /* ===== HELP / ERROR ===== */
132
132
 
133
- .ibis-input__help {
133
+ .ib-input__help {
134
134
  font-family: var(--font-family-sans);
135
135
  font-size: var(--font-size-body-sm);
136
136
  color: var(--color-text-muted);
137
137
  }
138
138
 
139
- .ibis-input__error {
139
+ .ib-input__error {
140
140
  font-family: var(--font-family-sans);
141
141
  font-size: var(--font-size-body-sm);
142
142
  color: var(--color-status-error);
@@ -144,35 +144,35 @@
144
144
 
145
145
  /* ===== INVALID STATE ===== */
146
146
 
147
- .ibis-input--invalid .ibis-input__field-wrapper {
147
+ .ib-input--invalid .ib-input__field-wrapper {
148
148
  border-color: var(--color-status-error);
149
149
  }
150
150
 
151
- .ibis-input--invalid:not(.ibis-input--disabled)
152
- .ibis-input__field-wrapper:not(:focus-within):hover {
151
+ .ib-input--invalid:not(.ib-input--disabled)
152
+ .ib-input__field-wrapper:not(:focus-within):hover {
153
153
  border-color: var(--color-status-error);
154
154
  }
155
155
 
156
- .ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
156
+ .ib-input--invalid:not(.ib-input--disabled) .ib-input__field-wrapper:focus-within {
157
157
  border-color: var(--color-status-error);
158
158
  }
159
159
 
160
160
  /* ===== DISABLED STATE ===== */
161
161
 
162
- .ibis-input--disabled .ibis-input__field-wrapper {
162
+ .ib-input--disabled .ib-input__field-wrapper {
163
163
  opacity: var(--opacity-5);
164
164
  cursor: not-allowed;
165
165
  border-color: var(--border-color-disabled);
166
166
  background-color: var(--color-interactive-primary-bg-disabled);
167
167
  }
168
168
 
169
- .ibis-input--disabled .ibis-input__field {
169
+ .ib-input--disabled .ib-input__field {
170
170
  cursor: not-allowed;
171
171
  }
172
172
 
173
173
  /* ===== LOADING STATE ===== */
174
174
 
175
- .ibis-input--loading .ibis-input__field-wrapper {
175
+ .ib-input--loading .ib-input__field-wrapper {
176
176
  opacity: var(--opacity-7);
177
177
  pointer-events: none;
178
178
  }
package/dist/components/textarea.css CHANGED
@@ -1,85 +1,106 @@
1
- .ibis-input {
2
- display: flex;
3
- flex-direction: column;
4
- gap: var(--spacing-1);
5
- width: 100%;
6
- max-width: 400px;
1
+ /* TextArea component — import via @ibis-design/css/components/textarea.css */
2
+
3
+ .ib-textarea {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--spacing-1);
7
+ width: 100%;
8
+ max-width: 400px;
9
+ }
10
+
11
+ .ib-textarea__label {
12
+ font-family: var(--font-family-sans);
13
+ font-size: var(--font-size-body-md);
14
+ color: var(--color-text-secondary);
15
+ }
16
+
17
+ .ib-textarea__wrapper {
18
+ display: flex;
19
+ flex-direction: column;
20
+ border-radius: var(--border-radius-lg);
21
+ overflow: hidden;
22
+ background-color: var(--color-surface-muted);
23
+ border: var(--border-width-default) solid var(--border-color-default);
24
+ transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
25
+ }
26
+
27
+ .ib-textarea__field {
28
+ flex: 1;
29
+ width: 100%;
30
+ min-width: 0;
31
+ border: none;
32
+ outline: none;
33
+ background: transparent;
34
+ color: var(--color-text-primary);
35
+ font-family: var(--font-family-sans);
36
+ font-size: var(--font-size-body-md);
37
+ resize: vertical;
38
+ line-height: 1.4;
39
+ display: block;
40
+ box-sizing: border-box;
7
41
  }
8
42
 
9
- .ibis-input__label {
10
- font-size: var(--font-size-body-md);
11
- color: var(--color-text-secondary);
43
+ .ib-textarea__field::placeholder {
44
+ color: var(--color-text-muted);
12
45
  }
13
46
 
14
- .ibis-input__wrapper {
15
- display: flex;
16
- flex-direction: column0;
17
- border-radius: var(--border-radius-lg);
18
- overflow: hidden;
19
- background-color: var(--color-surface-muted);
20
- border: var(--border-width-default) solid var(--border-color-default);
47
+ .ib-textarea__help {
48
+ font-family: var(--font-family-sans);
49
+ font-size: var(--font-size-body-sm);
50
+ color: var(--color-text-muted);
21
51
  }
22
52
 
23
- .ibis-input__field {
24
- flex: 1;
25
- width: 100%;
26
- min-width: 0;
27
- border: none;
28
- outline: none;
29
- background: transparent;
30
- font-family: var(--font-family-sans);
31
- font-size: inherit;
32
- resize: vertical;
33
- line-height: 1.4;
34
- display: block;
35
- box-sizing: border-box;
53
+ .ib-textarea__error {
54
+ font-family: var(--font-family-sans);
55
+ font-size: var(--font-size-body-sm);
56
+ color: var(--color-status-error);
36
57
  }
37
58
 
38
- .ibis-input__help {
39
- font-size: var(--font-size-body-sm);
40
- color: var(--color-text-muted);
59
+ .ib-textarea--sm .ib-textarea__field {
60
+ padding: var(--spacing-1) var(--spacing-2);
41
61
  }
42
62
 
43
- .ibis-input__error {
44
- font-size: var(--font-size-body-sm);
45
- color: var(--color-status-error);
63
+ .ib-textarea--md .ib-textarea__field {
64
+ padding: var(--spacing-2);
46
65
  }
47
66
 
48
- .ibis-input--sm .ibis-input__field {
49
- padding: var(--spacing-1) var(--spacing-2);
67
+ .ib-textarea--lg .ib-textarea__field {
68
+ padding: var(--spacing-3) var(--spacing-4);
50
69
  }
51
70
 
52
- .ibis-input--md .ibis-input__field {
53
- padding: var(--spacing-2);
71
+ .ib-textarea:not(.ib-textarea--disabled):not(.ib-textarea--invalid)
72
+ .ib-textarea__wrapper:not(:focus-within):hover {
73
+ border-color: var(--border-color-strong);
54
74
  }
55
75
 
56
- .ibis-input--lg .ibis-input__field {
57
- padding: var(--spacing-3) var(--spacing-4);
76
+ .ib-textarea__wrapper:focus-within {
77
+ border-color: var(--border-color-focus);
58
78
  }
59
79
 
60
- .ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
61
- .ibis-input__wrapper:not(:focus-within):hover {
62
- border-color: var(--border-color-strong);
80
+ .ib-textarea--invalid .ib-textarea__wrapper {
81
+ border-color: var(--color-status-error);
82
+ border-width: var(--border-width-thin);
63
83
  }
64
84
 
65
- .ibis-input__wrapper:focus-within {
66
- border-color: var(--border-color-focus);
85
+ .ib-textarea--invalid:not(.ib-textarea--disabled):not(:focus-within) .ib-textarea__wrapper:hover {
86
+ border-width: var(--border-width-default);
67
87
  }
68
88
 
69
- .ibis-input--invalid .ibis-input__wrapper {
70
- border-color: var(--color-status-error);
71
- border-width: var(--border-width-thin);
89
+ .ib-textarea--invalid:not(.ib-textarea--disabled) .ib-textarea__wrapper:focus-within {
90
+ border-width: var(--border-width-default);
72
91
  }
73
92
 
74
- .ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within) .ibis-input__wrapper:hover {
75
- border-width: var(--border-width-default);
93
+ .ib-textarea--disabled .ib-textarea__wrapper {
94
+ background-color: var(--color-interactive-primary-bg-disabled);
95
+ opacity: 0.5;
96
+ cursor: not-allowed;
76
97
  }
77
98
 
78
- .ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:focus-within {
79
- border-width: var(--border-width-default);
99
+ .ib-textarea--disabled .ib-textarea__field {
100
+ cursor: not-allowed;
80
101
  }
81
102
 
82
- .ibis-input--disabled .ibis-input__wrapper {
83
- background-color: var(--color-interactive-primary-bg-disabled);
84
- opacity: 0.5;
103
+ .ib-textarea--loading .ib-textarea__wrapper {
104
+ opacity: var(--opacity-7);
105
+ pointer-events: none;
85
106
  }
package/dist/components/textlink.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-link {
1
+ .ib-link {
2
2
  position: relative;
3
3
  display: inline-flex;
4
4
  align-items: center;
@@ -13,79 +13,79 @@
13
13
  opacity var(--transition-duration-fast) var(--transition-timing-default);
14
14
  }
15
15
 
16
- .ibis-link__content {
16
+ .ib-link__content {
17
17
  display: inline-flex;
18
18
  align-items: center;
19
19
  gap: var(--spacing-1);
20
20
  }
21
21
 
22
- .ibis-link__content--hidden {
22
+ .ib-link__content--hidden {
23
23
  visibility: hidden;
24
24
  }
25
25
 
26
- .ibis-link--sm {
26
+ .ib-link--sm {
27
27
  font-size: var(--font-size-body-sm);
28
28
  }
29
29
 
30
- .ibis-link--md {
30
+ .ib-link--md {
31
31
  font-size: var(--font-size-body-md);
32
32
  }
33
33
 
34
- .ibis-link--lg {
34
+ .ib-link--lg {
35
35
  font-size: var(--font-size-body-lg);
36
36
  }
37
37
 
38
- .ibis-link--underline-always {
38
+ .ib-link--underline-always {
39
39
  text-decoration: underline;
40
40
  }
41
41
 
42
- .ibis-link--underline-hover:hover {
42
+ .ib-link--underline-hover:hover {
43
43
  text-decoration: underline;
44
44
  }
45
45
 
46
- .ibis-link--underline-none {
46
+ .ib-link--underline-none {
47
47
  text-decoration: none;
48
48
  }
49
49
 
50
- .ibis-link:hover {
50
+ .ib-link:hover {
51
51
  color: var(--color-interactive-primary-bg-emphasized);
52
52
  }
53
53
 
54
- .ibis-link:active {
54
+ .ib-link:active {
55
55
  color: var(--color-interactive-primary-fg);
56
56
  }
57
57
 
58
- .ibis-link:focus-visible {
58
+ .ib-link:focus-visible {
59
59
  outline: 2px solid var(--color-interactive-primary-indicator);
60
60
  outline-offset: 2px;
61
61
  }
62
62
 
63
- .ibis-link--disabled {
63
+ .ib-link--disabled {
64
64
  color: var(--color-text-muted);
65
65
  cursor: not-allowed;
66
66
  pointer-events: none;
67
67
  text-decoration: none;
68
68
  }
69
69
 
70
- .ibis-link--loading {
70
+ .ib-link--loading {
71
71
  cursor: not-allowed;
72
72
  pointer-events: none;
73
73
  }
74
74
 
75
- .ibis-link__loader {
75
+ .ib-link__loader {
76
76
  position: absolute;
77
77
  width: 1em;
78
78
  height: 1em;
79
79
  border: var(--border-width-default) solid currentColor;
80
80
  border-top-color: transparent;
81
81
  border-radius: 50%;
82
- animation: ibis-link-spin 0.8s linear infinite;
82
+ animation: ib-link-spin 0.8s linear infinite;
83
83
  top: 50%;
84
84
  left: 50%;
85
85
  transform: translate(-50%, -50%);
86
86
  }
87
87
 
88
- @keyframes ibis-link-spin {
88
+ @keyframes ib-link-spin {
89
89
  from {
90
90
  transform: translate(-50%, -50%) rotate(0deg);
91
91
  }
@@ -94,7 +94,7 @@
94
94
  }
95
95
  }
96
96
 
97
- .ibis-link--skeleton {
97
+ .ib-link--skeleton {
98
98
  position: relative;
99
99
  overflow: hidden;
100
100
  color: transparent;
@@ -102,13 +102,13 @@
102
102
  pointer-events: none;
103
103
  }
104
104
 
105
- .ibis-link__content--skeleton {
105
+ .ib-link__content--skeleton {
106
106
  position: relative;
107
107
  color: transparent;
108
108
  overflow: hidden;
109
109
  }
110
110
 
111
- .ibis-link__content--skeleton::after {
111
+ .ib-link__content--skeleton::after {
112
112
  content: "";
113
113
  position: absolute;
114
114
  inset: 0;
@@ -116,17 +116,17 @@
116
116
  z-index: 1;
117
117
  }
118
118
 
119
- .ibis-link__content--skeleton::before {
119
+ .ib-link__content--skeleton::before {
120
120
  content: "";
121
121
  position: absolute;
122
122
  inset: 0;
123
123
  background: var(--gradient-skeleton);
124
124
  transform: translateX(-100%);
125
- animation: ibis-shimmer 2s infinite;
125
+ animation: ib-shimmer 2s infinite;
126
126
  z-index: 2;
127
127
  }
128
128
 
129
- .ibis-link__icon {
129
+ .ib-link__icon {
130
130
  display: inline-flex;
131
131
  align-items: center;
132
132
  justify-content: center;
@@ -135,7 +135,7 @@
135
135
  height: 0.75em;
136
136
  }
137
137
 
138
- .ibis-link__icon :global(svg) {
138
+ .ib-link__icon :global(svg) {
139
139
  width: 100%;
140
140
  height: 100%;
141
141
  }
package/dist/components/tipIndicator.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-tip-indicator {
1
+ .ib-tip-indicator {
2
2
  position: relative;
3
3
  display: inline-flex;
4
4
  align-items: center;
@@ -9,18 +9,18 @@
9
9
  outline: none;
10
10
  }
11
11
 
12
- .ibis-tip-indicator:hover,
13
- .ibis-tip-indicator:focus-visible {
12
+ .ib-tip-indicator:hover,
13
+ .ib-tip-indicator:focus-visible {
14
14
  color: var(--color-brand-primary);
15
15
  }
16
16
 
17
- .ibis-tip-indicator__icon {
17
+ .ib-tip-indicator__icon {
18
18
  width: 1em;
19
19
  height: 1em;
20
20
  display: block;
21
21
  }
22
22
 
23
- .ibis-tip {
23
+ .ib-tip {
24
24
  position: absolute;
25
25
  z-index: 100;
26
26
  background-color: var(--color-surface-inverse);
@@ -33,40 +33,40 @@
33
33
  white-space: nowrap;
34
34
  }
35
35
 
36
- .ibis-tip--width-auto {
36
+ .ib-tip--width-auto {
37
37
  white-space: nowrap;
38
38
  width: auto;
39
39
  }
40
40
 
41
- .ibis-tip--width-240 {
41
+ .ib-tip--width-240 {
42
42
  width: 240px;
43
43
  white-space: normal;
44
44
  }
45
45
 
46
- .ibis-tip--width-360 {
46
+ .ib-tip--width-360 {
47
47
  width: 360px;
48
48
  white-space: normal;
49
49
  }
50
50
 
51
- .ibis-tip--top {
51
+ .ib-tip--top {
52
52
  bottom: calc(100% + 8px);
53
53
  left: 50%;
54
54
  transform: translateX(-50%);
55
55
  }
56
56
 
57
- .ibis-tip--bottom {
57
+ .ib-tip--bottom {
58
58
  top: calc(100% + 8px);
59
59
  left: 50%;
60
60
  transform: translateX(-50%);
61
61
  }
62
62
 
63
- .ibis-tip--left {
63
+ .ib-tip--left {
64
64
  right: calc(100% + 8px);
65
65
  top: 50%;
66
66
  transform: translateY(-50%);
67
67
  }
68
68
 
69
- .ibis-tip--right {
69
+ .ib-tip--right {
70
70
  left: calc(100% + 8px);
71
71
  top: 50%;
72
72
  transform: translateY(-50%);