@handamade/psi-tokens 0.4.1 → 0.5.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.
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
@layer psi.components {
|
|
2
|
+
:where(:root, [data-psi-theme]) {
|
|
3
|
+
--psi-dialog-bg: var(--psi-bg-secondary);
|
|
4
|
+
--psi-dialog-border: var(--psi-border-faint);
|
|
5
|
+
--psi-dialog-backdrop: var(--psi-scrim-heavy);
|
|
6
|
+
--psi-dialog-fg: var(--psi-fg-primary);
|
|
7
|
+
--psi-dialog-title-fg: var(--psi-fg-primary);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
@layer psi.components {
|
|
2
|
+
:where(:root, [data-psi-theme]) {
|
|
3
|
+
--psi-field-label-fg: var(--psi-fg-secondary);
|
|
4
|
+
--psi-field-message-fg: var(--psi-fg-tertiary);
|
|
5
|
+
--psi-field-error-fg: var(--psi-fg-danger);
|
|
6
|
+
--psi-field-marker-fg: var(--psi-fg-danger);
|
|
7
|
+
--psi-field-gap: var(--psi-space-6);
|
|
8
|
+
}
|
|
9
|
+
}
|
package/dist/components.css
CHANGED
|
@@ -38,6 +38,47 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
@layer psi.components {
|
|
42
|
+
:where(:root, [data-psi-theme]) {
|
|
43
|
+
--psi-card-border: var(--psi-border-faint);
|
|
44
|
+
--psi-card-bg: transparent;
|
|
45
|
+
--psi-card-gap: var(--psi-space-16);
|
|
46
|
+
--psi-card-radius: var(--psi-radius-8);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@layer psi.components {
|
|
51
|
+
:where(:root, [data-psi-theme]) {
|
|
52
|
+
--psi-checkbox-fg: var(--psi-fg-primary);
|
|
53
|
+
--psi-checkbox-box-bg: var(--psi-bg-primary);
|
|
54
|
+
--psi-checkbox-box-border: var(--psi-border-neutral);
|
|
55
|
+
--psi-checkbox-box-bg-checked: var(--psi-fill-accent);
|
|
56
|
+
--psi-checkbox-box-border-checked: var(--psi-fill-accent);
|
|
57
|
+
--psi-checkbox-check-fg: var(--psi-fg-on-accent);
|
|
58
|
+
--psi-checkbox-focus-ring: var(--psi-border-focus);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@layer psi.components {
|
|
63
|
+
:where(:root, [data-psi-theme]) {
|
|
64
|
+
--psi-dialog-bg: var(--psi-bg-secondary);
|
|
65
|
+
--psi-dialog-border: var(--psi-border-faint);
|
|
66
|
+
--psi-dialog-backdrop: var(--psi-scrim-heavy);
|
|
67
|
+
--psi-dialog-fg: var(--psi-fg-primary);
|
|
68
|
+
--psi-dialog-title-fg: var(--psi-fg-primary);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@layer psi.components {
|
|
73
|
+
:where(:root, [data-psi-theme]) {
|
|
74
|
+
--psi-field-label-fg: var(--psi-fg-secondary);
|
|
75
|
+
--psi-field-message-fg: var(--psi-fg-tertiary);
|
|
76
|
+
--psi-field-error-fg: var(--psi-fg-danger);
|
|
77
|
+
--psi-field-marker-fg: var(--psi-fg-danger);
|
|
78
|
+
--psi-field-gap: var(--psi-space-6);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
41
82
|
@layer psi.components {
|
|
42
83
|
:where(:root, [data-psi-theme]) {
|
|
43
84
|
--psi-input-bg: var(--psi-bg-primary);
|
|
@@ -50,6 +91,24 @@
|
|
|
50
91
|
}
|
|
51
92
|
}
|
|
52
93
|
|
|
94
|
+
@layer psi.components {
|
|
95
|
+
:where(:root, [data-psi-theme]) {
|
|
96
|
+
--psi-media-tint: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@layer psi.components {
|
|
101
|
+
:where(:root, [data-psi-theme]) {
|
|
102
|
+
--psi-navbar-height: 4rem;
|
|
103
|
+
--psi-navbar-bg: var(--psi-scrim-heavy);
|
|
104
|
+
--psi-navbar-blur: 12px;
|
|
105
|
+
--psi-navbar-border: var(--psi-border-faint);
|
|
106
|
+
--psi-navbar-link-fg: var(--psi-fg-secondary);
|
|
107
|
+
--psi-navbar-link-fg-hover: var(--psi-fg-primary);
|
|
108
|
+
--psi-navbar-focus-ring: var(--psi-border-focus);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
53
112
|
@layer psi.components {
|
|
54
113
|
:where(:root, [data-psi-theme]) {
|
|
55
114
|
--psi-select-bg: var(--psi-bg-primary);
|
|
@@ -63,18 +122,6 @@
|
|
|
63
122
|
}
|
|
64
123
|
}
|
|
65
124
|
|
|
66
|
-
@layer psi.components {
|
|
67
|
-
:where(:root, [data-psi-theme]) {
|
|
68
|
-
--psi-checkbox-fg: var(--psi-fg-primary);
|
|
69
|
-
--psi-checkbox-box-bg: var(--psi-bg-primary);
|
|
70
|
-
--psi-checkbox-box-border: var(--psi-border-neutral);
|
|
71
|
-
--psi-checkbox-box-bg-checked: var(--psi-fill-accent);
|
|
72
|
-
--psi-checkbox-box-border-checked: var(--psi-fill-accent);
|
|
73
|
-
--psi-checkbox-check-fg: var(--psi-fg-on-accent);
|
|
74
|
-
--psi-checkbox-focus-ring: var(--psi-border-focus);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
125
|
@layer psi.components {
|
|
79
126
|
:where(:root, [data-psi-theme]) {
|
|
80
127
|
--psi-switch-fg: var(--psi-fg-primary);
|
|
@@ -117,30 +164,3 @@
|
|
|
117
164
|
--psi-tooltip-fg: var(--psi-bg-primary);
|
|
118
165
|
}
|
|
119
166
|
}
|
|
120
|
-
|
|
121
|
-
@layer psi.components {
|
|
122
|
-
:where(:root, [data-psi-theme]) {
|
|
123
|
-
--psi-card-border: var(--psi-border-faint);
|
|
124
|
-
--psi-card-bg: transparent;
|
|
125
|
-
--psi-card-gap: var(--psi-space-16);
|
|
126
|
-
--psi-card-radius: var(--psi-radius-8);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
@layer psi.components {
|
|
131
|
-
:where(:root, [data-psi-theme]) {
|
|
132
|
-
--psi-navbar-height: 4rem;
|
|
133
|
-
--psi-navbar-bg: var(--psi-scrim-heavy);
|
|
134
|
-
--psi-navbar-blur: 12px;
|
|
135
|
-
--psi-navbar-border: var(--psi-border-faint);
|
|
136
|
-
--psi-navbar-link-fg: var(--psi-fg-secondary);
|
|
137
|
-
--psi-navbar-link-fg-hover: var(--psi-fg-primary);
|
|
138
|
-
--psi-navbar-focus-ring: var(--psi-border-focus);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
@layer psi.components {
|
|
143
|
-
:where(:root, [data-psi-theme]) {
|
|
144
|
-
--psi-media-tint: none;
|
|
145
|
-
}
|
|
146
|
-
}
|
package/dist/guidance.json
CHANGED
|
@@ -52,7 +52,9 @@
|
|
|
52
52
|
"Sizes are px numbers (24|32|40|48), never S/M/L.",
|
|
53
53
|
"Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.",
|
|
54
54
|
"Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.",
|
|
55
|
-
"--psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono)."
|
|
55
|
+
"--psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).",
|
|
56
|
+
"Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.",
|
|
57
|
+
"Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group."
|
|
56
58
|
],
|
|
57
59
|
"states": {
|
|
58
60
|
"hover": "L - 0.04",
|