@skra/tokens 0.2.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 (55) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +7 -0
  3. package/README.md +64 -0
  4. package/brutal/_baseline.scss +22 -0
  5. package/brutal/_comp.scss +985 -0
  6. package/brutal/_density.comfortable.scoped.scss +166 -0
  7. package/brutal/_density.comfortable.scss +166 -0
  8. package/brutal/_density.compact.scoped.scss +166 -0
  9. package/brutal/_density.compact.scss +166 -0
  10. package/brutal/_theme.dark.scoped.scss +707 -0
  11. package/brutal/_theme.dark.scss +708 -0
  12. package/brutal/_theme.scoped.scss +1289 -0
  13. package/brutal/_theme.scss +451 -0
  14. package/brutal/skin.config.json +40 -0
  15. package/manifests/accordion.json +52 -0
  16. package/manifests/alert.json +107 -0
  17. package/manifests/avatar.json +78 -0
  18. package/manifests/badge.json +63 -0
  19. package/manifests/box.json +34 -0
  20. package/manifests/button.json +133 -0
  21. package/manifests/chip.json +116 -0
  22. package/manifests/combobox.json +141 -0
  23. package/manifests/datepicker.json +159 -0
  24. package/manifests/dialog.json +104 -0
  25. package/manifests/field.json +267 -0
  26. package/manifests/grid.json +61 -0
  27. package/manifests/icon.json +43 -0
  28. package/manifests/kbd.json +68 -0
  29. package/manifests/link.json +107 -0
  30. package/manifests/menu.json +122 -0
  31. package/manifests/popover.json +104 -0
  32. package/manifests/progress.json +69 -0
  33. package/manifests/select.json +177 -0
  34. package/manifests/skeleton.json +43 -0
  35. package/manifests/stack.json +34 -0
  36. package/manifests/star-rating.json +96 -0
  37. package/manifests/status-dot.json +69 -0
  38. package/manifests/tabs.json +52 -0
  39. package/manifests/toast.json +133 -0
  40. package/manifests/tooltip.json +113 -0
  41. package/manifests/typography.json +169 -0
  42. package/overlays/brand-jade.scss +9 -0
  43. package/overlays/round-corners.scss +8 -0
  44. package/overlays/square-corners.scss +8 -0
  45. package/package.json +19 -0
  46. package/skra/_baseline.scss +22 -0
  47. package/skra/_comp.scss +981 -0
  48. package/skra/_density.comfortable.scss +166 -0
  49. package/skra/_density.compact.scss +166 -0
  50. package/skra/_form-controls.scss +74 -0
  51. package/skra/_overlay.scss +42 -0
  52. package/skra/_theme.dark.scss +698 -0
  53. package/skra/_theme.scss +448 -0
  54. package/skra/skin.config.json +37 -0
  55. package/skra/utilities.scss +38 -0
