@ibis-design/css 0.8.2 → 1.0.0-alpha.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 (35) hide show
  1. package/README.md +46 -14
  2. package/dist/bootstrap-overrides.css +81 -0
  3. package/dist/components/authLayout.css +124 -0
  4. package/dist/components/banner.css +13 -17
  5. package/dist/components/button.css +13 -13
  6. package/dist/components/card.css +55 -0
  7. package/dist/components/cardLayout.css +71 -0
  8. package/dist/components/checkbox.css +29 -11
  9. package/dist/components/chips.css +8 -8
  10. package/dist/components/dashboardLayout.css +92 -0
  11. package/dist/components/dropdown.css +34 -16
  12. package/dist/components/dropdownButton.css +42 -28
  13. package/dist/components/formLayout.css +88 -0
  14. package/dist/components/navBottom.css +32 -0
  15. package/dist/components/navButton.css +233 -0
  16. package/dist/components/navDrawer.css +168 -0
  17. package/dist/components/navRail.css +135 -0
  18. package/dist/components/navShell.css +314 -0
  19. package/dist/components/pillTab.css +7 -12
  20. package/dist/components/radio.css +14 -13
  21. package/dist/components/switch.css +5 -8
  22. package/dist/components/textInput.css +12 -15
  23. package/dist/components/textarea.css +7 -13
  24. package/dist/components/textlink.css +6 -14
  25. package/dist/components/tipIndicator.css +4 -10
  26. package/dist/components/toaster.css +21 -27
  27. package/dist/components/topBar.css +52 -0
  28. package/dist/design-tokens.css +210 -86
  29. package/dist/tailwind.preset.js +1 -1
  30. package/dist/tailwind.theme.js +42 -2
  31. package/package.json +34 -31
  32. package/src/lib/assemble-bootstrap-overrides.ts +23 -0
  33. package/src/lib/assemble-design-tokens.ts +22 -0
  34. package/src/lib/set-theme.ts +79 -0
  35. package/src/lib/themes.ts +74 -0
package/dist/components/textlink.css CHANGED
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  gap: var(--spacing-1);
6
6
 
7
- color: var(--color-primary-500);
7
+ color: var(--color-brand-primary);
8
8
  text-decoration: none;
9
9
  cursor: pointer;
10
10
 
@@ -13,7 +13,6 @@
13
13
  opacity var(--transition-duration-fast) var(--transition-timing-default);
14
14
  }
15
15
 
16
- /* content */
17
16
  .ibis-link__content {
18
17
  display: inline-flex;
19
18
  align-items: center;
@@ -24,7 +23,6 @@
24
23
  visibility: hidden;
25
24
  }
26
25
 
27
- /* sizes */
28
26
  .ibis-link--sm {
29
27
  font-size: var(--font-size-body-sm);
30
28
  }
@@ -37,7 +35,6 @@
37
35
  font-size: var(--font-size-body-lg);
38
36
  }
39
37
 
40
- /* underline */
41
38
  .ibis-link--underline-always {
42
39
  text-decoration: underline;
43
40
  }
@@ -50,29 +47,26 @@
50
47
  text-decoration: none;
51
48
  }
52
49
 
53
- /* states */
54
50
  .ibis-link:hover {
55
- color: var(--color-primary-700);
51
+ color: var(--color-interactive-primary-bg-emphasized);
56
52
  }
57
53
 
58
54
  .ibis-link:active {
59
- color: var(--color-primary-600);
55
+ color: var(--color-interactive-primary-fg);
60
56
  }
61
57
 
62
58
  .ibis-link:focus-visible {
63
- outline: 2px solid var(--color-primary-900);
59
+ outline: 2px solid var(--color-interactive-primary-indicator);
64
60
  outline-offset: 2px;
65
61
  }
66
62
 
67
- /* disabled */
68
63
  .ibis-link--disabled {
69
- color: var(--color-neutral-500);
64
+ color: var(--color-text-muted);
70
65
  cursor: not-allowed;
71
66
  pointer-events: none;
72
67
  text-decoration: none;
73
68
  }
74
69
 
75
- /* loading */
76
70
  .ibis-link--loading {
77
71
  cursor: not-allowed;
78
72
  pointer-events: none;
@@ -100,7 +94,6 @@
100
94
  }
101
95
  }
102
96
 
103
- /* skeleton */
104
97
  .ibis-link--skeleton {
105
98
  position: relative;
106
99
  overflow: hidden;
@@ -119,7 +112,7 @@
119
112
  content: "";
120
113
  position: absolute;
121
114
  inset: 0;
122
- background-color: var(--color-neutral-400);
115
+ background-color: var(--color-text-disabled);
123
116
  z-index: 1;
124
117
  }
