@tokis/theme 1.0.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 (50) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +51 -0
  3. package/package.json +69 -0
  4. package/src/base/index.css +19 -0
  5. package/src/base/reset.css +76 -0
  6. package/src/base/variables.css +206 -0
  7. package/src/components/accordion.css +124 -0
  8. package/src/components/alert.css +196 -0
  9. package/src/components/app-bar.css +69 -0
  10. package/src/components/avatar.css +199 -0
  11. package/src/components/bottom-nav.css +79 -0
  12. package/src/components/button.css +213 -0
  13. package/src/components/card.css +248 -0
  14. package/src/components/charts.css +38 -0
  15. package/src/components/checkbox.css +158 -0
  16. package/src/components/circular-progress.css +62 -0
  17. package/src/components/codeblock.css +229 -0
  18. package/src/components/command-palette.css +183 -0
  19. package/src/components/confirm-dialog.css +95 -0
  20. package/src/components/context-menu.css +82 -0
  21. package/src/components/dialog.css +149 -0
  22. package/src/components/drawer.css +167 -0
  23. package/src/components/dropdown.css +33 -0
  24. package/src/components/emptystate.css +42 -0
  25. package/src/components/extended.css +663 -0
  26. package/src/components/hover-card.css +29 -0
  27. package/src/components/index.css +40 -0
  28. package/src/components/infinite-scroll.css +45 -0
  29. package/src/components/input.css +201 -0
  30. package/src/components/nav-rail.css +104 -0
  31. package/src/components/navigation.css +273 -0
  32. package/src/components/pagination.css +91 -0
  33. package/src/components/progress.css +192 -0
  34. package/src/components/result.css +58 -0
  35. package/src/components/search-field.css +102 -0
  36. package/src/components/select.css +175 -0
  37. package/src/components/slider.css +115 -0
  38. package/src/components/snackbar.css +234 -0
  39. package/src/components/statistic.css +70 -0
  40. package/src/components/stepper.css +131 -0
  41. package/src/components/switch.css +107 -0
  42. package/src/components/tabs.css +152 -0
  43. package/src/components/timeline.css +125 -0
  44. package/src/components/toggle.css +103 -0
  45. package/src/components/tooltip.css +113 -0
  46. package/src/components/treeview.css +107 -0
  47. package/src/components/virtual-list.css +19 -0
  48. package/src/index.css +6 -0
  49. package/src/utilities/index.css +2 -0
  50. package/src/utilities/layout.css +28 -0
