@ibis-design/css 0.5.0 → 0.7.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 (32) hide show
  1. package/README.md +90 -53
  2. package/dist/components/banner.css +155 -0
  3. package/dist/components/button.css +179 -0
  4. package/dist/components/checkbox.css +103 -0
  5. package/dist/components/chips.css +76 -0
  6. package/dist/components/dropdown.css +105 -0
  7. package/dist/components/dropdownButton.css +81 -0
  8. package/dist/components/pillTab.css +59 -0
  9. package/dist/components/radio.css +108 -0
  10. package/dist/components/switch.css +68 -0
  11. package/dist/components/textInput.css +152 -0
  12. package/dist/components/textarea.css +91 -0
  13. package/dist/components/textlink.css +149 -0
  14. package/dist/components/tipIndicator.css +79 -0
  15. package/dist/components/toaster.css +129 -0
  16. package/dist/components/tooltip.css +0 -0
  17. package/dist/design-tokens.css +503 -0
  18. package/dist/tailwind.preset.js +5 -0
  19. package/dist/tailwind.theme.js +310 -0
  20. package/dist/tokens/alc-dark.json +1 -0
  21. package/dist/tokens/alc-light.json +1 -0
  22. package/dist/tokens/ib-dark.json +1 -0
  23. package/dist/tokens/ib-light.json +1 -0
  24. package/package.json +15 -12
  25. package/dist/alchemy/alchemy-design.css +0 -154
  26. package/dist/alchemy/alchemy-design.scss +0 -151
  27. package/dist/alchemy/tailwind.preset.js +0 -231
  28. package/dist/ibis/ibis-design.css +0 -261
  29. package/dist/ibis/ibis-design.scss +0 -258
  30. package/dist/ibis/tailwind.preset.js +0 -410
  31. package/dist/ibis/tokens.css +0 -196
  32. package/dist/ibis/tokens.scss +0 -193