125
118
 
@@ -133,7 +126,6 @@
133
126
  z-index: 2;
134
127
  }
135
128
 
136
- /* Icons */
137
129
  .ibis-link__icon {
138
130
  display: inline-flex;
139
131
  align-items: center;
package/dist/components/tipIndicator.css CHANGED
@@ -4,14 +4,14 @@
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  cursor: pointer;
7
- color: var(--color-neutral-400);
7
+ color: var(--color-text-disabled);
8
8
  transition: color var(--transition-duration-fast) var(--transition-timing-default);
9
9
  outline: none;
10
10
  }
11
11
 
12
12
  .ibis-tip-indicator:hover,
13
13
  .ibis-tip-indicator:focus-visible {
14
- color: var(--color-primary-500);
14
+ color: var(--color-brand-primary);
15
15
  }
16
16
 
17
17
  .ibis-tip-indicator__icon {
@@ -20,12 +20,11 @@
20
20
  display: block;
21
21
  }
22
22
 
23
- /* Tooltip box */
24
23
  .ibis-tip {
25
24
  position: absolute;
26
25
  z-index: 100;
27
- background-color: var(--color-neutral-600);
28
- color: var(--color-white);
26
+ background-color: var(--color-surface-inverse);
27
+ color: var(--color-text-inverse);
29
28
  font-size: var(--font-size-body-sm);
30
29
  font-family: var(--font-family-sans);
31
30
  padding: var(--spacing-2) var(--spacing-4);
@@ -34,7 +33,6 @@
34
33
  white-space: nowrap;
35
34
  }
36
35
 
37
- /* Width variants */
38
36
  .ibis-tip--width-auto {
39
37
  white-space: nowrap;
40
38
  width: auto;
@@ -50,28 +48,24 @@
50
48
  white-space: normal;
51
49
  }
52
50
 
53
- /* Top */
54
51
  .ibis-tip--top {
55
52
  bottom: calc(100% + 8px);
56
53
  left: 50%;
57
54
  transform: translateX(-50%);
58
55
  }
59
56
 
60
- /* Bottom */
61
57
  .ibis-tip--bottom {
62
58
  top: calc(100% + 8px);
63
59
  left: 50%;
64
60
  transform: translateX(-50%);
65
61
  }
66
62
 
67
- /* Left */
68
63
  .ibis-tip--left {
69
64
  right: calc(100% + 8px);
70
65
  top: 50%;
71
66
  transform: translateY(-50%);
72
67
  }
73
68
 
74
- /* Right */
75
69
  .ibis-tip--right {
76
70
  left: calc(100% + 8px);
77
71
  top: 50%;
package/dist/components/toaster.css CHANGED
@@ -5,23 +5,22 @@
5
5
  gap: var(--spacing-2);
6
6
  padding: var(--spacing-2) var(--spacing-4);
7
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); /* TODO: replace with token */
8
+ border: var(--border-width-default) solid var(--border-color-default);
9
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
10
10
  max-width: 200px;
11
11
  position: relative;
12
12
  margin-bottom: var(--spacing-1);
13
13
  }
14
14
 
15
- /* Icon */
16
15
  .ibis-toaster__icon {
17
16
  display: flex;
18
17
  align-items: center;
19
18
  justify-content: center;
20
- width: 20px; /* TODO: replace with token */
21
- height: 20px; /* TODO: replace with token */
19
+ width: 20px;
20
+ height: 20px;
22
21
  flex-shrink: 0;
23
22
  margin-top: var(--spacing-1);
24
- color: var(--color-white);
23
+ color: var(--color-text-on-primary);
25
24
  }
26
25
 
27
26
  .ibis-toaster__icon :global(svg) {
@@ -29,7 +28,6 @@
29
28
  height: 100%;
30
29
  }
31
30
 
