@ibis-design/css 1.0.0-alpha.3 → 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 (24) hide show
  1. package/README.md +138 -129
  2. package/dist/components/appLayout.css +6 -6
  3. package/dist/components/banner.css +34 -31
  4. package/dist/components/button.css +28 -28
  5. package/dist/components/card.css +14 -14
  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 +24 -21
  10. package/dist/components/dropdownButton.css +13 -13
  11. package/dist/components/formLayout.css +22 -17
  12. package/dist/components/navShell.css +6 -6
  13. package/dist/components/pillTab.css +8 -8
  14. package/dist/components/pillTabWrapper.css +1 -1
  15. package/dist/components/radio.css +22 -22
  16. package/dist/components/switch.css +17 -11
  17. package/dist/components/textInput.css +51 -42
  18. package/dist/components/textarea.css +77 -56
  19. package/dist/components/textlink.css +24 -24
  20. package/dist/components/tipIndicator.css +12 -12
  21. package/dist/components/toaster.css +21 -21
  22. package/dist/components/topBar.css +3 -3
  23. package/package.json +1 -4
  24. package/src/lib/set-theme.ts +35 -6
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,27 +39,33 @@
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
+
67
+ .ib-switch__label {
68
+ font-family: var(--font-family-sans);
69
+ font-size: var(--font-size-md);
70
+ color: var(--color-text-default);
71
+ }
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,54 +8,42 @@
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);
27
27
  }
28
28
 
29
- /* ===== WRAPPER — owns the visible border ===== */
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);
35
35
  overflow: hidden;
36
- background-color: var(--color-surface-default);
37
- border: var(--border-width-default) solid var(--border-color-default);
38
- transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
39
- }
40
-
41
- /* Hover */
42
- .ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
43
- .ibis-input__wrapper:not(:focus-within):hover {
44
- border-color: var(--border-color-strong);
45
- }
46
-
47
- /* Focus */
48
- .ibis-input__wrapper:focus-within {
49
- border-color: var(--border-color-focus);
50
36
  }
51
37
 
52
38
  /* ===== PREPEND ===== */
53
39
 
