@simple-base/css 0.1.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 (31) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +172 -0
  3. package/package.json +127 -0
  4. package/styles/alert-dialog.css +112 -0
  5. package/styles/badge.css +100 -0
  6. package/styles/breadcrumb.css +23 -0
  7. package/styles/button.css +159 -0
  8. package/styles/card.css +28 -0
  9. package/styles/checkbox.css +42 -0
  10. package/styles/combobox.css +235 -0
  11. package/styles/dialog.css +84 -0
  12. package/styles/disclosure.css +44 -0
  13. package/styles/empty-state.css +29 -0
  14. package/styles/field.css +64 -0
  15. package/styles/input.css +108 -0
  16. package/styles/keyboard-shortcut.css +16 -0
  17. package/styles/menu.css +45 -0
  18. package/styles/pagination.css +36 -0
  19. package/styles/progress.css +17 -0
  20. package/styles/radio.css +41 -0
  21. package/styles/range.css +21 -0
  22. package/styles/segmented-control.css +45 -0
  23. package/styles/select.css +272 -0
  24. package/styles/status.css +117 -0
  25. package/styles/switch.css +54 -0
  26. package/styles/table.css +48 -0
  27. package/styles/tabs.css +37 -0
  28. package/styles/textarea.css +69 -0
  29. package/styles/typography.css +166 -0
  30. package/styles.css +29 -0
  31. package/styles.d.ts +1 -0
