@tokis/theme 1.0.1 → 1.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 (28) hide show
  1. package/README.md +11 -11
  2. package/package.json +1 -1
  3. package/src/components/accordion.css +5 -5
  4. package/src/components/alert.css +14 -14
  5. package/src/components/app-bar.css +1 -1
  6. package/src/components/avatar.css +5 -5
  7. package/src/components/bottom-nav.css +1 -1
  8. package/src/components/button.css +9 -3
  9. package/src/components/card.css +2 -2
  10. package/src/components/codeblock.css +3 -3
  11. package/src/components/command-palette.css +1 -1
  12. package/src/components/context-menu.css +1 -1
  13. package/src/components/datagrid.css +268 -0
  14. package/src/components/datepicker.css +314 -0
  15. package/src/components/drawer.css +12 -14
  16. package/src/components/extended.css +43 -21
  17. package/src/components/index.css +2 -0
  18. package/src/components/input.css +9 -6
  19. package/src/components/nav-rail.css +2 -2
  20. package/src/components/navigation.css +3 -3
  21. package/src/components/search-field.css +5 -4
  22. package/src/components/select.css +1 -1
  23. package/src/components/snackbar.css +12 -12
  24. package/src/components/switch.css +11 -2
  25. package/src/components/tabs.css +9 -6
  26. package/src/components/toggle.css +2 -2
  27. package/src/components/tooltip.css +2 -2
  28. package/src/components/treeview.css +1 -1