54
- .ibis-input__prepend {
40
+ .ib-input__prepend {
55
41
  display: flex;
56
42
  align-items: center;
57
43
  padding: 0 var(--spacing-3);
58
- border-right: var(--border-width-default) solid var(--border-color-default);
44
+ border: var(--border-width-default) solid var(--border-color-default);
45
+ border-right: none;
46
+ border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
59
47
  position: relative;
60
48
  white-space: nowrap;
61
49
  color: var(--color-text-secondary);
@@ -63,38 +51,58 @@
63
51
  transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
64
52
  }
65
53
 
66
- .ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend {
54
+ .ib-input__wrapper:not(:focus-within):hover .ib-input__prepend {
67
55
  border-color: var(--border-color-strong);
68
56
  }
69
57
 
70
- .ibis-input__wrapper:focus-within .ibis-input__prepend {
58
+ .ib-input__wrapper:focus-within .ib-input__prepend {
71
59
  border-color: var(--border-color-focus);
72
60
  }
73
61
 
74
- /* ===== FIELD WRAPPER — no border, just layout ===== */
62
+ /* ===== FIELD WRAPPER — owns the visible border ===== */
75
63
 
76
- .ibis-input__field-wrapper {
64
+ .ib-input__field-wrapper {
77
65
  display: flex;
78
66
  align-items: center;
79
67
  flex: 1;
80
- border: none;
68
+ background-color: var(--color-surface-default);
69
+ border: var(--border-width-default) solid var(--border-color-default);
70
+ border-radius: var(--border-radius-lg);
71
+ transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
72
+ }
73
+
74
+ /* When prepend is present, remove left radius and border */
75
+ .ib-input__wrapper--with-prepend .ib-input__field-wrapper {
76
+ border-left: none;
77
+ border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
78
+ }
79
+
80
+ /* Hover */
81
+ .ib-input:not(.ib-input--disabled):not(.ib-input--invalid)
82
+ .ib-input__field-wrapper:not(:focus-within):hover {
83
+ border-color: var(--border-color-strong);
84
+ }
85
+
86
+ /* Focus */
87
+ .ib-input__field-wrapper:focus-within {
88
+ border-color: var(--border-color-focus);
81
89
  }
82
90
 
83
- .ibis-input--sm .ibis-input__field-wrapper {
91
+ .ib-input--sm .ib-input__field-wrapper {
84
92
  padding: var(--spacing-1) var(--spacing-2);
85
93
  }
86
94
 
87
- .ibis-input--md .ibis-input__field-wrapper {
95
+ .ib-input--md .ib-input__field-wrapper {
88
96
  padding: var(--spacing-2);
89
97
  }
90
98
 
91
- .ibis-input--lg .ibis-input__field-wrapper {
99
+ .ib-input--lg .ib-input__field-wrapper {
92
100
  padding: var(--spacing-3) var(--spacing-4);
93
101
  }
94
102
 
95
103
  /* ===== FIELD ===== */
96
104
 
97
- .ibis-input__field {
105
+ .ib-input__field {
98
106
  flex: 1;
99
107
  width: 100%;
100
108
  min-width: 0;
@@ -106,14 +114,14 @@
106
114
  font-size: var(--font-size-body-md);
107
115
  }
108
116
 
109
- .ibis-input__field::placeholder {
117
+ .ib-input__field::placeholder {
110
118
  color: var(--color-text-muted);
111
119
  }
112
120
 
113
121
  /* ===== PREFIX / SUFFIX ===== */
114
122
 
115
- .ibis-input__prefix,
116
- .ibis-input__suffix {
123
+ .ib-input__prefix,
124
+ .ib-input__suffix {
117
125
  display: inline-flex;
118
126
  align-items: center;
119
127
  padding: 0 var(--spacing-2);
@@ -122,13 +130,13 @@
122
130
 
123
131
  /* ===== HELP / ERROR ===== */
124
132
 
125
- .ibis-input__help {
133
+ .ib-input__help {
126
134
  font-family: var(--font-family-sans);
127
135
  font-size: var(--font-size-body-sm);
128
136
  color: var(--color-text-muted);
129
137
  }
130
138
 
131
- .ibis-input__error {
139
+ .ib-input__error {
132
140
  font-family: var(--font-family-sans);
133
141
  font-size: var(--font-size-body-sm);
134
142
  color: var(--color-status-error);
@@ -136,34 +144,35 @@
136
144
 
137
145
  /* ===== INVALID STATE ===== */
138
146
 
139
- .ibis-input--invalid .ibis-input__wrapper {
147
+ .ib-input--invalid .ib-input__field-wrapper {
140
148
  border-color: var(--color-status-error);
141
149
  }
142
150
 
143
- .ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:not(:focus-within):hover {
151
+ .ib-input--invalid:not(.ib-input--disabled)
152
+ .ib-input__field-wrapper:not(:focus-within):hover {
144
153
  border-color: var(--color-status-error);
145
154
  }
146
155
 
147
- .ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:focus-within {
156
+ .ib-input--invalid:not(.ib-input--disabled) .ib-input__field-wrapper:focus-within {
148
157
  border-color: var(--color-status-error);
149
158
  }
150
159
 
151
160
  /* ===== DISABLED STATE ===== */
152
161
 
153
- .ibis-input--disabled .ibis-input__wrapper {
162
+ .ib-input--disabled .ib-input__field-wrapper {
154
163
  opacity: var(--opacity-5);
155
164
  cursor: not-allowed;
156
165
  border-color: var(--border-color-disabled);
157
166
  background-color: var(--color-interactive-primary-bg-disabled);
158
167
  }
159
168
 
160
- .ibis-input--disabled .ibis-input__field {
169
+ .ib-input--disabled .ib-input__field {
161
170
  cursor: not-allowed;
162
171
  }
163
172
 
164
173
  /* ===== LOADING STATE ===== */
165
174
 
166
- .ibis-input--loading .ibis-input__wrapper {
175
+ .ib-input--loading .ib-input__field-wrapper {
167
176
  opacity: var(--opacity-7);
168
177
  pointer-events: none;
169
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%);