package/dist/components/textlink.css ADDED
@@ -0,0 +1,149 @@
1
+ .ibis-link {
2
+ position: relative;
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--spacing-1);
6
+
7
+ color: var(--color-primary-500);
8
+ text-decoration: none;
9
+ cursor: pointer;
10
+
11
+ transition:
12
+ color var(--transition-duration-fast) var(--transition-timing-default),
13
+ opacity var(--transition-duration-fast) var(--transition-timing-default);
14
+ }
15
+
16
+ /* content */
17
+ .ibis-link__content {
18
+ display: inline-flex;
19
+ align-items: center;
20
+ gap: var(--spacing-1);
21
+ }
22
+
23
+ .ibis-link__content--hidden {
24
+ visibility: hidden;
25
+ }
26
+
27
+ /* sizes */
28
+ .ibis-link--sm {
29
+ font-size: var(--font-size-body-sm);
30
+ }
31
+
32
+ .ibis-link--md {
33
+ font-size: var(--font-size-body-md);
34
+ }
35
+
36
+ .ibis-link--lg {
37
+ font-size: var(--font-size-body-lg);
38
+ }
39
+
40
+ /* underline */
41
+ .ibis-link--underline-always {
42
+ text-decoration: underline;
43
+ }
44
+
45
+ .ibis-link--underline-hover:hover {
46
+ text-decoration: underline;
47
+ }
48
+
49
+ .ibis-link--underline-none {
50
+ text-decoration: none;
51
+ }
52
+
53
+ /* states */
54
+ .ibis-link:hover {
55
+ color: var(--color-primary-700);
56
+ }
57
+
58
+ .ibis-link:active {
59
+ color: var(--color-primary-600);
60
+ }
61
+
62
+ .ibis-link:focus-visible {
63
+ outline: 2px solid var(--color-primary-900);
64
+ outline-offset: 2px;
65
+ }
66
+
67
+ /* disabled */
68
+ .ibis-link--disabled {
69
+ color: var(--color-neutral-500);
70
+ cursor: not-allowed;
71
+ pointer-events: none;
72
+ text-decoration: none;
73
+ }
74
+
75
+ /* loading */
76
+ .ibis-link--loading {
77
+ cursor: not-allowed;
78
+ pointer-events: none;
79
+ }
80
+
81
+ .ibis-link__loader {
82
+ position: absolute;
83
+ width: 1em;
84
+ height: 1em;
85
+ border: var(--border-width-default) solid currentColor;
86
+ border-top-color: transparent;
87
+ border-radius: 50%;
88
+ animation: ibis-link-spin 0.8s linear infinite;
89
+ top: 50%;
90
+ left: 50%;
91
+ transform: translate(-50%, -50%);
92
+ }
93
+
94
+ @keyframes ibis-link-spin {
95
+ from {
96
+ transform: translate(-50%, -50%) rotate(0deg);
97
+ }
98
+ to {
99
+ transform: translate(-50%, -50%) rotate(360deg);
100
+ }
101
+ }
102
+
103
+ /* skeleton */
104
+ .ibis-link--skeleton {
105
+ position: relative;
106
+ overflow: hidden;
107
+ color: transparent;
108
+ cursor: default;
109
+ pointer-events: none;
110
+ }
111
+
112
+ .ibis-link__content--skeleton {
113
+ position: relative;
114
+ color: transparent;
115
+ overflow: hidden;
116
+ }
117
+
118
+ .ibis-link__content--skeleton::after {
119
+ content: "";
120
+ position: absolute;
121
+ inset: 0;
122
+ background-color: var(--color-neutral-400);
123
+ z-index: 1;
124
+ }
125
+
126
+ .ibis-link__content--skeleton::before {
127
+ content: "";
128
+ position: absolute;
129
+ inset: 0;
130
+ background: var(--gradient-skeleton);
131
+ transform: translateX(-100%);
132
+ animation: ibis-shimmer 2s infinite;
133
+ z-index: 2;
134
+ }
135
+
136
+ /* Icons */
137
+ .ibis-link__icon {
138
+ display: inline-flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+
142
+ width: 0.75em;
143
+ height: 0.75em;
144
+ }
145
+
146
+ .ibis-link__icon :global(svg) {
147
+ width: 100%;
148
+ height: 100%;
149
+ }
package/dist/components/tipIndicator.css ADDED
@@ -0,0 +1,79 @@
1
+ .ibis-tip-indicator {
2
+ position: relative;
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ cursor: pointer;
7
+ color: var(--color-neutral-400);
8
+ transition: color var(--transition-duration-fast) var(--transition-timing-default);
9
+ outline: none;
10
+ }
11
+
12
+ .ibis-tip-indicator:hover,
13
+ .ibis-tip-indicator:focus-visible {
14
+ color: var(--color-primary-500);
15
+ }
16
+
17
+ .ibis-tip-indicator__icon {
18
+ width: 1em;
19
+ height: 1em;
20
+ display: block;
21
+ }
22
+
23
+ /* Tooltip box */
24
+ .ibis-tip {
25
+ position: absolute;
26
+ z-index: 100;
27
+ background-color: var(--color-neutral-600);
28
+ color: var(--color-white);
29
+ font-size: var(--font-size-body-sm);
30
+ font-family: var(--font-family-sans);
31
+ padding: var(--spacing-2) var(--spacing-4);
32
+ border-radius: var(--border-radius-full);
33
+ pointer-events: none;
34
+ white-space: nowrap;
35
+ }
36
+
37
+ /* Width variants */
38
+ .ibis-tip--width-auto {
39
+ white-space: nowrap;
40
+ width: auto;
41
+ }
42
+
43
+ .ibis-tip--width-240 {
44
+ width: 240px;
45
+ white-space: normal;
46
+ }
47
+
48
+ .ibis-tip--width-360 {
49
+ width: 360px;
50
+ white-space: normal;
51
+ }
52
+
53
+ /* Top */
54
+ .ibis-tip--top {
55
+ bottom: calc(100% + 8px);
56
+ left: 50%;
57
+ transform: translateX(-50%);
58
+ }
59
+
60
+ /* Bottom */
61
+ .ibis-tip--bottom {
62
+ top: calc(100% + 8px);
63
+ left: 50%;
64
+ transform: translateX(-50%);
65
+ }
66
+
67
+ /* Left */
68
+ .ibis-tip--left {
69
+ right: calc(100% + 8px);
70
+ top: 50%;
71
+ transform: translateY(-50%);
72
+ }
73
+
74
+ /* Right */
75
+ .ibis-tip--right {
76
+ left: calc(100% + 8px);
77
+ top: 50%;
78
+ transform: translateY(-50%);
79
+ }
package/dist/components/toaster.css ADDED
@@ -0,0 +1,129 @@
1
+ .ibis-toaster {
2
+ font-family: var(--font-family-sans);
3
+ display: flex;
4
+ align-items: center;
5
+ gap: var(--spacing-2);
6
+ padding: var(--spacing-2) var(--spacing-4);
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 */
10
+ max-width: 200px;
11
+ position: relative;
12
+ margin-bottom: var(--spacing-1);
13
+ }
14
+
15
+ /* Icon */
16
+ .ibis-toaster__icon {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ width: 20px; /* TODO: replace with token */
21
+ height: 20px; /* TODO: replace with token */
22
+ flex-shrink: 0;
23
+ margin-top: var(--spacing-1);
24
+ color: var(--color-white);
25
+ }
26
+
27
+ .ibis-toaster__icon :global(svg) {
28
+ width: 100%;
29
+ height: 100%;
30
+ }
31
+
32
+ /* Content */
33
+ .ibis-toaster__content {
34
+ flex: 1;
35
+ display: flex;
36
+ flex-direction: column;
37
+ justify-content: center;
38
+ }
39
+
40
+ .ibis-toaster__title {
41
+ font-weight: var(--font-weight-medium);
42
+ font-size: var(--font-size-body-sm);
43
+ }
44
+
45
+ .ibis-toaster__message {
46
+ font-size: var(--font-size-body-sm);
47
+ color: var(--color-white);
48
+ }
49
+
50
+ /* Close Button */
51
+ .ibis-toaster__close {
52
+ background: transparent;
53
+ border: none;
54
+ cursor: pointer;
55
+ font-size: var(--font-size-body-lg);
56
+ line-height: 1;
57
+ color: var(--color-white);
58
+ flex-shrink: 0;
59
+ }
60
+
61
+ /* Variants */
62
+ .ibis-toaster--success {
63
+ border-color: var(--color-status-success);
64
+ background-color: var(--color-status-success);
65
+ }
66
+
67
+ .ibis-toaster--success .ibis-toaster__title {
68
+ color: var(--color-white);
69
+ }
70
+
71
+ .ibis-toaster--error {
72
+ border-color: var(--color-status-error);
73
+ background-color: var(--color-status-error);
74
+ }
75
+
76
+ .ibis-toaster--error .ibis-toaster__title {
77
+ color: var(--color-white);
78
+ }
79
+
80
+ .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 */
83
+ }
84
+
85
+ .ibis-toaster--accent .ibis-toaster__title {
86
+ color: var(--color-white);
87
+ }
88
+
89
+ .ibis-toaster--default {
90
+ border-color: var(--color-neutral-100);
91
+ background-color: var(--color-neutral-100);
92
+ }
93
+
94
+ .ibis-toaster--default .ibis-toaster__title {
95
+ color: var(--color-black);
96
+ }
97
+
98
+ .ibis-toaster--default .ibis-toaster__message {
99
+ color: var(--color-black);
100
+ }
101
+
102
+ .ibis-toaster--default .ibis-toaster__icon {
103
+ color: var(--color-black);
104
+ }
105
+
106
+ .ibis-toaster--default .ibis-toaster__close {
107
+ color: var(--color-black);
108
+ border-color: var(--color-white);
109
+ }
110
+
111
+ /* Loader */
112
+ .ibis-toaster__loader {
113
+ width: 1em;
114
+ height: 1em;
115
+ border: var(--border-width-default) solid var(--color-primary-300);
116
+ border-top-color: var(--color-primary-900);
117
+ border-radius: 50%;
118
+ animation: ibis-toaster-spin 0.8s linear infinite;
119
+ }
120
+
121
+ /* Animations */
122
+ @keyframes ibis-toaster-spin {
123
+ from {
124
+ transform: rotate(0deg);
125
+ }
126
+ to {
127
+ transform: rotate(360deg);
128
+ }
129
+ }
package/dist/components/tooltip.css ADDED
File without changes