@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/chips.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-chips {
1
+ .ib-chips {
2
2
  font-family: var(--font-family-sans);
3
3
  font-weight: var(--font-weight-normal);
4
4
  border-radius: var(--border-radius-sm);
@@ -9,24 +9,24 @@
9
9
  cursor: pointer;
10
10
  }
11
11
 
12
- .ibis-chips__content {
12
+ .ib-chips__content {
13
13
  display: inline-flex;
14
14
  align-items: center;
15
15
  justify-content: center;
16
16
  gap: var(--spacing-2);
17
17
  }
18
18
 
19
- .ibis-chips__icon {
19
+ .ib-chips__icon {
20
20
  display: inline-flex;
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  }
24
24
 
25
- .ibis-chips__label {
25
+ .ib-chips__label {
26
26
  display: inline-flex;
27
27
  }
28
28
 
29
- .ibis-chips :global(svg) {
29
+ .ib-chips :global(svg) {
30
30
  width: 1rem;
31
31
  height: 1rem;
32
32
  display: inline-block;
@@ -34,43 +34,43 @@
34
34
  gap: var(--spacing-2);
35
35
  }
36
36
 
37
- .ibis-chips--sm {
37
+ .ib-chips--sm {
38
38
  font-size: var(--font-size-body-sm);
39
39
  }
40
40
 
41
- .ibis-chips--md {
41
+ .ib-chips--md {
42
42
  font-size: var(--font-size-body-md);
43
43
  }
44
44
 
45
- .ibis-chips--lg {
45
+ .ib-chips--lg {
46
46
  font-size: var(--font-size-body-lg);
47
47
  }
48
48
 
49
- .ibis-chips--skeleton {
49
+ .ib-chips--skeleton {
50
50
  background-color: var(--color-surface-muted);
51
51
  color: transparent;
52
52
  pointer-events: none;
53
53
  }
54
54
 
55
- .ibis-chips__content--hidden {
55
+ .ib-chips__content--hidden {
56
56
  visibility: hidden;
57
57
  }
58
58
 
59
- .ibis-chips:disabled {
59
+ .ib-chips:disabled {
60
60
  opacity: var(--opacity-disabled);
61
61
  cursor: not-allowed;
62
62
  }
63
63
 
64
- .ibis-chips:not(:disabled):hover {
64
+ .ib-chips:not(:disabled):hover {
65
65
  background-color: var(--color-interactive-neutral-bg-hover);
66
66
  }
67
67
 
68
- .ibis-chips--selected {
68
+ .ib-chips--selected {
69
69
  background-color: var(--color-interactive-primary-bg-selected);
70
70
  color: var(--color-interactive-primary-indicator);
71
71
  border-color: var(--color-interactive-primary-border-selected);
72
72
  }
73
73
 
74
- .ibis-chips--selected:not(:disabled):hover {
74
+ .ib-chips--selected:not(:disabled):hover {
75
75
  background-color: var(--color-interactive-primary-bg-hover);
76
76
  }
package/dist/components/dropdown.css CHANGED
@@ -1,10 +1,10 @@
1
- .ibis-dropdown {
1
+ .ib-dropdown {
2
2
  position: relative;
3
3
  display: inline-block;
4
4
  width: fit-content;
5
5
  }
6
6
 
7
- .ibis-dropdown__trigger {
7
+ .ib-dropdown__trigger {
8
8
  all: unset;
9
9
  display: block;
10
10
  width: 100%;
@@ -14,38 +14,38 @@
14
14
  }
15
15
 
16
16
  /* Hide TextInput's label, help, and error inside the trigger */
17
- .ibis-dropdown__trigger .ibis-input__label-wrapper {
17
+ .ib-dropdown__trigger .ib-input__label-wrapper {
18
18
  display: none;
19
19
  }
20
20
 
21
- .ibis-dropdown__trigger .ibis-input__help,
22
- .ibis-dropdown__trigger .ibis-input__error {
21
+ .ib-dropdown__trigger .ib-input__help,
22
+ .ib-dropdown__trigger .ib-input__error {
23
23
  display: none;
24
24
  }
25
25
 
26
- .ibis-dropdown__trigger .ibis-input {
26
+ .ib-dropdown__trigger .ib-input {
27
27
  gap: var(--spacing-0);
28
28
  }
29
29
 
30
30
  /* Prevent TextInput's field from capturing pointer/focus events */
31
- .ibis-dropdown__trigger .ibis-input__field {
31
+ .ib-dropdown__trigger .ib-input__field {
32
32
  pointer-events: none;
33
33
  }
34
34
 
35
35
  /* Suppress TextInput's own hover/focus border changes inside the trigger */
36
- .ibis-dropdown__trigger
37
- .ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
38
- .ibis-input__field-wrapper:not(:focus-within):hover {
36
+ .ib-dropdown__trigger
37
+ .ib-input:not(.ib-input--disabled):not(.ib-input--invalid)
38
+ .ib-input__field-wrapper:not(:focus-within):hover {
39
39
  border-color: var(--border-color-default);
40
40
  }
41
41
 
42
- .ibis-dropdown__trigger .ibis-input__field-wrapper:focus-within {
42
+ .ib-dropdown__trigger .ib-input__field-wrapper:focus-within {
43
43
  border-color: var(--border-color-default);
44
44
  box-shadow: none;
45
45
  }
46
46
 
47
47
  /* Default field wrapper radius */
48
- .ibis-dropdown__trigger .ibis-input__field-wrapper {
48
+ .ib-dropdown__trigger .ib-input__field-wrapper {
49
49
  border-radius: var(--border-radius-lg);
50
50
  padding: var(--spacing-1) var(--spacing-2);
51
51
  transition:
@@ -54,14 +54,14 @@
54
54
  }
55
55
 
56
56
  /* Remove bottom radius and border when open so it connects to the menu */
57
- .ibis-dropdown--open .ibis-dropdown__trigger .ibis-input__field-wrapper {
57
+ .ib-dropdown--open .ib-dropdown__trigger .ib-input__field-wrapper {
58
58
  border-bottom-left-radius: 0;
59
59
  border-bottom-right-radius: 0;
60
60
  border-bottom-color: transparent;
61
61
  }
62
62
 
63
63
  /* Menu */
64
- .ibis-dropdown__menu {
64
+ .ib-dropdown__menu {
65
65
  position: absolute;
66
66
  width: 100%;
67
67
  background-color: var(--color-surface-default);
@@ -76,12 +76,12 @@
76
76
  }
77
77
 
78
78
  /* Dividers between items */
79
- .ibis-dropdown__menu li + li {
79
+ .ib-dropdown__menu li + li {
80
80
  border-top: 1px solid var(--color-interactive-neutral-bg-hover);
81
81
  }
82
82
 
83
83
  /* Menu items */
84
- .ibis-dropdown__item {
84
+ .ib-dropdown__item {
85
85
  all: unset;
86
86
  display: flex;
87
87
  align-items: center;
@@ -98,29 +98,29 @@
98
98
  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
99
99
  }
100
100
 
101
- .ibis-dropdown__item:hover {
101
+ .ib-dropdown__item:hover {
102
102
  background-color: var(--color-interactive-primary-bg-menu-hover);
103
103
  color: var(--color-white);
104
104
  }
105
105
 
106
- li[aria-selected="true"] .ibis-dropdown__item {
106
+ li[aria-selected="true"] .ib-dropdown__item {
107
107
  background-color: var(--color-interactive-primary-bg-menu-selected);
108
108
  color: var(--color-white);
109
109
  font-weight: var(--font-weight-bold);
110
110
  }
111
111
 
112
- li[aria-selected="true"] .ibis-dropdown__item:hover {
112
+ li[aria-selected="true"] .ib-dropdown__item:hover {
113
113
  background-color: var(--color-interactive-primary-bg-menu-selected-hover);
114
114
  color: var(--color-white);
115
115
  }
116
116
 
117
- .ibis-dropdown__item:focus {
117
+ .ib-dropdown__item:focus {
118
118
  outline: none;
119
119
  background-color: var(--color-interactive-neutral-bg-hover);
120
120
  }
121
121
 
122
122
  /* Disabled */
123
- .ibis-dropdown__trigger:disabled {
123
+ .ib-dropdown__trigger:disabled {
124
124
  cursor: not-allowed;
125
125
  opacity: var(--opacity-5);
126
126
  }
package/dist/components/dropdownButton.css CHANGED
@@ -1,32 +1,32 @@
1
- .ibis-dropdown-button {
1
+ .ib-dropdown-button {
2
2
  position: relative;
3
3
  display: inline-block;
4
4
  }
5
5
 
6
- .ibis-dropdown-button .ibis-button {
6
+ .ib-dropdown-button .ib-button {
7
7
  white-space: nowrap;
8
8
  }
9
9
 
10
- .ibis-dropdown-button--open .ibis-button {
10
+ .ib-dropdown-button--open .ib-button {
11
11
  border-bottom-left-radius: 0;
12
12
  border-bottom-right-radius: 0;
13
13
  transition: border-radius var(--transition-duration-fast) var(--transition-timing-default);
14
14
  }
15
15
 
16
16
  /* Caret icon */
17
- .ibis-caret {
17
+ .ib-caret {
18
18
  margin-left: 0.25em;
19
19
  width: 1em;
20
20
  height: 1em;
21
21
  transition: transform var(--transition-duration-fast) var(--transition-timing-default);
22
22
  }
23
23
 
24
- .ibis-caret--open {
24
+ .ib-caret--open {
25
25
  transform: rotate(180deg);
26
26
  }
27
27
 
28
28
  /* Menu */
29
- .ibis-dropdown-menu {
29
+ .ib-dropdown-menu {
30
30
  position: absolute;
31
31
  top: 100%;
32
32
  left: 0;
@@ -45,12 +45,12 @@
45
45
  }
46
46
 
47
47
  /* Dividers between items */
48
- .ibis-dropdown-menu li + li {
48
+ .ib-dropdown-menu li + li {
49
49
  border-top: 1px solid var(--color-interactive-neutral-bg-hover);
50
50
  }
51
51
 
52
52
  /* Menu items */
53
- .ibis-dropdown-menu .ibis-dropdown-menu__item {
53
+ .ib-dropdown-menu .ib-dropdown-menu__item {
54
54
  all: unset;
55
55
  display: flex;
56
56
  align-items: center;
@@ -67,29 +67,29 @@
67
67
  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
68
68
  }
69
69
 
70
- .ibis-dropdown-menu .ibis-dropdown-menu__item:hover {
70
+ .ib-dropdown-menu .ib-dropdown-menu__item:hover {
71
71
  background-color: var(--color-interactive-primary-bg-menu-hover);
72
72
  color: var(--color-white);
73
73
  }
74
74
 
75
- .ibis-dropdown-menu .ibis-dropdown-menu__item--selected {
75
+ .ib-dropdown-menu .ib-dropdown-menu__item--selected {
76
76
  background-color: var(--color-interactive-primary-bg-menu-selected);
77
77
  color: var(--color-white);
78
78
  font-weight: var(--font-weight-bold);
79
79
  }
80
80
 
81
- .ibis-dropdown-menu .ibis-dropdown-menu__item--selected:hover {
81
+ .ib-dropdown-menu .ib-dropdown-menu__item--selected:hover {
82
82
  background-color: var(--color-interactive-primary-bg-menu-selected-hover);
83
83
  color: var(--color-white);
84
84
  }
85
85
 
86
- .ibis-dropdown-menu :global(.ibis-dropdown-menu__item:focus) {
86
+ .ib-dropdown-menu :global(.ib-dropdown-menu__item:focus) {
87
87
  outline: none;
88
88
  background-color: var(--color-interactive-neutral-bg-hover);
89
89
  }
90
90
 
91
91
  /* Disabled */
92
- .ibis-dropdown-button:has(.ibis-button:disabled) {
92
+ .ib-dropdown-button:has(.ib-button:disabled) {
93
93
  cursor: not-allowed;
94
94
  opacity: var(--opacity-5);
95
95
  }
package/dist/components/formLayout.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Form Layout — import via @ibis-design/css/components/formLayout.css */
2
2
 
3
- .ibis-form-layout {
3
+ .ib-form-layout {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  align-items: center;
@@ -10,7 +10,7 @@
10
10
  min-height: 100%;
11
11
  }
12
12
 
13
- .ibis-form-layout__inner {
13
+ .ib-form-layout__inner {
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  gap: var(--spacing-6);
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  /* Card variant */
23
- .ibis-form-layout__inner--card {
23
+ .ib-form-layout__inner--card {
24
24
  background-color: var(--color-surface-default);
25
25
  border: var(--border-width-thin) solid var(--border-color-subtle);
26
26
  border-radius: var(--border-radius-xl);
@@ -29,23 +29,23 @@
29
29
  }
30
30
 
31
31
  /* Plain variant */
32
- .ibis-form-layout__inner--plain {
32
+ .ib-form-layout__inner--plain {
33
33
  background-color: transparent;
34
34
  padding: 0;
35
35
  }
36
36
 
37
37
  /* 2 column variant — wider max-width */
38
- .ibis-form-layout__inner--cols-2 {
38
+ .ib-form-layout__inner--cols-2 {
39
39
  max-width: 960px;
40
40
  }
41
41
 
42
- .ibis-form-layout__header {
42
+ .ib-form-layout__header {
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  gap: var(--spacing-2);
46
46
  }
47
47
 
48
- .ibis-form-layout__title {
48
+ .ib-form-layout__title {
49
49
  font-family: var(--font-family-heading);
50
50
  font-size: var(--font-size-heading-h3);
51
51
  font-weight: var(--font-weight-bold);
@@ -53,27 +53,27 @@
53
53
  margin: 0;
54
54
  }
55
55
 
56
- .ibis-form-layout__subtitle {
56
+ .ib-form-layout__subtitle {
57
57
  font-family: var(--font-family-sans);
58
58
  font-size: var(--font-size-body-md);
59
59
  color: var(--color-text-secondary);
60
60
  margin: 0;
61
61
  }
62
62
 
63
- .ibis-form-layout__body {
63
+ .ib-form-layout__body {
64
64
  display: flex;
65
65
  flex-direction: column;
66
66
  gap: var(--spacing-6);
67
67
  }
68
68
 
69
69
  /* Section */
70
- .ibis-form-layout__section {
70
+ .ib-form-layout__section {
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  gap: var(--spacing-4);
74
74
  }
75
75
 
76
- .ibis-form-layout__section-label {
76
+ .ib-form-layout__section-label {
77
77
  font-family: var(--font-family-sans);
78
78
  font-size: var(--font-size-body-sm);
79
79
  font-weight: var(--font-weight-medium);
@@ -84,7 +84,7 @@
84
84
  }
85
85
 
86
86
  /* Footer */
87
- .ibis-form-layout__footer {
87
+ .ib-form-layout__footer {
88
88
  display: flex;
89
89
  flex-direction: row;
90
90
  align-items: center;
@@ -97,7 +97,7 @@
97
97
  /* ===== RESPONSIVE 2-COLUMN GRID ===== */
98
98
 
99
99
  @media (min-width: 768px) {
100
- .ibis-form-layout__inner--cols-2 .ibis-form-layout__body {
100
+ .ib-form-layout__inner--cols-2 .ib-form-layout__body {
101
101
  display: grid;
102
102
  grid-template-columns: 1fr 1fr;
103
103
  gap: var(--spacing-4) var(--spacing-6);
@@ -105,7 +105,7 @@
105
105
  }
106
106
 
107
107
  /* Section spans both columns */
108
- .ibis-form-layout__inner--cols-2 .ibis-form-layout__section {
108
+ .ib-form-layout__inner--cols-2 .ib-form-layout__section {
109
109
  display: grid;
110
110
  grid-template-columns: 1fr 1fr;
111
111
  gap: var(--spacing-4) var(--spacing-6);
@@ -114,19 +114,19 @@
114
114
  }
115
115
 
116
116
  /* Section label spans both columns and is centered */
117
- .ibis-form-layout__inner--cols-2 .ibis-form-layout__section-label {
117
+ .ib-form-layout__inner--cols-2 .ib-form-layout__section-label {
118
118
  grid-column: 1 / -1;
119
119
  text-align: center;
120
120
  }
121
121
 
122
122
  /* Header and footer always span both columns */
123
- .ibis-form-layout__inner--cols-2 .ibis-form-layout__header--span,
124
- .ibis-form-layout__inner--cols-2 .ibis-form-layout__footer--span {
123
+ .ib-form-layout__inner--cols-2 .ib-form-layout__header--span,
124
+ .ib-form-layout__inner--cols-2 .ib-form-layout__footer--span {
125
125
  grid-column: 1 / -1;
126
126
  }
127
127
  }
128
128
 
129
129
  /* Allow inputs to stretch full width inside FormLayout */
130
- .ibis-form-layout .ibis-input {
130
+ .ib-form-layout .ib-input {
131
131
  max-width: 100%;
132
132
  }
package/dist/components/pillTab.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-pill-tab {
1
+ .ib-pill-tab {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -17,38 +17,38 @@
17
17
  box-shadow var(--transition-duration-normal);
18
18
  }
19
19
 
20
- .ibis-pill-tab__input {
20
+ .ib-pill-tab__input {
21
21
  display: none;
22
22
  }
23
23
 
24
- .ibis-pill-tab__content {
24
+ .ib-pill-tab__content {
25
25
  font-size: var(--font-size-body-md);
26
26
  line-height: 1;
27
27
  text-align: center;
28
28
  width: 100%;
29
29
  }
30
30
 
31
- .ibis-pill-tab--active {
31
+ .ib-pill-tab--active {
32
32
  background: var(--color-interactive-primary-bg-emphasized);
33
33
  color: var(--color-text-on-primary);
34
34
  }
35
35
 
36
- .ibis-pill-tab:hover:not(.ibis-pill-tab--disabled):not(.ibis-pill-tab--active) {
36
+ .ib-pill-tab:hover:not(.ib-pill-tab--disabled):not(.ib-pill-tab--active) {
37
37
  background: var(--color-interactive-primary-bg-selected);
38
38
  color: var(--color-interactive-primary-indicator);
39
39
  }
40
40
 
41
- .ibis-pill-tab--active:hover {
41
+ .ib-pill-tab--active:hover {
42
42
  background: var(--color-interactive-primary-bg-emphasized);
43
43
  }
44
44
 
45
- .ibis-pill-tab__input:focus-visible + .ibis-pill-tab__content {
45
+ .ib-pill-tab__input:focus-visible + .ib-pill-tab__content {
46
46
  outline: 2px solid var(--color-brand-primary);
47
47
  outline-offset: 2px;
48
48
  border-radius: var(--border-radius-full);
49
49
  }
50
50
 
51
- .ibis-pill-tab--disabled {
51
+ .ib-pill-tab--disabled {
52
52
  opacity: var(--opacity-7);
53
53
  cursor: not-allowed;
54
54
  }
package/dist/components/pillTabWrapper.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-pill-tabs {
1
+ .ib-pill-tabs {
2
2
  display: inline-flex;
3
3
  align-items: stretch;
4
4
  border-radius: var(--border-radius-full);
package/dist/components/radio.css CHANGED
@@ -1,37 +1,37 @@
1
- .ibis-radio {
1
+ .ib-radio {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--spacing-1);
5
5
  }
6
6
 
7
- .ibis-radio__label-wrapper {
7
+ .ib-radio__label-wrapper {
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  gap: var(--spacing-1);
11
11
  }
12
12
 
13
- .ibis-radio__label {
13
+ .ib-radio__label {
14
14
  font-size: var(--font-size-body-md);
15
15
  color: var(--color-text-secondary);
16
16
  }
17
17
 
18
- .ibis-radio__description {
18
+ .ib-radio__description {
19
19
  font-size: var(--font-size-body-sm);
20
20
  color: var(--color-text-muted);
21
21
  }
22
22
 
23
- .ibis-radio__control {
23
+ .ib-radio__control {
24
24
  display: inline-flex;
25
25
  align-items: center;
26
26
  gap: var(--spacing-2);
27
27
  cursor: pointer;
28
28
  }
29
29
 
30
- .ibis-radio__input {
30
+ .ib-radio__input {
31
31
  display: none;
32
32
  }
33
33
 
34
- .ibis-radio__circle {
34
+ .ib-radio__circle {
35
35
  width: 20px;
36
36
  height: 20px;
37
37
  border-radius: var(--border-radius-full);
@@ -45,65 +45,65 @@
45
45
  background var(--transition-duration-normal) var(--transition-timing-default);
46
46
  }
47
47
 
48
- .ibis-radio__dot {
48
+ .ib-radio__dot {
49
49
  width: 8px;
50
50
  height: 8px;
51
51
  border-radius: var(--border-radius-full);
52
52
  background: transparent;
53
53
  }
54
54
 
55
- .ibis-radio__dot--active {
55
+ .ib-radio__dot--active {
56
56
  background: var(--color-interactive-primary-indicator);
57
57
  }
58
58
 
59
- .ibis-radio__text {
59
+ .ib-radio__text {
60
60
  font-size: var(--font-size-body-md);
61
61
  color: var(--color-text-primary);
62
62
  }
63
63
 
64
- .ibis-radio__help {
64
+ .ib-radio__help {
65
65
  font-size: var(--font-size-body-sm);
66
66
  color: var(--color-text-muted);
67
67
  }
68
68
 
69
- .ibis-radio__error {
69
+ .ib-radio__error {
70
70
  font-size: var(--font-size-body-sm);
71
71
  color: var(--color-status-error);
72
72
  }
73
73
 
74
- .ibis-radio--disabled {
74
+ .ib-radio--disabled {
75
75
  opacity: var(--opacity-9);
76
76
  cursor: not-allowed;
77
77
  }
78
78
 
79
- .ibis-radio--disabled .ibis-radio__circle {
79
+ .ib-radio--disabled .ib-radio__circle {
80
80
  border-color: var(--border-color-disabled);
81
81
  background-color: var(--color-surface-disabled);
82
82
  }
83
83
 
84
- .ibis-radio__input:checked + .ibis-radio__circle {
84
+ .ib-radio__input:checked + .ib-radio__circle {
85
85
  border-color: var(--color-interactive-primary-border-selected);
86
86
  }
87
87
 
88
- .ibis-radio:not(.ibis-radio--disabled) .ibis-radio__control:hover .ibis-radio__circle {
88
+ .ib-radio:not(.ib-radio--disabled) .ib-radio__control:hover .ib-radio__circle {
89
89
  box-shadow: var(--shadow-focus-default);
90
90
  border-color: var(--color-text-secondary);
91
91
  transform: scale(1.05);
92
92
  }
93
93
 
94
- .ibis-radio:not(.ibis-radio--disabled)
95
- .ibis-radio__control:hover
96
- .ibis-radio__input:checked
97
- + .ibis-radio__circle {
94
+ .ib-radio:not(.ib-radio--disabled)
95
+ .ib-radio__control:hover
96
+ .ib-radio__input:checked
97
+ + .ib-radio__circle {
98
98
  box-shadow: var(--shadow-focus-primary);
99
99
  border-color: var(--color-interactive-primary-border-selected);
100
100
  }
101
101
 
102
- .ibis-radio--invalid .ibis-radio__circle {
102
+ .ib-radio--invalid .ib-radio__circle {
103
103
  border-color: var(--color-status-error);
104
104
  }
105
105
 
106
- .ibis-radio--invalid .ibis-radio__control:hover .ibis-radio__circle {
106
+ .ib-radio--invalid .ib-radio__control:hover .ib-radio__circle {
107
107
  box-shadow: var(--shadow-focus-error);
108
108
  border-color: var(--color-status-error);
109
109
  }
package/dist/components/switch.css CHANGED
@@ -1,9 +1,9 @@
1
- .ibis-switch {
1
+ .ib-switch {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  }
5
5
 
6
- .ibis-switch__control {
6
+ .ib-switch__control {
7
7
  display: inline-flex;
8
8
  align-items: center;
9
9
  cursor: pointer;
@@ -11,11 +11,11 @@
11
11
  user-select: none;
12
12
  }
13
13
 
14
- .ibis-switch__input {
14
+ .ib-switch__input {
15
15
  display: none;
16
16
  }
17
17
 
18
- .ibis-switch__track {
18
+ .ib-switch__track {
19
19
  width: 32px;
20
20
  height: 20px;
21
21
  background: var(--color-interactive-primary-track-off);
@@ -26,7 +26,7 @@
26
26
  box-shadow var(--transition-duration-normal) var(--transition-timing-default);
27
27
  }
28
28
 
29
- .ibis-switch__thumb {
29
+ .ib-switch__thumb {
30
30
  width: 16px;
31
31
  height: 16px;
32
32
  background: var(--color-surface-default);
@@ -39,32 +39,32 @@
39
39
  background var(--transition-duration-normal) var(--transition-timing-default);
40
40
  }
41
41
 
42
- .ibis-switch__input:checked + .ibis-switch__track {
42
+ .ib-switch__input:checked + .ib-switch__track {
43
43
  background: var(--color-interactive-primary-track-on);
44
44
  }
45
45
 
46
- .ibis-switch__input:checked + .ibis-switch__track .ibis-switch__thumb {
46
+ .ib-switch__input:checked + .ib-switch__track .ib-switch__thumb {
47
47
  transform: translateX(12px);
48
48
  }
49
49
 
50
- .ibis-switch--disabled {
50
+ .ib-switch--disabled {
51
51
  opacity: var(--opacity-7);
52
52
  cursor: not-allowed;
53
53
  }
54
54
 
55
- .ibis-switch--disabled .ibis-switch__track {
55
+ .ib-switch--disabled .ib-switch__track {
56
56
  background: var(--color-interactive-primary-track-off);
57
57
  }
58
58
 
59
- .ibis-switch--disabled .ibis-switch__thumb {
59
+ .ib-switch--disabled .ib-switch__thumb {
60
60
  background: var(--color-surface-muted);
61
61
  }
62
62
 
63
- .ibis-switch--disabled .ibis-switch__control {
63
+ .ib-switch--disabled .ib-switch__control {
64
64
  cursor: not-allowed;
65
65
  }
66
66
 
67
- .ibis-switch__label {
67
+ .ib-switch__label {
68
68
  font-family: var(--font-family-sans);
69
69
  font-size: var(--font-size-md);
70
70
  color: var(--color-text-default);