package/src/components/snackbar.css CHANGED
@@ -8,7 +8,7 @@
8
8
  .tokis-snackbar-container {
9
9
  position: fixed;
10
10
  bottom: var(--tokis-spacing-6);
11
- right: var(--tokis-spacing-6);
11
+ inset-inline-end: var(--tokis-spacing-6);
12
12
  z-index: var(--tokis-z-toast);
13
13
  display: flex;
14
14
  flex-direction: column;
@@ -20,12 +20,12 @@
20
20
 
21
21
  /* Placement variants */
22
22
  .tokis-snackbar-container--bottom-left {
23
- right: auto;
24
- left: var(--tokis-spacing-6);
23
+ inset-inline-end: auto;
24
+ inset-inline-start: var(--tokis-spacing-6);
25
25
  }
26
26
 
27
27
  .tokis-snackbar-container--bottom-center {
28
- right: auto;
28
+ inset-inline-end: auto;
29
29
  left: 50%;
30
30
  transform: translateX(-50%);
31
31
  }
@@ -38,7 +38,7 @@
38
38
  .tokis-snackbar-container--top-center {
39
39
  bottom: auto;
40
40
  top: var(--tokis-spacing-6);
41
- right: auto;
41
+ inset-inline-end: auto;
42
42
  left: 50%;
43
43
  transform: translateX(-50%);
44
44
  }
@@ -55,7 +55,7 @@
55
55
  min-width: 280px;
56
56
  box-shadow: var(--tokis-shadow-xl);
57
57
  border: 1px solid;
58
- border-left: 3px solid transparent;
58
+ border-inline-start: 3px solid transparent;
59
59
  animation: tokis-snackbar-in var(--tokis-duration-normal) var(--tokis-ease-spring) both;
60
60
 
61
61
  /* Glass-effect dark surface for light theme */
@@ -78,42 +78,42 @@
78
78
  .tokis-snackbar--success {
79
79
  background: rgba(17, 24, 39, 0.97);
80
80
  border-color: rgba(255, 255, 255, 0.08);
81
- border-left-color: var(--tokis-color-success);
81
+ border-inline-start-color: var(--tokis-color-success);
82
82
  color: var(--tokis-color-neutral-100);
83
83
  }
84
84
 
85
85
  [data-theme='dark'] .tokis-snackbar--success {
86
86
  background: rgba(249, 250, 251, 0.97);
87
87
  border-color: rgba(0, 0, 0, 0.08);
88
- border-left-color: var(--tokis-color-success);
88
+ border-inline-start-color: var(--tokis-color-success);
89
89
  color: var(--tokis-color-neutral-900);
90
90
  }
91
91
 
92
92
  .tokis-snackbar--error {
93
93
  background: rgba(17, 24, 39, 0.97);
94
94
  border-color: rgba(255, 255, 255, 0.08);
95
- border-left-color: var(--tokis-color-error);
95
+ border-inline-start-color: var(--tokis-color-error);
96
96
  color: var(--tokis-color-neutral-100);
97
97
  }
98
98
 
99
99
  [data-theme='dark'] .tokis-snackbar--error {
100
100
  background: rgba(249, 250, 251, 0.97);
101
101
  border-color: rgba(0, 0, 0, 0.08);
102
- border-left-color: var(--tokis-color-error);
102
+ border-inline-start-color: var(--tokis-color-error);
103
103
  color: var(--tokis-color-neutral-900);
104
104
  }
105
105
 
106
106
  .tokis-snackbar--warning {
107
107
  background: rgba(17, 24, 39, 0.97);
108
108
  border-color: rgba(255, 255, 255, 0.08);
109
- border-left-color: var(--tokis-color-warning);
109
+ border-inline-start-color: var(--tokis-color-warning);
110
110
  color: var(--tokis-color-neutral-100);
111
111
  }
112
112
 
113
113
  [data-theme='dark'] .tokis-snackbar--warning {
114
114
  background: rgba(249, 250, 251, 0.97);
115
115
  border-color: rgba(0, 0, 0, 0.08);
116
- border-left-color: var(--tokis-color-warning);
116
+ border-inline-start-color: var(--tokis-color-warning);
117
117
  color: var(--tokis-color-neutral-900);
118
118
  }
119
119
 
package/src/components/switch.css CHANGED
@@ -45,7 +45,7 @@
45
45
  .tokis-switch-thumb {
46
46
  position: absolute;
47
47
  top: 3px;
48
- left: 3px;
48
+ inset-inline-start: 3px;
49
49
  width: 18px;
50
50
  height: 18px;
51
51
  border-radius: var(--tokis-radius-full);
@@ -69,7 +69,7 @@
69
69
  width: 12px;
70
70
  height: 12px;
71
71
  top: 3px;
72
- left: 3px;
72
+ inset-inline-start: 3px;
73
73
  }
74
74
  .tokis-switch-root--sm .tokis-switch-track[data-checked="true"] .tokis-switch-thumb {
75
75
  transform: translateX(14px);
@@ -97,6 +97,15 @@
97
97
  line-height: 1.4;
98
98
  }
99
99
 
100
+ /* ── RTL ─────────────────────────────────────────────────────── */
101
+
102
+ [dir="rtl"] .tokis-switch-track[data-checked="true"] .tokis-switch-thumb {
103
+ transform: translateX(-20px);
104
+ }
105
+ [dir="rtl"] .tokis-switch-root--sm .tokis-switch-track[data-checked="true"] .tokis-switch-thumb {
106
+ transform: translateX(-14px);
107
+ }
108
+
100
109
  /* ── Reduced motion ─────────────────────────────────────────── */
101
110
 
102
111
  @media (prefers-reduced-motion: reduce) {
package/src/components/tabs.css CHANGED
@@ -28,7 +28,7 @@
28
28
  .tokis-tabs-root--vertical .tokis-tabs-list {
29
29
  flex-direction: column;
30
30
  border-bottom: none;
31
- border-right: 1px solid var(--tokis-color-border);
31
+ border-inline-end: 1px solid var(--tokis-color-border);
32
32
  align-items: flex-start;
33
33
  min-width: 160px;
34
34
  overflow-x: visible;
@@ -112,15 +112,18 @@
112
112
  /* Vertical trigger */
113
113
  .tokis-tabs-root--vertical .tokis-tabs-trigger {
114
114
  border-bottom: none;
115
- border-right: 2px solid transparent;
116
- border-radius: var(--tokis-radius-md) 0 0 var(--tokis-radius-md);
115
+ border-inline-end: 2px solid transparent;
116
+ border-start-start-radius: var(--tokis-radius-md);
117
+ border-end-start-radius: var(--tokis-radius-md);
118
+ border-start-end-radius: 0;
119
+ border-end-end-radius: 0;
117
120
  margin-bottom: 0;
118
- margin-right: -1px;
121
+ margin-inline-end: -1px;
119
122
  width: 100%;
120
123
  justify-content: flex-start;
121
124
  }
122
125
  .tokis-tabs-root--vertical .tokis-tabs-trigger[data-active="true"] {
123
- border-right-color: var(--tokis-color-primary);
126
+ border-inline-end-color: var(--tokis-color-primary);
124
127
  background: var(--tokis-color-primary-subtle);
125
128
  color: var(--tokis-color-primary);
126
129
  }
@@ -133,7 +136,7 @@
133
136
  animation: tokis-tab-fade-in var(--tokis-duration-fast) var(--tokis-ease-out);
134
137
  }
135
138
  .tokis-tabs-root--vertical .tokis-tabs-panel {
136
- padding: 0 0 0 var(--tokis-spacing-6);
139
+ padding-inline-start: var(--tokis-spacing-6);
137
140
  flex: 1;
138
141
  animation: none;
139
142
  }
package/src/components/toggle.css CHANGED
@@ -62,7 +62,7 @@
62
62
  gap: var(--tokis-spacing-2);
63
63
  background: var(--tokis-color-surface);
64
64
  border: none;
65
- border-right: 1px solid var(--tokis-color-border);
65
+ border-inline-end: 1px solid var(--tokis-color-border);
66
66
  color: var(--tokis-text-secondary);
67
67
  font-size: var(--tokis-font-size-sm);
68
68
  font-weight: var(--tokis-font-weight-medium);
@@ -71,7 +71,7 @@
71
71
  transition: all var(--tokis-duration-fast) var(--tokis-ease-out);
72
72
  }
73
73
 
74
- .tokis-toggle-group__item:last-child { border-right: none; }
74
+ .tokis-toggle-group__item:last-child { border-inline-end: none; }
75
75
 
76
76
  .tokis-toggle-group__item--sm { padding: 4px var(--tokis-spacing-2); font-size: var(--tokis-font-size-xs); }
77
77
  .tokis-toggle-group__item--md { padding: var(--tokis-spacing-2) var(--tokis-spacing-3); }
package/src/components/tooltip.css CHANGED
@@ -55,7 +55,7 @@
55
55
  font-weight: var(--tokis-font-weight-semibold);
56
56
  color: var(--tokis-text-primary);
57
57
  margin-bottom: var(--tokis-spacing-1);
58
- padding-right: var(--tokis-spacing-6);
58
+ padding-inline-end: var(--tokis-spacing-6);
59
59
  }
60
60
 
61
61
  .tokis-popover-description {
@@ -67,7 +67,7 @@
67
67
  .tokis-popover-close {
68
68
  position: absolute;
69
69
  top: var(--tokis-spacing-3);
70
- right: var(--tokis-spacing-3);
70
+ inset-inline-end: var(--tokis-spacing-3);
71
71
  display: flex;
72
72
  align-items: center;
73
73
  justify-content: center;
package/src/components/treeview.css CHANGED
@@ -19,7 +19,7 @@
19
19
  gap: var(--tokis-spacing-2);
20
20
  padding-top: var(--tokis-spacing-1);
21
21
  padding-bottom: var(--tokis-spacing-1);
22
- padding-right: var(--tokis-spacing-2);
22
+ padding-inline-end: var(--tokis-spacing-2);
23
23
  border-radius: var(--tokis-radius-md);
24
24
  cursor: pointer;
25
25
  outline: none;