32
- /* Content */
33
31
  .ibis-toaster__content {
34
32
  flex: 1;
35
33
  display: flex;
@@ -44,28 +42,26 @@
44
42
 
45
43
  .ibis-toaster__message {
46
44
  font-size: var(--font-size-body-sm);
47
- color: var(--color-white);
45
+ color: var(--color-text-on-primary);
48
46
  }
49
47
 
50
- /* Close Button */
51
48
  .ibis-toaster__close {
52
49
  background: transparent;
53
50
  border: none;
54
51
  cursor: pointer;
55
52
  font-size: var(--font-size-body-lg);
56
53
  line-height: 1;
57
- color: var(--color-white);
54
+ color: var(--color-text-on-primary);
58
55
  flex-shrink: 0;
59
56
  }
60
57
 
61
- /* Variants */
62
58
  .ibis-toaster--success {
63
59
  border-color: var(--color-status-success);
64
60
  background-color: var(--color-status-success);
65
61
  }
66
62
 
67
63
  .ibis-toaster--success .ibis-toaster__title {
68
- color: var(--color-white);
64
+ color: var(--color-text-on-primary);
69
65
  }
70
66
 
71
67
  .ibis-toaster--error {
@@ -74,51 +70,49 @@
74
70
  }
75
71
 
76
72
  .ibis-toaster--error .ibis-toaster__title {
77
- color: var(--color-white);
73
+ color: var(--color-text-on-primary);
78
74
  }
79
75
 
80
76
  .ibis-toaster--accent {
81
- border-color: var(--color-toaster-accent); /* TODO: replace with token */
82
- background-color: var(--color-toaster-accent); /* TODO: replace with token */
77
+ border-color: var(--color-toaster-accent);
78
+ background-color: var(--color-toaster-accent);
83
79
  }
84
80
 
85
81
  .ibis-toaster--accent .ibis-toaster__title {
86
- color: var(--color-white);
82
+ color: var(--color-text-on-primary);
87
83
  }
88
84
 
89
85
  .ibis-toaster--default {
90
- border-color: var(--color-neutral-100);
91
- background-color: var(--color-neutral-100);
86
+ border-color: var(--color-surface-muted);
87
+ background-color: var(--color-surface-muted);
92
88
  }
93
89
 
94
90
  .ibis-toaster--default .ibis-toaster__title {
95
- color: var(--color-black);
91
+ color: var(--color-text-on-muted);
96
92
  }
97
93
 
98
94
  .ibis-toaster--default .ibis-toaster__message {
99
- color: var(--color-black);
95
+ color: var(--color-text-on-muted);
100
96
  }
101
97
 
102
98
  .ibis-toaster--default .ibis-toaster__icon {
103
- color: var(--color-black);
99
+ color: var(--color-text-on-muted);
104
100
  }
105
101
 
106
102
  .ibis-toaster--default .ibis-toaster__close {
107
- color: var(--color-black);
108
- border-color: var(--color-white);
103
+ color: var(--color-text-on-muted);
104
+ border-color: var(--color-surface-default);
109
105
  }
110
106
 
111
- /* Loader */
112
107
  .ibis-toaster__loader {
113
108
  width: 1em;
114
109
  height: 1em;
115
- border: var(--border-width-default) solid var(--color-primary-300);
116
- border-top-color: var(--color-primary-900);
110
+ border: var(--border-width-default) solid var(--border-color-focus);
111
+ border-top-color: var(--color-interactive-primary-indicator);
117
112
  border-radius: 50%;
118
113
  animation: ibis-toaster-spin 0.8s linear infinite;
119
114
  }
120
115
 
121
- /* Animations */
122
116
  @keyframes ibis-toaster-spin {
123
117
  from {
124
118
  transform: rotate(0deg);
package/dist/components/topBar.css ADDED
@@ -0,0 +1,52 @@
1
+ /* Top bar — import via @ibis-design/css/components/topBar.css */
2
+
3
+ .ib-top-bar {
4
+ position: relative;
5
+ width: 100%;
6
+ height: 96px;
7
+ display: flex;
8
+ flex-direction: row;
9
+ align-items: center;
10
+ justify-content: space-between;
11
+ background-color: var(--color-surface-default);
12
+ border-bottom: var(--border-width-thin) solid var(--border-color-subtle);
13
+ box-shadow: 0 1px 8px 0 var(--shadow-color-black-soft);
14
+ z-index: var(--z-index-sticky);
15
+ box-sizing: border-box;
16
+ padding: 0 var(--spacing-6);
17
+ gap: var(--spacing-4);
18
+ flex-shrink: 0;
19
+ }
20
+
21
+ .ib-top-bar__left {
22
+ display: flex;
23
+ flex-direction: row;
24
+ align-items: center;
25
+ gap: var(--spacing-3);
26
+ flex-shrink: 0;
27
+ }
28
+
29
+ .ib-top-bar__title {
30
+ font-family: var(--font-family-heading);
31
+ font-size: var(--font-size-heading-h4);
32
+ font-weight: var(--font-weight-bold);
33
+ color: var(--color-text-primary);
34
+ margin: 0;
35
+ }
36
+
37
+ .ib-top-bar__right {
38
+ display: flex;
39
+ flex-direction: row;
40
+ align-items: center;
41
+ gap: var(--spacing-3);
42
+ flex-shrink: 0;
43
+ }
44
+
45
+ .ib-top-bar__search {
46
+ width: 200px;
47
+ }
48
+
49
+ .ib-top-bar__search .ibis-input {
50
+ max-width: 100%;
51
+ width: 100%;
52
+ }