package/styles/status.css ADDED
@@ -0,0 +1,117 @@
1
+ @layer sb {
2
+ .sb-status-line,
3
+ .sb-alert,
4
+ .sb-toast {
5
+ display: flex;
6
+ align-items: flex-start;
7
+ gap: var(--sb-semantic-space-3);
8
+ padding: var(--sb-semantic-space-4);
9
+ border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-default);
10
+ border-radius: var(--sb-semantic-radius-md);
11
+ background: var(--sb-semantic-color-background-surface);
12
+ }
13
+
14
+ .sb-status-line[data-status="success"],
15
+ .sb-toast,
16
+ .sb-toast[data-status="success"] {
17
+ border-color: color-mix(
18
+ in oklch,
19
+ var(--sb-semantic-color-status-success-base) 48%,
20
+ var(--sb-semantic-color-border-default)
21
+ );
22
+ }
23
+
24
+ .sb-status-line[data-status="danger"],
25
+ .sb-alert[data-status="danger"] {
26
+ border-color: color-mix(
27
+ in oklch,
28
+ var(--sb-semantic-color-status-danger-base) 48%,
29
+ var(--sb-semantic-color-border-default)
30
+ );
31
+ }
32
+
33
+ .sb-status-line[data-status="info"],
34
+ .sb-alert[data-status="info"] {
35
+ border-color: color-mix(
36
+ in oklch,
37
+ var(--sb-semantic-color-status-info-base) 48%,
38
+ var(--sb-semantic-color-border-default)
39
+ );
40
+ }
41
+
42
+ .sb-status-dot {
43
+ width: var(--sb-semantic-space-2);
44
+ height: var(--sb-semantic-space-2);
45
+ flex: 0 0 auto;
46
+ margin-top: 6px;
47
+ border-radius: var(--sb-semantic-radius-full);
48
+ background: currentcolor;
49
+ }
50
+
51
+ .sb-status-line[data-status="success"] .sb-status-dot {
52
+ color: var(--sb-semantic-color-status-success-text);
53
+ }
54
+
55
+ .sb-status-line[data-status="danger"] .sb-status-dot {
56
+ color: var(--sb-semantic-color-status-danger-text);
57
+ }
58
+
59
+ .sb-status-line[data-status="info"] .sb-status-dot {
60
+ color: var(--sb-semantic-color-status-info-text);
61
+ }
62
+
63
+ .sb-status-line strong,
64
+ .sb-alert strong,
65
+ .sb-toast strong {
66
+ display: block;
67
+ color: var(--sb-semantic-color-foreground-primary);
68
+ font-size: 13px;
69
+ }
70
+
71
+ .sb-status-line p,
72
+ .sb-alert p,
73
+ .sb-toast p {
74
+ margin: 2px 0 0;
75
+ color: var(--sb-semantic-color-foreground-muted);
76
+ font-size: var(--sb-semantic-typography-size-sm);
77
+ }
78
+
79
+ .sb-alert-mark,
80
+ .sb-toast-icon {
81
+ display: grid;
82
+ place-items: center;
83
+ width: var(--sb-semantic-space-6);
84
+ height: var(--sb-semantic-space-6);
85
+ flex: 0 0 auto;
86
+ border-radius: var(--sb-semantic-radius-full);
87
+ }
88
+
89
+ .sb-alert-mark {
90
+ color: var(--sb-semantic-color-status-danger-text);
91
+ background: var(--sb-semantic-color-status-danger-soft);
92
+ }
93
+
94
+ .sb-alert-mark svg {
95
+ width: var(--sb-semantic-typography-size-md);
96
+ height: var(--sb-semantic-typography-size-md);
97
+ }
98
+
99
+ .sb-toast-icon {
100
+ color: var(--sb-semantic-color-status-success-on-surface);
101
+ background: var(--sb-semantic-color-status-success-surface);
102
+ font-size: 13px;
103
+ font-weight: var(--sb-semantic-typography-weight-bold);
104
+ }
105
+
106
+ .sb-toast[hidden] {
107
+ display: none;
108
+ }
109
+
110
+ .sb-live-region {
111
+ position: fixed;
112
+ right: var(--sb-semantic-space-5);
113
+ bottom: var(--sb-semantic-space-5);
114
+ z-index: var(--sb-semantic-layer-toast);
115
+ width: min(360px, calc(100vw - 40px));
116
+ }
117
+ }
package/styles/switch.css ADDED
@@ -0,0 +1,54 @@
1
+ @layer sb {
2
+ .sb-switch {
3
+ position: relative;
4
+ width: 46px;
5
+ height: 26px;
6
+ flex: 0 0 auto;
7
+ margin: 0;
8
+ border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
9
+ border-radius: var(--sb-semantic-radius-full);
10
+ appearance: none;
11
+ background: var(--sb-semantic-color-background-surface);
12
+ cursor: pointer;
13
+ transition:
14
+ background var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
15
+ border-color var(--sb-semantic-motion-duration-normal)
16
+ var(--sb-semantic-motion-easing-standard);
17
+ }
18
+
19
+ .sb-switch::after {
20
+ position: absolute;
21
+ top: 3px;
22
+ left: 3px;
23
+ width: 18px;
24
+ height: 18px;
25
+ border-radius: var(--sb-semantic-radius-full);
26
+ background: var(--sb-semantic-color-foreground-secondary);
27
+ content: "";
28
+ transition:
29
+ transform var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-out),
30
+ background var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard);
31
+ }
32
+
33
+ .sb-switch:checked {
34
+ background: var(--sb-semantic-color-accent-surface);
35
+ border-color: var(--sb-semantic-color-accent-surface);
36
+ }
37
+
38
+ .sb-switch:checked::after {
39
+ background: var(--sb-semantic-color-accent-on-surface);
40
+ transform: translateX(20px);
41
+ }
42
+
43
+ .sb-switch:focus-visible {
44
+ outline: 0;
45
+ box-shadow:
46
+ 0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
47
+ 0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
48
+ }
49
+
50
+ .sb-switch:disabled {
51
+ cursor: not-allowed;
52
+ opacity: var(--sb-semantic-opacity-disabled);
53
+ }
54
+ }
package/styles/table.css ADDED
@@ -0,0 +1,48 @@
1
+ @layer sb {
2
+ .sb-table-wrap {
3
+ overflow-x: auto;
4
+ }
5
+
6
+ .sb-table {
7
+ width: 100%;
8
+ min-width: 640px;
9
+ border-collapse: collapse;
10
+ font-size: 13px;
11
+ }
12
+
13
+ .sb-table th,
14
+ .sb-table td {
15
+ padding: var(--sb-semantic-space-4);
16
+ border-bottom: var(--sb-semantic-border-width-hairline) solid
17
+ var(--sb-semantic-color-border-default);
18
+ text-align: left;
19
+ vertical-align: middle;
20
+ }
21
+
22
+ .sb-table th {
23
+ color: var(--sb-semantic-color-foreground-muted);
24
+ font-family: var(--sb-semantic-typography-family-body);
25
+ font-size: var(--sb-semantic-typography-size-sm);
26
+ font-weight: var(--sb-semantic-typography-weight-medium);
27
+ }
28
+
29
+ .sb-table tbody tr:hover {
30
+ background: var(--sb-semantic-color-background-subtle);
31
+ }
32
+
33
+ .sb-table tbody tr[aria-selected="true"] {
34
+ background: var(--sb-semantic-color-accent-soft);
35
+ }
36
+
37
+ .sb-table [data-variant="code"] {
38
+ color: var(--sb-semantic-color-accent-text);
39
+ font-family: var(--sb-semantic-typography-family-code);
40
+ font-size: var(--sb-semantic-typography-size-sm);
41
+ }
42
+
43
+ .sb-table [data-variant="number"] {
44
+ color: var(--sb-semantic-color-foreground-secondary);
45
+ font-family: var(--sb-semantic-typography-family-code);
46
+ text-align: right;
47
+ }
48
+ }
package/styles/tabs.css ADDED
@@ -0,0 +1,37 @@
1
+ @layer sb {
2
+ .sb-tabs {
3
+ display: flex;
4
+ gap: var(--sb-semantic-space-1);
5
+ padding-bottom: var(--sb-semantic-space-2);
6
+ overflow-x: auto;
7
+ border-bottom: var(--sb-semantic-border-width-hairline) solid
8
+ var(--sb-semantic-color-border-default);
9
+ }
10
+
11
+ .sb-tab {
12
+ min-height: var(--sb-semantic-size-target-minimum);
13
+ padding: 0 var(--sb-semantic-space-3);
14
+ border: 0;
15
+ border-radius: var(--sb-semantic-radius-sm);
16
+ color: var(--sb-semantic-color-foreground-muted);
17
+ background: transparent;
18
+ font-size: 13px;
19
+ font-weight: var(--sb-semantic-typography-weight-semibold);
20
+ white-space: nowrap;
21
+ }
22
+
23
+ .sb-tab:hover {
24
+ color: var(--sb-semantic-color-foreground-primary);
25
+ background: var(--sb-semantic-color-background-subtle);
26
+ }
27
+
28
+ .sb-tab[aria-selected="true"] {
29
+ color: var(--sb-semantic-color-foreground-primary);
30
+ background: var(--sb-semantic-color-accent-soft);
31
+ }
32
+
33
+ .sb-tab-panel {
34
+ padding-top: var(--sb-semantic-space-5);
35
+ color: var(--sb-semantic-color-foreground-secondary);
36
+ }
37
+ }
package/styles/textarea.css ADDED
@@ -0,0 +1,69 @@
1
+ @layer sb {
2
+ .sb-textarea {
3
+ width: 100%;
4
+ min-height: 120px;
5
+ padding: var(--sb-semantic-space-3);
6
+ resize: vertical;
7
+ border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-default);
8
+ border-radius: var(--sb-semantic-radius-sm);
9
+ outline: 0;
10
+ color: var(--sb-semantic-color-foreground-primary);
11
+ background: color-mix(
12
+ in oklch,
13
+ var(--sb-semantic-color-background-canvas) 82%,
14
+ var(--sb-semantic-color-background-surface)
15
+ );
16
+ caret-color: var(--sb-semantic-color-accent-text);
17
+ font: inherit;
18
+ font-size: var(--sb-semantic-typography-size-md);
19
+ line-height: var(--sb-semantic-typography-line-height-relaxed);
20
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
21
+ transition:
22
+ border-color var(--sb-semantic-motion-duration-normal)
23
+ var(--sb-semantic-motion-easing-standard),
24
+ box-shadow var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
25
+ background var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
26
+ color var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
27
+ opacity var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard);
28
+ }
29
+
30
+ .sb-textarea::placeholder {
31
+ color: var(--sb-semantic-color-foreground-muted);
32
+ }
33
+
34
+ .sb-textarea::selection {
35
+ color: var(--sb-semantic-color-selection-foreground);
36
+ background: var(--sb-semantic-color-selection-background);
37
+ }
38
+
39
+ .sb-textarea:hover:where(:not(:disabled)) {
40
+ border-color: var(--sb-semantic-color-border-strong);
41
+ }
42
+
43
+ .sb-textarea:focus-visible {
44
+ border-color: var(--sb-semantic-color-accent-text);
45
+ box-shadow:
46
+ 0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
47
+ 0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
48
+ }
49
+
50
+ .sb-textarea[aria-invalid="true"] {
51
+ border-color: var(--sb-semantic-color-status-danger-base);
52
+ }
53
+
54
+ .sb-textarea[aria-invalid="true"]:focus-visible {
55
+ box-shadow:
56
+ 0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
57
+ 0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-danger-ring);
58
+ }
59
+
60
+ .sb-textarea:read-only {
61
+ color: var(--sb-semantic-color-foreground-secondary);
62
+ background: var(--sb-semantic-color-background-raised);
63
+ }
64
+
65
+ .sb-textarea:disabled {
66
+ cursor: not-allowed;
67
+ opacity: var(--sb-semantic-opacity-disabled);
68
+ }
69
+ }
package/styles/typography.css ADDED
@@ -0,0 +1,166 @@
1
+ @layer sb {
2
+ .sb-display,
3
+ .sb-heading-1,
4
+ .sb-heading-2,
5
+ .sb-heading-3,
6
+ .sb-heading-4,
7
+ .sb-heading-5,
8
+ .sb-heading-6 {
9
+ margin: 0;
10
+ color: var(--sb-semantic-color-foreground-primary);
11
+ font-family: var(--sb-semantic-typography-family-body);
12
+ text-wrap: balance;
13
+ }
14
+
15
+ .sb-display {
16
+ font-family: var(--sb-semantic-typography-family-display);
17
+ font-size: clamp(40px, 6vw, 72px);
18
+ font-weight: var(--sb-semantic-typography-weight-semibold);
19
+ line-height: var(--sb-semantic-typography-line-height-tight);
20
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
21
+ }
22
+
23
+ .sb-heading-1 {
24
+ font-size: var(--sb-semantic-typography-size-4xl);
25
+ font-weight: var(--sb-semantic-typography-weight-semibold);
26
+ line-height: var(--sb-semantic-typography-line-height-snug);
27
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-snug);
28
+ }
29
+
30
+ .sb-heading-2 {
31
+ font-size: var(--sb-semantic-typography-size-3xl);
32
+ font-weight: var(--sb-semantic-typography-weight-semibold);
33
+ line-height: var(--sb-semantic-typography-line-height-snug);
34
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
35
+ }
36
+
37
+ .sb-heading-3 {
38
+ font-size: var(--sb-semantic-typography-size-2xl);
39
+ font-weight: var(--sb-semantic-typography-weight-semibold);
40
+ line-height: var(--sb-semantic-typography-line-height-snug);
41
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
42
+ }
43
+
44
+ .sb-heading-4 {
45
+ font-size: var(--sb-semantic-typography-size-xl);
46
+ font-weight: var(--sb-semantic-typography-weight-semibold);
47
+ line-height: 1.3;
48
+ }
49
+
50
+ .sb-heading-5 {
51
+ font-size: var(--sb-semantic-typography-size-lg);
52
+ font-weight: var(--sb-semantic-typography-weight-semibold);
53
+ line-height: var(--sb-semantic-typography-line-height-normal);
54
+ }
55
+
56
+ .sb-heading-6 {
57
+ color: var(--sb-semantic-color-foreground-secondary);
58
+ font-size: var(--sb-semantic-typography-size-md);
59
+ font-weight: var(--sb-semantic-typography-weight-semibold);
60
+ line-height: var(--sb-semantic-typography-line-height-normal);
61
+ }
62
+
63
+ .sb-text-body,
64
+ .sb-text-body-lg,
65
+ .sb-text-body-sm,
66
+ .sb-text-caption,
67
+ .sb-text-label {
68
+ margin: 0;
69
+ font-family: var(--sb-semantic-typography-family-body);
70
+ text-wrap: pretty;
71
+ }
72
+
73
+ .sb-text-body-lg {
74
+ color: var(--sb-semantic-color-foreground-secondary);
75
+ font-size: var(--sb-semantic-typography-size-xl);
76
+ font-weight: var(--sb-semantic-typography-weight-regular);
77
+ line-height: var(--sb-semantic-typography-line-height-relaxed);
78
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
79
+ }
80
+
81
+ .sb-text-body {
82
+ color: var(--sb-semantic-color-foreground-secondary);
83
+ font-size: var(--sb-semantic-typography-size-md);
84
+ font-weight: var(--sb-semantic-typography-weight-regular);
85
+ line-height: var(--sb-semantic-typography-line-height-relaxed);
86
+ letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
87
+ }
88
+
89
+ .sb-text-body-sm {
90
+ color: var(--sb-semantic-color-foreground-muted);
91
+ font-size: var(--sb-semantic-typography-size-sm);
92
+ font-weight: var(--sb-semantic-typography-weight-regular);
93
+ line-height: var(--sb-semantic-typography-line-height-relaxed);
94
+ }
95
+
96
+ .sb-text-caption {
97
+ color: var(--sb-semantic-color-foreground-muted);
98
+ font-size: var(--sb-semantic-typography-size-sm);
99
+ font-weight: var(--sb-semantic-typography-weight-regular);
100
+ line-height: var(--sb-semantic-typography-line-height-normal);
101
+ }
102
+
103
+ .sb-text-label {
104
+ color: var(--sb-semantic-color-foreground-secondary);
105
+ font-size: var(--sb-semantic-typography-size-md);
106
+ font-weight: var(--sb-semantic-typography-weight-semibold);
107
+ line-height: var(--sb-semantic-typography-line-height-normal);
108
+ }
109
+
110
+ .sb-code-text,
111
+ .sb-code-block {
112
+ font-family: var(--sb-semantic-typography-family-code);
113
+ font-size: var(--sb-semantic-typography-size-sm);
114
+ line-height: var(--sb-semantic-typography-line-height-normal);
115
+ }
116
+
117
+ .sb-code-text {
118
+ display: inline-block;
119
+ max-width: 100%;
120
+ padding: 2px 6px;
121
+ overflow-wrap: anywhere;
122
+ border: var(--sb-semantic-border-width-hairline) solid
123
+ color-mix(
124
+ in oklch,
125
+ var(--sb-semantic-color-accent-surface) 22%,
126
+ var(--sb-semantic-color-border-default)
127
+ );
128
+ border-radius: var(--sb-semantic-radius-sm);
129
+ color: var(--sb-semantic-color-accent-text);
130
+ background: var(--sb-semantic-color-accent-soft);
131
+ }
132
+
133
+ .sb-code-block {
134
+ margin: 0;
135
+ padding: var(--sb-semantic-space-3);
136
+ overflow-x: auto;
137
+ border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-default);
138
+ border-radius: var(--sb-semantic-radius-md);
139
+ color: var(--sb-semantic-color-foreground-primary);
140
+ background: color-mix(in oklch, var(--sb-semantic-color-background-canvas) 64%, transparent);
141
+ }
142
+
143
+ .sb-text-primary {
144
+ color: var(--sb-semantic-color-foreground-primary);
145
+ }
146
+
147
+ .sb-text-secondary {
148
+ color: var(--sb-semantic-color-foreground-secondary);
149
+ }
150
+
151
+ .sb-text-muted {
152
+ color: var(--sb-semantic-color-foreground-muted);
153
+ }
154
+
155
+ .sb-text-accent {
156
+ color: var(--sb-semantic-color-accent-text);
157
+ }
158
+
159
+ .sb-text-danger {
160
+ color: var(--sb-semantic-color-status-danger-text);
161
+ }
162
+
163
+ .sb-text-success {
164
+ color: var(--sb-semantic-color-status-success-text);
165
+ }
166
+ }
package/styles.css ADDED
@@ -0,0 +1,29 @@
1
+ @layer sb;
2
+
3
+ @import "@simple-base/tokens/css";
4
+ @import "./styles/typography.css";
5
+ @import "./styles/card.css";
6
+ @import "./styles/dialog.css";
7
+ @import "./styles/alert-dialog.css";
8
+ @import "./styles/button.css";
9
+ @import "./styles/badge.css";
10
+ @import "./styles/status.css";
11
+ @import "./styles/progress.css";
12
+ @import "./styles/field.css";
13
+ @import "./styles/input.css";
14
+ @import "./styles/select.css";
15
+ @import "./styles/combobox.css";
16
+ @import "./styles/textarea.css";
17
+ @import "./styles/checkbox.css";
18
+ @import "./styles/radio.css";
19
+ @import "./styles/switch.css";
20
+ @import "./styles/range.css";
21
+ @import "./styles/segmented-control.css";
22
+ @import "./styles/tabs.css";
23
+ @import "./styles/keyboard-shortcut.css";
24
+ @import "./styles/breadcrumb.css";
25
+ @import "./styles/pagination.css";
26
+ @import "./styles/disclosure.css";
27
+ @import "./styles/menu.css";
28
+ @import "./styles/table.css";
29
+ @import "./styles/empty-state.css";
package/styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};