@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/banner.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-banner {
1
+ .ib-banner {
2
2
  font-family: var(--font-family-sans);
3
3
  display: flex;
4
4
  align-items: flex-start;
@@ -13,7 +13,7 @@
13
13
  margin-bottom: 2px;
14
14
  }
15
15
 
16
- .ibis-banner__icon {
16
+ .ib-banner__icon {
17
17
  display: flex;
18
18
  align-items: center;
19
19
  justify-content: center;
@@ -29,44 +29,44 @@
29
29
  color: var(--color-text-on-primary);
30
30
  }
31
31
 
32
- .ibis-banner__icon :global(svg) {
32
+ .ib-banner__icon :global(svg) {
33
33
  width: 100%;
34
34
  height: 100%;
35
35
  }
36
36
 
37
- .ibis-banner__content {
37
+ .ib-banner__content {
38
38
  flex: 1;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  gap: var(--spacing-1);
42
42
  }
43
43
 
44
- .ibis-banner__title {
44
+ .ib-banner__title {
45
45
  font-weight: var(--font-weight-medium);
46
46
  font-size: var(--font-size-body-sm);
47
47
  }
48
48
 
49
- .ibis-banner__message {
49
+ .ib-banner__message {
50
50
  font-size: var(--font-size-body-sm);
51
51
  color: var(--color-text-on-primary);
52
52
  }
53
53
 
54
- .ibis-banner--default .ibis-banner__message {
54
+ .ib-banner--default .ib-banner__message {
55
55
  font-size: var(--font-size-body-sm);
56
56
  color: var(--color-interactive-primary-indicator);
57
57
  }
58
58
 
59
- .ibis-banner--success .ibis-banner__message {
59
+ .ib-banner--success .ib-banner__message {
60
60
  font-size: var(--font-size-body-sm);
61
61
  color: var(--color-status-success);
62
62
  }
63
63
 
64
- .ibis-banner--error .ibis-banner__message {
64
+ .ib-banner--error .ib-banner__message {
65
65
  font-size: var(--font-size-body-sm);
66
66
  color: var(--color-status-error);
67
67
  }
68
68
 
69
- .ibis-banner__close {
69
+ .ib-banner__close {
70
70
  background: transparent;
71
71
  border: none;
72
72
  cursor: pointer;
@@ -76,43 +76,43 @@
76
76
  flex-shrink: 0;
77
77
  }
78
78
 
79
- .ibis-banner--success {
79
+ .ib-banner--success {
80
80
  border-color: color-mix(in srgb, var(--color-status-success) var(--opacity-1));
81
81
  background-color: color-mix(in srgb, var(--color-status-success) var(--opacity-1));
82
82
  }
83
83
 
84
- .ibis-banner--success .ibis-banner__title {
84
+ .ib-banner--success .ib-banner__title {
85
85
  color: var(--color-status-success);
86
86
  }
87
87
 
88
- .ibis-banner--success .ibis-banner__icon {
88
+ .ib-banner--success .ib-banner__icon {
89
89
  color: var(--color-status-success);
90
90
  }
91
91
 
92
- .ibis-banner--success .ibis-banner__close {
92
+ .ib-banner--success .ib-banner__close {
93
93
  color: var(--color-status-success);
94
94
  border-color: var(--color-status-success);
95
95
  }
96
96
 
97
- .ibis-banner--error {
97
+ .ib-banner--error {
98
98
  border-color: color-mix(in srgb, var(--color-status-error) var(--opacity-1));
99
99
  background-color: color-mix(in srgb, var(--color-status-error) var(--opacity-1));
100
100
  }
101
101
 
102
- .ibis-banner--error .ibis-banner__title {
102
+ .ib-banner--error .ib-banner__title {
103
103
  color: var(--color-status-error);
104
104
  }
105
105
 
106
- .ibis-banner--error .ibis-banner__icon {
106
+ .ib-banner--error .ib-banner__icon {
107
107
  color: var(--color-status-error);
108
108
  }
109
109
 
110
- .ibis-banner--error .ibis-banner__close {
110
+ .ib-banner--error .ib-banner__close {
111
111
  color: var(--color-status-error);
112
112
  border-color: var(--color-status-error);
113
113
  }
114
114
 
115
- .ibis-banner--default {
115
+ .ib-banner--default {
116
116
  border-color: color-mix(in srgb, var(--color-interactive-primary-bg-emphasized) var(--opacity-1));
117
117
  background-color: color-mix(
118
118
  in srgb,
@@ -120,20 +120,20 @@
120
120
  );
121
121
  }
122
122
 
123
- .ibis-banner--default .ibis-banner__title {
123
+ .ib-banner--default .ib-banner__title {
124
124
  color: var(--color-interactive-primary-indicator);
125
125
  }
126
126
 
127
- .ibis-banner--default .ibis-banner__icon {
127
+ .ib-banner--default .ib-banner__icon {
128
128
  color: var(--color-interactive-primary-indicator);
129
129
  }
130
130
 
131
- .ibis-banner--default .ibis-banner__close {
131
+ .ib-banner--default .ib-banner__close {
132
132
  color: var(--color-interactive-primary-indicator);
133
133
  border-color: var(--color-interactive-primary-indicator);
134
134
  }
135
135
 
136
- .ibis-banner__loader {
136
+ .ib-banner__loader {
137
137
  width: 1em;
138
138
  height: 1em;
139
139
 
@@ -141,10 +141,10 @@
141
141
  border-top-color: var(--color-interactive-primary-indicator);
142
142
  border-radius: 50%;
143
143
 
144
- animation: ibis-banner-spin 0.8s linear infinite;
144
+ animation: ib-banner-spin 0.8s linear infinite;
145
145
  }
146
146
 
147
- @keyframes ibis-banner-spin {
147
+ @keyframes ib-banner-spin {
148
148
  from {
149
149
  transform: rotate(0deg);
150
150
  }
package/dist/components/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Shared button styles — import via @ibis-design/css/components/button.css */
2
2
 
3
- .ibis-button {
3
+ .ib-button {
4
4
  font-family: var(--font-family-sans);
5
5
  font-weight: var(--font-weight-normal);
6
6
  border: var(--border-width-default) solid transparent;
@@ -14,7 +14,7 @@
14
14
  justify-content: center;
15
15
  }
16
16
 
17
- .ibis-button :global(svg) {
17
+ .ib-button :global(svg) {
18
18
  width: 1em;
19
19
  height: 1em;
20
20
  display: inline-block;
@@ -22,107 +22,107 @@
22
22
  gap: var(--spacing-1);
23
23
  }
24
24
 
25
- .ibis-button__content {
25
+ .ib-button__content {
26
26
  display: inline-flex;
27
27
  align-items: center;
28
28
  justify-content: center;
29
29
  gap: var(--spacing-1);
30
30
  }
31
31
 
32
- .ibis-button__content--hidden {
32
+ .ib-button__content--hidden {
33
33
  visibility: hidden;
34
34
  }
35
35
 
36
- .ibis-button--sm {
36
+ .ib-button--sm {
37
37
  padding: var(--spacing-1) var(--spacing-2);
38
38
  font-size: var(--font-size-body-sm);
39
39
  border-radius: var(--border-radius-sm);
40
40
  }
41
41
 
42
- .ibis-button--md {
42
+ .ib-button--md {
43
43
  padding: var(--spacing-2) var(--spacing-4);
44
44
  font-size: var(--font-size-body-md);
45
45
  border-radius: var(--border-radius-md);
46
46
  }
47
47
 
48
- .ibis-button--lg {
48
+ .ib-button--lg {
49
49
  padding: var(--spacing-3) var(--spacing-6);
50
50
  font-size: var(--font-size-body-lg);
51
51
  border-radius: var(--border-radius-lg);
52
52
  }
53
53
 
54
- .ibis-button--primary {
54
+ .ib-button--primary {
55
55
  background: var(--gradient-button);
56
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
  }
60
60
 
61
- .ibis-button--primary:not(:disabled):hover,
62
- .ibis-button--primary:not(:disabled):active {
61
+ .ib-button--primary:not(:disabled):hover,
62
+ .ib-button--primary:not(:disabled):active {
63
63
  box-shadow: none;
64
64
  }
65
65
 
66
- .ibis-button--primary:not(:disabled):hover {
66
+ .ib-button--primary:not(:disabled):hover {
67
67
  background: var(--color-interactive-primary-bg-emphasized);
68
68
  border-width: var(--border-width-hairline);
69
69
  }
70
70
 
71
- .ibis-button--primary:not(:disabled):active {
71
+ .ib-button--primary:not(:disabled):active {
72
72
  background: var(--color-interactive-primary-bg-emphasized);
73
73
  border-color: var(--border-color-focus);
74
74
  border-width: var(--border-width-thin);
75
75
  }
76
76
 
77
- .ibis-button--primary:disabled {
77
+ .ib-button--primary:disabled {
78
78
  background: var(--color-interactive-primary-bg-disabled);
79
79
  color: var(--color-interactive-primary-fg-on-disabled);
80
80
  border-color: var(--color-interactive-primary-fg-on-disabled);
81
81
  }
82
82
 
83
- .ibis-button--secondary {
83
+ .ib-button--secondary {
84
84
  background-color: transparent;
85
85
  color: var(--color-brand-secondary);
86
86
  border-color: var(--color-brand-secondary);
87
87
  }
88
88
 
89
- .ibis-button--secondary:not(:disabled):hover {
89
+ .ib-button--secondary:not(:disabled):hover {
90
90
  background-color: var(--color-surface-subtle);
91
91
  }
92
92
 
93
- .ibis-button--icon-only {
93
+ .ib-button--icon-only {
94
94
  padding: var(--spacing-2);
95
95
  }
96
96
 
97
- .ibis-button--icon-only .ibis-button__content {
97
+ .ib-button--icon-only .ib-button__content {
98
98
  gap: 0;
99
99
  }
100
100
 
101
- .ibis-button:disabled {
101
+ .ib-button:disabled {
102
102
  opacity: var(--opacity-disabled);
103
103
  cursor: not-allowed;
104
104
  }
105
105
 
106
- .ibis-button--loading {
106
+ .ib-button--loading {
107
107
  position: relative;
108
108
  cursor: not-allowed;
109
109
  pointer-events: none;
110
110
  }
111
111
 
112
- .ibis-button__loader {
112
+ .ib-button__loader {
113
113
  position: absolute;
114
114
  width: 1em;
115
115
  height: 1em;
116
116
  border: var(--border-width-default) solid var(--color-text-primary);
117
117
  border-top-color: var(--color-text-on-primary);
118
118
  border-radius: 50%;
119
- animation: ibis-button-spin 0.8s linear infinite;
119
+ animation: ib-button-spin 0.8s linear infinite;
120
120
  top: 50%;
121
121
  left: 50%;
122
122
  transform: translate(-50%, -50%);
123
123
  }
124
124
 
125
- .ibis-button--skeleton {
125
+ .ib-button--skeleton {
126
126
  position: relative;
127
127
  overflow: hidden;
128
128
  background: var(--color-surface-muted);
@@ -132,7 +132,7 @@
132
132
  pointer-events: none;
133
133
  }
134
134
 
135
- .ibis-button--skeleton::after {
135
+ .ib-button--skeleton::after {
136
136
  content: "";
137
137
  position: absolute;
138
138
  top: 50%;
@@ -143,23 +143,23 @@
143
143
  background-color: var(--color-text-disabled);
144
144
  }
145
145
 
146
- .ibis-button--icon-only--skeleton::after {
146
+ .ib-button--icon-only--skeleton::after {
147
147
  width: 1em;
148
148
  height: 1em;
149
149
  border-radius: var(--border-radius-xs);
150
150
  }
151
151
 
152
- .ibis-button--skeleton::before {
152
+ .ib-button--skeleton::before {
153
153
  content: "";
154
154
  position: absolute;
155
155
  inset: 0;
156
156
  background: var(--gradient-skeleton);
157
157
  transform: translateX(-100%);
158
- animation: ibis-shimmer 2s infinite;
158
+ animation: ib-shimmer 2s infinite;
159
159
  border-radius: inherit;
160
160
  }
161
161
 
162
- @keyframes ibis-button-spin {
162
+ @keyframes ib-button-spin {
163
163
  from {
164
164
  transform: translate(-50%, -50%) rotate(0deg);
165
165
  }
@@ -168,7 +168,7 @@
168
168
  }
169
169
  }
170
170
 
171
- @keyframes ibis-shimmer {
171
+ @keyframes ib-shimmer {
172
172
  0% {
173
173
  transform: translateX(-100%);
174
174
  }
package/dist/components/card.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Card component — import via @ibis-design/css/components/card.css */
2
2
 
3
- .ibis-card {
3
+ .ib-card {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  background-color: var(--color-surface-default);
@@ -12,14 +12,14 @@
12
12
  min-height: 200px;
13
13
  }
14
14
 
15
- .ibis-card__header {
15
+ .ib-card__header {
16
16
  display: flex;
17
17
  flex-direction: column;
18
18
  gap: var(--spacing-1);
19
19
  padding: var(--spacing-4) var(--spacing-4) 0;
20
20
  }
21
21
 
22
- .ibis-card__title {
22
+ .ib-card__title {
23
23
  font-family: var(--font-family-heading);
24
24
  font-size: var(--font-size-heading-h5);
25
25
  font-weight: var(--font-weight-semibold);
@@ -27,14 +27,14 @@
27
27
  margin: 0;
28
28
  }
29
29
 
30
- .ibis-card__subtitle {
30
+ .ib-card__subtitle {
31
31
  font-family: var(--font-family-sans);
32
32
  font-size: var(--font-size-body-sm);
33
33
  color: var(--color-text-muted);
34
34
  margin: 0;
35
35
  }
36
36
 
37
- .ibis-card__body {
37
+ .ib-card__body {
38
38
  flex: 1;
39
39
  padding: var(--spacing-4);
40
40
  font-family: var(--font-family-sans);
@@ -43,7 +43,7 @@
43
43
  line-height: var(--line-height-normal);
44
44
  }
45
45
 
46
- .ibis-card__footer {
46
+ .ib-card__footer {
47
47
  display: flex;
48
48
  flex-direction: row;
49
49
  align-items: center;
@@ -57,30 +57,30 @@
57
57
 
58
58
  /* ===== SIZE VARIANTS ===== */
59
59
 
60
- .ibis-card--sm {
60
+ .ib-card--sm {
61
61
  min-height: 120px;
62
62
  }
63
63
 
64
- .ibis-card--md {
64
+ .ib-card--md {
65
65
  min-height: 200px;
66
66
  }
67
67
 
68
- .ibis-card--md-wide {
68
+ .ib-card--md-wide {
69
69
  min-height: 200px;
70
70
  }
71
71
 
72
- .ibis-card--lg {
72
+ .ib-card--lg {
73
73
  min-height: 320px;
74
74
  }
75
75
 
76
- .ibis-card--lg-wide {
76
+ .ib-card--lg-wide {
77
77
  min-height: 320px;
78
78
  }
79
79
 
80
- .ibis-card--ex-wide {
80
+ .ib-card--ex-wide {
81
81
  min-height: 200px;
82
82
  }
83
83
 
84
- .ibis-card--full {
84
+ .ib-card--full {
85
85
  min-height: 400px;
86
86
  }
package/dist/components/cardLayout.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Card Layout — import via @ibis-design/css/components/cardLayout.css */
2
2
 
3
- .ibis-card-layout {
3
+ .ib-card-layout {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  gap: var(--spacing-4);
@@ -8,7 +8,7 @@
8
8
  box-sizing: border-box;
9
9
  }
10
10
 
11
- .ibis-card-layout__header {
11
+ .ib-card-layout__header {
12
12
  display: flex;
13
13
  flex-direction: row;
14
14
  align-items: flex-start;
@@ -16,13 +16,13 @@
16
16
  gap: var(--spacing-4);
17
17
  }
18
18
 
19
- .ibis-card-layout__header-text {
19
+ .ib-card-layout__header-text {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
  gap: var(--spacing-1);
23
23
  }
24
24
 
25
- .ibis-card-layout__title {
25
+ .ib-card-layout__title {
26
26
  font-family: var(--font-family-heading);
27
27
  font-size: var(--font-size-heading-h4);
28
28
  font-weight: var(--font-weight-bold);
@@ -30,21 +30,21 @@
30
30
  margin: 0;
31
31
  }
32
32
 
33
- .ibis-card-layout__subtitle {
33
+ .ib-card-layout__subtitle {
34
34
  font-family: var(--font-family-sans);
35
35
  font-size: var(--font-size-body-sm);
36
36
  color: var(--color-text-muted);
37
37
  margin: 0;
38
38
  }
39
39
 
40
- .ibis-card-layout__header-action {
40
+ .ib-card-layout__header-action {
41
41
  display: flex;
42
42
  align-items: center;
43
43
  flex-shrink: 0;
44
44
  }
45
45
 
46
46
  /* Default — 1 column (mobile) */
47
- .ibis-card-layout__grid {
47
+ .ib-card-layout__grid {
48
48
  display: grid;
49
49
  gap: var(--spacing-4);
50
50
  grid-template-columns: 1fr;
@@ -52,42 +52,42 @@
52
52
 
53
53
  /* sm (640px) — 2 columns (tablet) */
54
54
  @media (min-width: 640px) {
55
- .ibis-card-layout__grid {
55
+ .ib-card-layout__grid {
56
56
  grid-template-columns: repeat(2, 1fr);
57
57
  }
58
58
  }
59
59
 
60
60
  /* lg (1024px) — 4 columns (desktop), card size props apply */
61
61
  @media (min-width: 1024px) {
62
- .ibis-card-layout__grid {
62
+ .ib-card-layout__grid {
63
63
  grid-template-columns: repeat(4, 1fr);
64
64
  }
65
65
 
66
- .ibis-card-layout__grid .ibis-card--sm {
66
+ .ib-card-layout__grid .ib-card--sm {
67
67
  grid-column: span 1;
68
68
  }
69
69
 
70
- .ibis-card-layout__grid .ibis-card--md {
70
+ .ib-card-layout__grid .ib-card--md {
71
71
  grid-column: span 2;
72
72
  }
73
73
 
74
- .ibis-card-layout__grid .ibis-card--md-wide {
74
+ .ib-card-layout__grid .ib-card--md-wide {
75
75
  grid-column: span 3;
76
76
  }
77
77
 
78
- .ibis-card-layout__grid .ibis-card--lg {
78
+ .ib-card-layout__grid .ib-card--lg {
79
79
  grid-column: span 2;
80
80
  }
81
81
 
82
- .ibis-card-layout__grid .ibis-card--lg-wide {
82
+ .ib-card-layout__grid .ib-card--lg-wide {
83
83
  grid-column: span 3;
84
84
  }
85
85
 
86
- .ibis-card-layout__grid .ibis-card--ex-wide {
86
+ .ib-card-layout__grid .ib-card--ex-wide {
87
87
  grid-column: span 4;
88
88
  }
89
89
 
90
- .ibis-card-layout__grid .ibis-card--full {
90
+ .ib-card-layout__grid .ib-card--full {
91
91
  grid-column: span 4;
92
92
  }
93
93
  }
package/dist/components/checkbox.css CHANGED
@@ -1,30 +1,30 @@
1
- .ibis-checkbox {
1
+ .ib-checkbox {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--spacing-1);
5
5
  }
6
6
 
7
- .ibis-checkbox__label-wrapper {
7
+ .ib-checkbox__label-wrapper {
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  gap: var(--spacing-1);
11
11
  }
12
12
 
13
- .ibis-checkbox__label {
13
+ .ib-checkbox__label {
14
14
  font-size: var(--font-size-body-md);
15
15
  color: var(--color-text-secondary);
16
16
  }
17
17
 
18
- .ibis-checkbox__description {
18
+ .ib-checkbox__description {
19
19
  font-size: var(--font-size-body-sm);
20
20
  color: var(--color-text-muted);
21
21
  }
22
22
 
23
- .ibis-checkbox__wrapper {
23
+ .ib-checkbox__wrapper {
24
24
  display: flex;
25
25
  }
26
26
 
27
- .ibis-checkbox__control {
27
+ .ib-checkbox__control {
28
28
  display: inline-flex;
29
29
  align-items: center;
30
30
  gap: var(--spacing-2);
@@ -32,11 +32,11 @@
32
32
  user-select: none;
33
33
  }
34
34
 
35
- .ibis-checkbox__input {
35
+ .ib-checkbox__input {
36
36
  display: none;
37
37
  }
38
38
 
39
- .ibis-checkbox__box {
39
+ .ib-checkbox__box {
40
40
  width: 18px;
41
41
  height: 18px;
42
42
  border: var(--border-width-default) solid var(--border-color-strong);
@@ -51,71 +51,71 @@
51
51
  background var(--transition-duration-normal) var(--transition-timing-default);
52
52
  }
53
53
 
54
- .ibis-checkbox__icon {
54
+ .ib-checkbox__icon {
55
55
  display: none;
56
56
  color: var(--color-interactive-primary-indicator);
57
57
  width: 12px;
58
58
  height: 12px;
59
59
  }
60
60
 
61
- .ibis-checkbox__checkmark {
61
+ .ib-checkbox__checkmark {
62
62
  width: 100%;
63
63
  height: 100%;
64
64
  }
65
65
 
66
- .ibis-checkbox__control:hover .ibis-checkbox__input:not(:checked) + .ibis-checkbox__box {
66
+ .ib-checkbox__control:hover .ib-checkbox__input:not(:checked) + .ib-checkbox__box {
67
67
  border-color: var(--color-text-secondary);
68
68
  box-shadow: var(--shadow-focus-default);
69
69
  }
70
70
 
71
- .ibis-checkbox__input:checked + .ibis-checkbox__box {
71
+ .ib-checkbox__input:checked + .ib-checkbox__box {
72
72
  background: var(--color-interactive-primary-bg-selected);
73
73
  border-color: var(--color-interactive-primary-border-selected);
74
74
  }
75
75
 
76
- .ibis-checkbox__input:checked + .ibis-checkbox__box .ibis-checkbox__icon {
76
+ .ib-checkbox__input:checked + .ib-checkbox__box .ib-checkbox__icon {
77
77
  display: flex;
78
78
  align-items: center;
79
79
  justify-content: center;
80
80
  }
81
81
 
82
- .ibis-checkbox__control:hover .ibis-checkbox__input:checked + .ibis-checkbox__box {
82
+ .ib-checkbox__control:hover .ib-checkbox__input:checked + .ib-checkbox__box {
83
83
  box-shadow: var(--shadow-focus-primary);
84
84
  }
85
85
 
86
- .ibis-checkbox__text {
86
+ .ib-checkbox__text {
87
87
  font-size: var(--font-size-body-md);
88
88
  color: var(--color-text-primary);
89
89
  }
90
90
 
91
- .ibis-checkbox__help {
91
+ .ib-checkbox__help {
92
92
  font-size: var(--font-size-body-sm);
93
93
  color: var(--color-text-muted);
94
94
  }
95
95
 
96
- .ibis-checkbox__error {
96
+ .ib-checkbox__error {
97
97
  font-size: var(--font-size-body-sm);
98
98
  color: var(--color-status-error);
99
99
  }
100
100
 
101
- .ibis-checkbox--disabled {
101
+ .ib-checkbox--disabled {
102
102
  opacity: var(--opacity-5);
103
103
  cursor: not-allowed;
104
104
  }
105
105
 
106
- .ibis-checkbox--invalid .ibis-checkbox__box {
106
+ .ib-checkbox--invalid .ib-checkbox__box {
107
107
  border-color: var(--color-status-error);
108
108
  }
109
109
 
110
- .ibis-checkbox--invalid .ibis-checkbox__text {
110
+ .ib-checkbox--invalid .ib-checkbox__text {
111
111
  font-size: var(--font-size-body-md);
112
112
  color: var(--color-status-error);
113
113
  }
114
114
 
115
- .ibis-checkbox--invalid
116
- .ibis-checkbox__control:hover
117
- .ibis-checkbox__input:not(:checked)
118
- + .ibis-checkbox__box {
115
+ .ib-checkbox--invalid
116
+ .ib-checkbox__control:hover
117
+ .ib-checkbox__input:not(:checked)
118
+ + .ib-checkbox__box {
119
119
  box-shadow: var(--shadow-focus-error);
120
120
  border-color: var(--color-status-error);
121
121
  }