package/src/components/dialog.css ADDED
@@ -0,0 +1,149 @@
1
+ /* ============================================================
2
+ Tokis — Dialog / Modal
3
+ ============================================================ */
4
+
5
+ /* ── Backdrop ───────────────────────────────────────────────── */
6
+
7
+ .tokis-dialog-backdrop {
8
+ position: fixed;
9
+ inset: 0;
10
+ background: rgb(0 0 0 / 0.45);
11
+ backdrop-filter: blur(4px);
12
+ -webkit-backdrop-filter: blur(4px);
13
+ z-index: var(--tokis-z-modal);
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ padding: var(--tokis-spacing-4);
18
+ animation: tokis-backdrop-in var(--tokis-duration-normal) var(--tokis-ease-out);
19
+ overscroll-behavior: contain;
20
+ }
21
+
22
+ /* ── Content ────────────────────────────────────────────────── */
23
+
24
+ .tokis-dialog-content {
25
+ position: relative;
26
+ background: var(--tokis-color-surface-overlay);
27
+ border: 1px solid var(--tokis-color-border);
28
+ border-radius: var(--tokis-radius-xl);
29
+ box-shadow: var(--tokis-shadow-2xl);
30
+ width: 100%;
31
+ max-width: 520px;
32
+ max-height: calc(100dvh - 64px);
33
+ overflow-y: auto;
34
+ overflow-x: hidden;
35
+ animation: tokis-dialog-in var(--tokis-duration-normal) var(--tokis-ease-spring);
36
+ outline: none;
37
+ scrollbar-width: thin;
38
+ scrollbar-color: var(--tokis-color-border) transparent;
39
+ }
40
+ .tokis-dialog-content::-webkit-scrollbar { width: 6px; }
41
+ .tokis-dialog-content::-webkit-scrollbar-track { background: transparent; }
42
+ .tokis-dialog-content::-webkit-scrollbar-thumb {
43
+ background: var(--tokis-color-border);
44
+ border-radius: var(--tokis-radius-full);
45
+ }
46
+
47
+ /* ── Header ─────────────────────────────────────────────────── */
48
+
49
+ .tokis-dialog-header {
50
+ display: flex;
51
+ align-items: flex-start;
52
+ justify-content: space-between;
53
+ gap: var(--tokis-spacing-4);
54
+ padding: var(--tokis-spacing-6) var(--tokis-spacing-6) var(--tokis-spacing-4);
55
+ }
56
+
57
+ .tokis-dialog-title {
58
+ font-size: var(--tokis-font-size-lg);
59
+ font-weight: var(--tokis-font-weight-semibold);
60
+ color: var(--tokis-text-primary);
61
+ line-height: var(--tokis-line-height-tight);
62
+ letter-spacing: var(--tokis-letter-spacing-tight);
63
+ }
64
+
65
+ .tokis-dialog-description {
66
+ font-size: var(--tokis-font-size-sm);
67
+ color: var(--tokis-text-secondary);
68
+ margin-top: var(--tokis-spacing-1);
69
+ line-height: var(--tokis-line-height-normal);
70
+ }
71
+
72
+ /* ── Close button ───────────────────────────────────────────── */
73
+
74
+ .tokis-dialog-close {
75
+ flex-shrink: 0;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ width: 32px;
80
+ height: 32px;
81
+ border-radius: var(--tokis-radius-md);
82
+ color: var(--tokis-text-tertiary);
83
+ transition:
84
+ background var(--tokis-duration-fast) var(--tokis-ease-out),
85
+ color var(--tokis-duration-fast) var(--tokis-ease-out);
86
+ cursor: pointer;
87
+ background: none;
88
+ border: none;
89
+ outline: none;
90
+ margin: -4px -4px 0 0;
91
+ -webkit-tap-highlight-color: transparent;
92
+ }
93
+ .tokis-dialog-close:hover {
94
+ background: var(--tokis-color-surface-hover);
95
+ color: var(--tokis-text-primary);
96
+ }
97
+ .tokis-dialog-close:focus-visible {
98
+ box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
99
+ }
100
+
101
+ /* ── Body ───────────────────────────────────────────────────── */
102
+
103
+ .tokis-dialog-body {
104
+ padding: 0 var(--tokis-spacing-6) var(--tokis-spacing-5);
105
+ font-size: var(--tokis-font-size-sm);
106
+ color: var(--tokis-text-primary);
107
+ line-height: var(--tokis-line-height-normal);
108
+ }
109
+
110
+ /* ── Footer ─────────────────────────────────────────────────── */
111
+
112
+ .tokis-dialog-footer {
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: flex-end;
116
+ gap: var(--tokis-spacing-2);
117
+ padding: var(--tokis-spacing-4) var(--tokis-spacing-6) var(--tokis-spacing-6);
118
+ border-top: 1px solid var(--tokis-color-border);
119
+ }
120
+
121
+ /* ── Sizes ──────────────────────────────────────────────────── */
122
+
123
+ .tokis-dialog-content--sm { max-width: 360px; }
124
+ .tokis-dialog-content--lg { max-width: 720px; }
125
+ .tokis-dialog-content--xl { max-width: 960px; }
126
+ .tokis-dialog-content--full {
127
+ max-width: calc(100vw - 48px);
128
+ height: calc(100dvh - 48px);
129
+ max-height: none;
130
+ }
131
+
132
+ /* ── Animations ─────────────────────────────────────────────── */
133
+
134
+ @keyframes tokis-backdrop-in {
135
+ from { opacity: 0; }
136
+ to { opacity: 1; }
137
+ }
138
+ @keyframes tokis-dialog-in {
139
+ from { opacity: 0; transform: scale(0.95) translateY(12px); }
140
+ to { opacity: 1; transform: scale(1) translateY(0); }
141
+ }
142
+
143
+ /* ── Reduced motion ─────────────────────────────────────────── */
144
+
145
+ @media (prefers-reduced-motion: reduce) {
146
+ .tokis-dialog-backdrop { animation: tokis-backdrop-in var(--tokis-duration-fast) var(--tokis-ease-out); }
147
+ .tokis-dialog-content { animation: none; }
148
+ .tokis-dialog-close { transition: none; }
149
+ }
package/src/components/drawer.css ADDED
@@ -0,0 +1,167 @@
1
+ /* ============================================================
2
+ Tokis — Drawer (Side Sheet)
3
+ ============================================================ */
4
+
5
+ /* ── Backdrop ───────────────────────────────────────────────── */
6
+
7
+ .tokis-drawer-backdrop {
8
+ position: fixed;
9
+ inset: 0;
10
+ background: rgb(0 0 0 / 0.45);
11
+ backdrop-filter: blur(2px);
12
+ -webkit-backdrop-filter: blur(2px);
13
+ z-index: var(--tokis-z-modal);
14
+ animation: tokis-backdrop-in var(--tokis-duration-normal) var(--tokis-ease-out);
15
+ }
16
+
17
+ /* ── Content ────────────────────────────────────────────────── */
18
+
19
+ .tokis-drawer-content {
20
+ position: fixed;
21
+ background: var(--tokis-color-surface-overlay);
22
+ z-index: var(--tokis-z-modal);
23
+ display: flex;
24
+ flex-direction: column;
25
+ outline: none;
26
+ overflow: hidden;
27
+ box-shadow: var(--tokis-shadow-2xl);
28
+ }
29
+
30
+ .tokis-drawer-content--right {
31
+ top: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ width: 400px;
35
+ max-width: 90vw;
36
+ border-left: 1px solid var(--tokis-color-border);
37
+ animation: tokis-drawer-in-right var(--tokis-duration-slow) var(--tokis-ease-out);
38
+ }
39
+ .tokis-drawer-content--left {
40
+ top: 0;
41
+ left: 0;
42
+ bottom: 0;
43
+ width: 400px;
44
+ max-width: 90vw;
45
+ border-right: 1px solid var(--tokis-color-border);
46
+ animation: tokis-drawer-in-left var(--tokis-duration-slow) var(--tokis-ease-out);
47
+ }
48
+ .tokis-drawer-content--bottom {
49
+ left: 0;
50
+ right: 0;
51
+ bottom: 0;
52
+ max-height: 90dvh;
53
+ border-top: 1px solid var(--tokis-color-border);
54
+ border-radius: var(--tokis-radius-xl) var(--tokis-radius-xl) 0 0;
55
+ animation: tokis-drawer-in-bottom var(--tokis-duration-slow) var(--tokis-ease-out);
56
+ }
57
+ .tokis-drawer-content--top {
58
+ left: 0;
59
+ right: 0;
60
+ top: 0;
61
+ max-height: 90dvh;
62
+ border-bottom: 1px solid var(--tokis-color-border);
63
+ border-radius: 0 0 var(--tokis-radius-xl) var(--tokis-radius-xl);
64
+ animation: tokis-drawer-in-top var(--tokis-duration-slow) var(--tokis-ease-out);
65
+ }
66
+
67
+ /* ── Header ─────────────────────────────────────────────────── */
68
+
69
+ .tokis-drawer-header {
70
+ display: grid;
71
+ grid-template-columns: 1fr auto;
72
+ grid-template-rows: auto auto;
73
+ align-items: start;
74
+ padding: var(--tokis-spacing-5) var(--tokis-spacing-6);
75
+ border-bottom: 1px solid var(--tokis-color-border);
76
+ flex-shrink: 0;
77
+ gap: var(--tokis-spacing-1) var(--tokis-spacing-4);
78
+ }
79
+
80
+ .tokis-drawer-title {
81
+ grid-column: 1;
82
+ font-size: var(--tokis-font-size-lg);
83
+ font-weight: var(--tokis-font-weight-semibold);
84
+ color: var(--tokis-text-primary);
85
+ letter-spacing: var(--tokis-letter-spacing-tight);
86
+ line-height: var(--tokis-line-height-tight);
87
+ margin: 0;
88
+ }
89
+
90
+ .tokis-drawer-description {
91
+ grid-column: 1;
92
+ font-size: var(--tokis-font-size-sm);
93
+ color: var(--tokis-text-secondary);
94
+ margin: 0;
95
+ line-height: var(--tokis-line-height-relaxed);
96
+ }
97
+
98
+ .tokis-drawer-close {
99
+ grid-column: 2;
100
+ grid-row: 1;
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ width: 32px;
105
+ height: 32px;
106
+ border-radius: var(--tokis-radius-md);
107
+ cursor: pointer;
108
+ color: var(--tokis-text-tertiary);
109
+ background: none;
110
+ border: none;
111
+ outline: none;
112
+ flex-shrink: 0;
113
+ transition:
114
+ background var(--tokis-duration-fast) var(--tokis-ease-out),
115
+ color var(--tokis-duration-fast) var(--tokis-ease-out);
116
+ -webkit-tap-highlight-color: transparent;
117
+ }
118
+ .tokis-drawer-close:hover {
119
+ background: var(--tokis-color-surface-hover);
120
+ color: var(--tokis-text-primary);
121
+ }
122
+ .tokis-drawer-close:focus-visible {
123
+ box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
124
+ }
125
+
126
+ /* ── Body ───────────────────────────────────────────────────── */
127
+
128
+ .tokis-drawer-body {
129
+ flex: 1;
130
+ overflow-y: auto;
131
+ overflow-x: hidden;
132
+ padding: var(--tokis-spacing-6);
133
+ scrollbar-width: thin;
134
+ scrollbar-color: var(--tokis-color-border) transparent;
135
+ }
136
+ .tokis-drawer-body::-webkit-scrollbar { width: 6px; }
137
+ .tokis-drawer-body::-webkit-scrollbar-track { background: transparent; }
138
+ .tokis-drawer-body::-webkit-scrollbar-thumb {
139
+ background: var(--tokis-color-border);
140
+ border-radius: var(--tokis-radius-full);
141
+ }
142
+
143
+ /* ── Footer ─────────────────────────────────────────────────── */
144
+
145
+ .tokis-drawer-footer {
146
+ flex-shrink: 0;
147
+ padding: var(--tokis-spacing-4) var(--tokis-spacing-6);
148
+ border-top: 1px solid var(--tokis-color-border);
149
+ display: flex;
150
+ gap: var(--tokis-spacing-2);
151
+ justify-content: flex-end;
152
+ }
153
+
154
+ /* ── Animations ─────────────────────────────────────────────── */
155
+
156
+ @keyframes tokis-drawer-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
157
+ @keyframes tokis-drawer-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
158
+ @keyframes tokis-drawer-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
159
+ @keyframes tokis-drawer-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
160
+
161
+ /* ── Reduced motion ─────────────────────────────────────────── */
162
+
163
+ @media (prefers-reduced-motion: reduce) {
164
+ .tokis-drawer-backdrop { animation: none; }
165
+ .tokis-drawer-content { animation: none; }
166
+ .tokis-drawer-close { transition: none; }
167
+ }
package/src/components/dropdown.css ADDED
@@ -0,0 +1,33 @@
1
+ /* ── Dropdown ────────────────────────────────────────────── */
2
+
3
+ .tokis-dropdown {
4
+ z-index: var(--tokis-z-dropdown);
5
+ background: var(--tokis-color-surface-overlay);
6
+ border: 1px solid var(--tokis-color-border);
7
+ border-radius: var(--tokis-radius-xl);
8
+ box-shadow: var(--tokis-shadow-xl);
9
+ padding: var(--tokis-spacing-2);
10
+ min-width: 160px;
11
+ max-width: 320px;
12
+ animation: tokis-dropdown-in var(--tokis-duration-fast) var(--tokis-ease-out);
13
+ outline: none;
14
+ }
15
+
16
+ @keyframes tokis-dropdown-in {
17
+ from { opacity: 0; transform: translateY(-4px) scale(0.97); }
18
+ to { opacity: 1; transform: translateY(0) scale(1); }
19
+ }
20
+
21
+ .tokis-dropdown--top-start,
22
+ .tokis-dropdown--top-end {
23
+ animation-name: tokis-dropdown-in-up;
24
+ }
25
+
26
+ @keyframes tokis-dropdown-in-up {
27
+ from { opacity: 0; transform: translateY(4px) scale(0.97); }
28
+ to { opacity: 1; transform: translateY(0) scale(1); }
29
+ }
30
+
31
+ @media (prefers-reduced-motion: reduce) {
32
+ .tokis-dropdown { animation: none; }
33
+ }
package/src/components/emptystate.css ADDED
@@ -0,0 +1,42 @@
1
+ /* ── EmptyState ──────────────────────────────────────────── */
2
+
3
+ .tokis-empty-state {
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+ text-align: center;
9
+ padding: var(--tokis-spacing-12) var(--tokis-spacing-6);
10
+ gap: var(--tokis-spacing-4);
11
+ }
12
+
13
+ .tokis-empty-state__icon {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ width: 64px;
18
+ height: 64px;
19
+ border-radius: var(--tokis-radius-xl);
20
+ background: var(--tokis-color-surface);
21
+ color: var(--tokis-text-tertiary);
22
+ border: 1px solid var(--tokis-color-border);
23
+ }
24
+
25
+ .tokis-empty-state__title {
26
+ font-size: var(--tokis-font-size-lg);
27
+ font-weight: var(--tokis-font-weight-semibold);
28
+ color: var(--tokis-text-primary);
29
+ margin: 0;
30
+ }
31
+
32
+ .tokis-empty-state__description {
33
+ font-size: var(--tokis-font-size-sm);
34
+ color: var(--tokis-text-secondary);
35
+ line-height: var(--tokis-line-height-normal);
36
+ max-width: 360px;
37
+ margin: 0;
38
+ }
39
+
40
+ .tokis-empty-state__action {
41
+ margin-top: var(--tokis-spacing-2);
42
+ }