package/brutal/_density.comfortable.scoped.scss ADDED
@@ -0,0 +1,166 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-skra-skin="brutal"][data-skra-density="comfortable"] {
6
+ --skra-sys-size-interactive-sm: 2rem;
7
+ --skra-sys-size-interactive-md: 2.5rem;
8
+ --skra-sys-size-interactive-lg: 3rem;
9
+ --skra-sys-spacing-1: var(--skra-ref-spacing-1);
10
+ --skra-sys-spacing-2: var(--skra-ref-spacing-2);
11
+ --skra-sys-spacing-3: var(--skra-ref-spacing-3);
12
+ --skra-sys-spacing-4: var(--skra-ref-spacing-4);
13
+ --skra-sys-spacing-6: var(--skra-ref-spacing-6);
14
+ --skra-sys-spacing-8: var(--skra-ref-spacing-8);
15
+ --skra-sys-size-icon-sm: var(--skra-ref-spacing-4);
16
+ --skra-sys-size-icon-md: var(--skra-ref-spacing-6);
17
+ --skra-sys-size-icon-lg: var(--skra-ref-spacing-8);
18
+ --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
19
+ --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
20
+ --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
21
+ --skra-sys-font-size-hint: var(--skra-ref-font-size-sm);
22
+ --skra-sys-font-size-body: var(--skra-ref-font-size-md);
23
+ --skra-sys-font-size-label: var(--skra-ref-font-size-md);
24
+ }
25
+
26
+ [data-skra-skin="brutal"][data-skra-density="comfortable"] {
27
+ --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
28
+ --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
29
+ --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
30
+ --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
31
+ --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
32
+ --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
33
+ --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
34
+ --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
+ --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
+ --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
+ --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
+ --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
40
+ --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
41
+ --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
42
+ --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
43
+ --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
44
+ --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
45
+ --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
46
+ --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
47
+ --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
48
+ --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
49
+ --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
50
+ --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
51
+ --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
52
+ --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
53
+ --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
54
+ --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
55
+ --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
56
+ --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
57
+ --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
58
+ --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
59
+ --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
60
+ --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
61
+ --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
62
+ --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
63
+ --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
64
+ --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
65
+ --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
66
+ --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
67
+ --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
68
+ --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
69
+ --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
70
+ --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
71
+ --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
72
+ --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
73
+ --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
74
+ --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
75
+ --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
76
+ --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
77
+ --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
78
+ --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
79
+ --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
+ --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
+ --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
+ --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
83
+ --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
+ --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
+ --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
86
+ --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
87
+ --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
88
+ --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
89
+ --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
90
+ --skra-comp-field-gap: var(--skra-sys-spacing-2);
91
+ --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
92
+ --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
93
+ --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
94
+ --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
95
+ --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
96
+ --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
97
+ --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
98
+ --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
99
+ --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
100
+ --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
+ --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
+ --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
+ --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
+ --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
106
+ --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
107
+ --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
108
+ --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
109
+ --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
110
+ --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
111
+ --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
112
+ --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
113
+ --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
114
+ --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
115
+ --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
116
+ --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
117
+ --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
118
+ --skra-comp-menu-offset: var(--skra-sys-spacing-2);
119
+ --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
120
+ --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
121
+ --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
122
+ --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
123
+ --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
124
+ --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
125
+ --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
126
+ --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
127
+ --skra-comp-popover-offset: var(--skra-sys-spacing-2);
128
+ --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
129
+ --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
130
+ --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
131
+ --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
132
+ --skra-comp-select-gap: var(--skra-sys-spacing-2);
133
+ --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
134
+ --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
135
+ --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
136
+ --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
137
+ --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
138
+ --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
139
+ --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
140
+ --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
141
+ --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
142
+ --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
143
+ --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
144
+ --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
145
+ --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
+ --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
+ --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
+ --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
151
+ --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
152
+ --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
153
+ --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
154
+ --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
155
+ --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
156
+ --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
157
+ --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
158
+ --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
159
+ --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
160
+ --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
161
+ --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
162
+ --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
163
+ --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
164
+ --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
165
+ --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
166
+ }
package/brutal/_density.comfortable.scss ADDED
@@ -0,0 +1,166 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-skra-density="comfortable"] {
6
+ --skra-sys-size-interactive-sm: 2rem;
7
+ --skra-sys-size-interactive-md: 2.5rem;
8
+ --skra-sys-size-interactive-lg: 3rem;
9
+ --skra-sys-spacing-1: var(--skra-ref-spacing-1);
10
+ --skra-sys-spacing-2: var(--skra-ref-spacing-2);
11
+ --skra-sys-spacing-3: var(--skra-ref-spacing-3);
12
+ --skra-sys-spacing-4: var(--skra-ref-spacing-4);
13
+ --skra-sys-spacing-6: var(--skra-ref-spacing-6);
14
+ --skra-sys-spacing-8: var(--skra-ref-spacing-8);
15
+ --skra-sys-size-icon-sm: var(--skra-ref-spacing-4);
16
+ --skra-sys-size-icon-md: var(--skra-ref-spacing-6);
17
+ --skra-sys-size-icon-lg: var(--skra-ref-spacing-8);
18
+ --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
19
+ --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
20
+ --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
21
+ --skra-sys-font-size-hint: var(--skra-ref-font-size-sm);
22
+ --skra-sys-font-size-body: var(--skra-ref-font-size-md);
23
+ --skra-sys-font-size-label: var(--skra-ref-font-size-md);
24
+ }
25
+
26
+ [data-skra-density="comfortable"] {
27
+ --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
28
+ --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
29
+ --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
30
+ --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
31
+ --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
32
+ --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
33
+ --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
34
+ --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
+ --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
+ --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
+ --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
+ --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
40
+ --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
41
+ --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
42
+ --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
43
+ --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
44
+ --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
45
+ --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
46
+ --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
47
+ --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
48
+ --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
49
+ --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
50
+ --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
51
+ --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
52
+ --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
53
+ --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
54
+ --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
55
+ --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
56
+ --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
57
+ --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
58
+ --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
59
+ --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
60
+ --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
61
+ --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
62
+ --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
63
+ --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
64
+ --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
65
+ --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
66
+ --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
67
+ --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
68
+ --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
69
+ --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
70
+ --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
71
+ --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
72
+ --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
73
+ --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
74
+ --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
75
+ --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
76
+ --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
77
+ --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
78
+ --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
79
+ --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
+ --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
+ --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
+ --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
83
+ --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
+ --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
+ --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
86
+ --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
87
+ --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
88
+ --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
89
+ --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
90
+ --skra-comp-field-gap: var(--skra-sys-spacing-2);
91
+ --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
92
+ --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
93
+ --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
94
+ --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
95
+ --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
96
+ --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
97
+ --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
98
+ --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
99
+ --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
100
+ --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
+ --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
+ --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
+ --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
+ --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
106
+ --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
107
+ --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
108
+ --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
109
+ --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
110
+ --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
111
+ --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
112
+ --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
113
+ --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
114
+ --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
115
+ --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
116
+ --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
117
+ --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
118
+ --skra-comp-menu-offset: var(--skra-sys-spacing-2);
119
+ --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
120
+ --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
121
+ --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
122
+ --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
123
+ --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
124
+ --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
125
+ --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
126
+ --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
127
+ --skra-comp-popover-offset: var(--skra-sys-spacing-2);
128
+ --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
129
+ --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
130
+ --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
131
+ --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
132
+ --skra-comp-select-gap: var(--skra-sys-spacing-2);
133
+ --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
134
+ --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
135
+ --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
136
+ --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
137
+ --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
138
+ --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
139
+ --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
140
+ --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
141
+ --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
142
+ --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
143
+ --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
144
+ --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
145
+ --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
+ --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
+ --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
+ --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
151
+ --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
152
+ --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
153
+ --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
154
+ --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
155
+ --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
156
+ --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
157
+ --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
158
+ --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
159
+ --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
160
+ --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
161
+ --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
162
+ --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
163
+ --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
164
+ --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
165
+ --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
166
+ }
package/brutal/_density.compact.scoped.scss ADDED
@@ -0,0 +1,166 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-skra-skin="brutal"][data-skra-density="compact"] {
6
+ --skra-sys-size-interactive-sm: 1.5rem;
7
+ --skra-sys-size-interactive-md: 2rem;
8
+ --skra-sys-size-interactive-lg: 2.5rem;
9
+ --skra-sys-spacing-1: var(--skra-ref-spacing-1);
10
+ --skra-sys-spacing-2: var(--skra-ref-spacing-1);
11
+ --skra-sys-spacing-3: var(--skra-ref-spacing-1);
12
+ --skra-sys-spacing-4: var(--skra-ref-spacing-2);
13
+ --skra-sys-spacing-6: var(--skra-ref-spacing-3);
14
+ --skra-sys-spacing-8: var(--skra-ref-spacing-4);
15
+ --skra-sys-size-icon-sm: var(--skra-ref-spacing-2);
16
+ --skra-sys-size-icon-md: var(--skra-ref-spacing-3);
17
+ --skra-sys-size-icon-lg: var(--skra-ref-spacing-4);
18
+ --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
19
+ --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
20
+ --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
21
+ --skra-sys-font-size-hint: var(--skra-ref-font-size-xs);
22
+ --skra-sys-font-size-body: var(--skra-ref-font-size-sm);
23
+ --skra-sys-font-size-label: var(--skra-ref-font-size-xs);
24
+ }
25
+
26
+ [data-skra-skin="brutal"][data-skra-density="compact"] {
27
+ --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
28
+ --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
29
+ --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
30
+ --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
31
+ --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
32
+ --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
33
+ --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
34
+ --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
+ --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
+ --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
+ --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
+ --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
40
+ --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
41
+ --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
42
+ --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
43
+ --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
44
+ --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
45
+ --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
46
+ --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
47
+ --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
48
+ --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
49
+ --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
50
+ --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
51
+ --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
52
+ --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
53
+ --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
54
+ --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
55
+ --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
56
+ --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
57
+ --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
58
+ --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
59
+ --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
60
+ --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
61
+ --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
62
+ --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
63
+ --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
64
+ --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
65
+ --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
66
+ --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
67
+ --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
68
+ --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
69
+ --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
70
+ --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
71
+ --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
72
+ --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
73
+ --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
74
+ --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
75
+ --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
76
+ --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
77
+ --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
78
+ --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
79
+ --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
+ --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
+ --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
+ --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
83
+ --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
+ --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
+ --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
86
+ --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
87
+ --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
88
+ --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
89
+ --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
90
+ --skra-comp-field-gap: var(--skra-sys-spacing-2);
91
+ --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
92
+ --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
93
+ --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
94
+ --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
95
+ --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
96
+ --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
97
+ --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
98
+ --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
99
+ --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
100
+ --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
+ --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
+ --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
+ --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
+ --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
106
+ --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
107
+ --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
108
+ --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
109
+ --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
110
+ --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
111
+ --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
112
+ --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
113
+ --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
114
+ --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
115
+ --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
116
+ --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
117
+ --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
118
+ --skra-comp-menu-offset: var(--skra-sys-spacing-2);
119
+ --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
120
+ --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
121
+ --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
122
+ --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
123
+ --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
124
+ --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
125
+ --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
126
+ --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
127
+ --skra-comp-popover-offset: var(--skra-sys-spacing-2);
128
+ --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
129
+ --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
130
+ --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
131
+ --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
132
+ --skra-comp-select-gap: var(--skra-sys-spacing-2);
133
+ --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
134
+ --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
135
+ --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
136
+ --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
137
+ --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
138
+ --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
139
+ --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
140
+ --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
141
+ --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
142
+ --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
143
+ --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
144
+ --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
145
+ --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
+ --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
+ --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
+ --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
151
+ --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
152
+ --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
153
+ --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
154
+ --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
155
+ --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
156
+ --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
157
+ --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
158
+ --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
159
+ --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
160
+ --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
161
+ --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
162
+ --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
163
+ --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
164
+ --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
165
+ --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
166
+ }