@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc09
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.
- package/CHANGELOG.md +513 -411
- package/README.md +40 -11
- package/dist/css/base.css +133 -67
- package/dist/css/component-reset.css +27 -0
- package/dist/css/pure-css.css +157 -79
- package/package.json +83 -81
- package/src/js/fit.js +5 -2
- package/src/scss/_base-css-variables.scss +429 -655
- package/src/scss/_fit-flyout.scss +1 -1
- package/src/scss/_layout-container.scss +168 -168
- package/src/scss/_navbar-elements.scss +11 -2
- package/src/scss/_resize-handle.scss +1 -1
- package/src/scss/_sidebar-states.scss +2 -2
- package/src/scss/_sidebar.scss +21 -6
- package/src/scss/component-reset.scss +65 -0
- package/src/scss/reboot.scss +134 -134
- package/src/scss/scrollbars.scss +48 -48
- package/src/scss/variables/_base.scss +150 -38
- package/src/scss/variables/_colors.scss +208 -237
- package/src/scss/variables/_index.scss +27 -23
- package/src/scss/variables/_system.scss +19 -23
- package/src/scss/variables/_components.scss +0 -840
|
@@ -1,840 +0,0 @@
|
|
|
1
|
-
// ============================================================================
|
|
2
|
-
// COMPONENT VARIABLES
|
|
3
|
-
// Component-specific dimensions, paddings, and settings
|
|
4
|
-
// ============================================================================
|
|
5
|
-
|
|
6
|
-
// NOTE: All base, layout, typography, spacing, colors, and system variables
|
|
7
|
-
// are available in global scope via @import in _index.scss
|
|
8
|
-
// No @use needed since we use @import for proper !default cascading
|
|
9
|
-
|
|
10
|
-
// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
|
|
11
|
-
|
|
12
|
-
// ============================================================================
|
|
13
|
-
// BADGE SYSTEM
|
|
14
|
-
// ============================================================================
|
|
15
|
-
$badge-padding-v: 0.2rem !default; // 2px (was 0.125rem)
|
|
16
|
-
$badge-padding-h: 0.8rem !default; // 8px (was 0.5rem)
|
|
17
|
-
|
|
18
|
-
// Composite badge dimensions
|
|
19
|
-
$composite-badge-icon-width: 3.2rem !default; // 32px (was 2rem)
|
|
20
|
-
$composite-badge-height: 2.8rem !default; // 28px (was 1.75rem)
|
|
21
|
-
$composite-badge-label-padding: 0.8rem !default; // 8px (was 0.5rem)
|
|
22
|
-
$composite-badge-button-width: 2.4rem !default; // 24px (was 1.5rem)
|
|
23
|
-
$composite-badge-min-label-width: 4.8rem !default; // 48px (was 3rem)
|
|
24
|
-
|
|
25
|
-
// Badge group
|
|
26
|
-
$badge-group-gap: 0.8rem !default; // 8px (was 0.5rem)
|
|
27
|
-
$badge-group-visible-limit: 5 !default;
|
|
28
|
-
|
|
29
|
-
// Badge colors
|
|
30
|
-
$badge-success-bg: $success-text-light !default;
|
|
31
|
-
$badge-success-text: $success-text !default;
|
|
32
|
-
$badge-warning-bg: $warning-text-light !default;
|
|
33
|
-
$badge-warning-text: $warning-text !default;
|
|
34
|
-
$badge-info-bg: $info-text-light !default;
|
|
35
|
-
$badge-info-text: $info-text !default;
|
|
36
|
-
$badge-danger-bg: $danger-text-light !default;
|
|
37
|
-
$badge-danger-text: $danger-text !default;
|
|
38
|
-
$badge-pill-radius: 50rem !default;
|
|
39
|
-
|
|
40
|
-
// Composite badge colors
|
|
41
|
-
$composite-badge-icon-bg: $btn-secondary-bg !default;
|
|
42
|
-
$composite-badge-label-bg: $secondary-light-bg !default;
|
|
43
|
-
$composite-badge-label-text: $secondary-light-text !default;
|
|
44
|
-
$composite-badge-label-hover-bg: $secondary-lighter-bg !default;
|
|
45
|
-
|
|
46
|
-
// ============================================================================
|
|
47
|
-
// BUTTON SYSTEM
|
|
48
|
-
// ============================================================================
|
|
49
|
-
$btn-group-gap: 0.3rem !default; // 3px - default gap (use gap-* utilities for other sizes)
|
|
50
|
-
|
|
51
|
-
// Button specific - vertical padding matches input padding for height alignment
|
|
52
|
-
$btn-padding-v: 0.8rem !default; // 8px - matches input default
|
|
53
|
-
$btn-padding-h: 1.2rem !default; // 12px
|
|
54
|
-
$btn-padding-xs-v: 0.6rem !default; // 6px - matches input-xs
|
|
55
|
-
$btn-padding-xs-h: 0.8rem !default; // 8px
|
|
56
|
-
$btn-padding-sm-v: 0.8rem !default; // 8px - matches input default
|
|
57
|
-
$btn-padding-sm-h: 1rem !default; // 10px
|
|
58
|
-
$btn-padding-lg-v: 0.8rem !default; // 8px - matches input default
|
|
59
|
-
$btn-padding-lg-h: 1.4rem !default; // 14px
|
|
60
|
-
$btn-padding-xl-v: 0.8rem !default; // 8px - matches input default
|
|
61
|
-
$btn-padding-xl-h: 1.6rem !default; // 16px
|
|
62
|
-
$btn-border-width: 1px !default;
|
|
63
|
-
$btn-icon-margin: 0.8rem !default; // 8px (was 0.5rem)
|
|
64
|
-
$btn-min-width: 9.6rem !default; // 96px (was 6rem)
|
|
65
|
-
|
|
66
|
-
// Button fixed-width utilities (10px base)
|
|
67
|
-
$btn-width-1x: 1.6rem !default; // 16px (was 1rem)
|
|
68
|
-
$btn-width-2x: 3.2rem !default; // 32px (was 2rem)
|
|
69
|
-
$btn-width-3x: 4.8rem !default; // 48px (was 3rem)
|
|
70
|
-
$btn-width-4x: 6.4rem !default; // 64px (was 4rem)
|
|
71
|
-
$btn-width-5x: 8rem !default; // 80px (was 5rem)
|
|
72
|
-
$btn-width-6x: 9.6rem !default; // 96px (was 6rem)
|
|
73
|
-
$btn-width-7x: 11.2rem !default; // 112px (was 7rem)
|
|
74
|
-
$btn-width-8x: 12.8rem !default; // 128px (was 8rem)
|
|
75
|
-
$btn-width-9x: 14.4rem !default; // 144px (was 9rem)
|
|
76
|
-
$btn-width-10x: 16rem !default; // 160px (was 10rem)
|
|
77
|
-
|
|
78
|
-
// Button interaction
|
|
79
|
-
$btn-hover-lift: -1px !default;
|
|
80
|
-
$btn-hover-brightness: 0.9 !default;
|
|
81
|
-
$btn-disabled-opacity: $opacity-disabled !default;
|
|
82
|
-
$btn-focus-ring-opacity: 0.25 !default;
|
|
83
|
-
|
|
84
|
-
// Button heights - aligned with input heights (source of truth from _base.scss)
|
|
85
|
-
// These are used for icon-only buttons and table cell heights
|
|
86
|
-
$btn-height-xs: #{$base-input-size-xs-height}rem !default; // 31px
|
|
87
|
-
$btn-height-sm: #{$base-input-size-sm-height}rem !default; // 33px
|
|
88
|
-
$btn-height-base: #{$base-input-size-md-height}rem !default; // 35px
|
|
89
|
-
$btn-height-lg: #{$base-input-size-lg-height}rem !default; // 38px
|
|
90
|
-
$btn-height-xl: #{$base-input-size-xl-height}rem !default; // 41px
|
|
91
|
-
|
|
92
|
-
// Icon-only button sizes - match button heights (aligned with inputs)
|
|
93
|
-
$btn-icon-only-size-xs: $btn-height-xs !default;
|
|
94
|
-
$btn-icon-only-size-sm: $btn-height-sm !default;
|
|
95
|
-
$btn-icon-only-size: $btn-height-base !default;
|
|
96
|
-
$btn-icon-only-size-lg: $btn-height-lg !default;
|
|
97
|
-
$btn-icon-only-size-xl: $btn-height-xl !default;
|
|
98
|
-
|
|
99
|
-
// ============================================================================
|
|
100
|
-
// MODAL SYSTEM
|
|
101
|
-
// ============================================================================
|
|
102
|
-
$modal-overlay-bg: rgba(0, 0, 0, 0.5) !default;
|
|
103
|
-
$modal-content-bg: #ffffff !default;
|
|
104
|
-
$modal-header-padding-v: 1.2rem !default; // 12px (was 0.75rem)
|
|
105
|
-
$modal-header-padding-h: 1.6rem !default; // 16px (was 1rem)
|
|
106
|
-
$modal-header-padding: $modal-header-padding-v $modal-header-padding-h !default;
|
|
107
|
-
$modal-body-padding-v: 1.2rem !default; // 12px (was 0.75rem)
|
|
108
|
-
$modal-body-padding-h: 1.6rem !default; // 16px (was 1rem)
|
|
109
|
-
$modal-body-padding: $modal-body-padding-v $modal-body-padding-h !default;
|
|
110
|
-
$modal-footer-padding-v: 1.2rem !default; // 12px (was 0.75rem)
|
|
111
|
-
$modal-footer-padding-h: 1.6rem !default; // 16px (was 1rem)
|
|
112
|
-
$modal-footer-padding: $modal-footer-padding-v $modal-footer-padding-h !default;
|
|
113
|
-
$modal-sm-width: 32rem !default; // 320px (was 20rem)
|
|
114
|
-
$modal-md-width: 48rem !default; // 480px (was 30rem)
|
|
115
|
-
$modal-lg-width: 80rem !default; // 800px (was 50rem)
|
|
116
|
-
$modal-xl-width: 112rem !default; // 1120px (was 70rem)
|
|
117
|
-
$modal-xxl-width: 144rem !default; // 1440px (was 90rem)
|
|
118
|
-
$modal-fw-margin: 1.6rem !default; // 16px (was 1rem)
|
|
119
|
-
$modal-border-radius: 4px !default;
|
|
120
|
-
$modal-close-font-size: $font-size-lg !default;
|
|
121
|
-
$modal-title-font-size: $font-size-lg !default;
|
|
122
|
-
$modal-box-shadow: 0 0.4rem $spacing-sm rgba(0, 0, 0, 0.1) !default;
|
|
123
|
-
$modal-close-size: 4rem !default; // 40px (was 2.5rem)
|
|
124
|
-
$modal-body-scrollable-max-height: 60vh !default;
|
|
125
|
-
$modal-mobile-margin: $spacing-sm !default;
|
|
126
|
-
$modal-mobile-max-height: 95vh !default;
|
|
127
|
-
$modal-header-hover-overlay: rgba(255, 255, 255, 0.1) !default;
|
|
128
|
-
$modal-close-hover-opacity: $opacity-hover !default;
|
|
129
|
-
$modal-close-border-width: $border-width-base !default;
|
|
130
|
-
|
|
131
|
-
// ============================================================================
|
|
132
|
-
// PROFILE PANEL SYSTEM
|
|
133
|
-
// ============================================================================
|
|
134
|
-
$profile-panel-width: 20vw !default;
|
|
135
|
-
$profile-panel-max-width: 48rem !default; // 480px (was 30rem)
|
|
136
|
-
$profile-panel-width-fixed: 320px !default;
|
|
137
|
-
$profile-panel-toggle-size: 40px !default;
|
|
138
|
-
$profile-panel-toggle-size-open: 45px !default;
|
|
139
|
-
$profile-avatar-size: 6.4rem !default; // 64px (was 4rem)
|
|
140
|
-
$profile-close-size: 3.2rem !default; // 32px (was 2rem)
|
|
141
|
-
$profile-nav-icon-width: $sidebar-icon-size !default;
|
|
142
|
-
$profile-section-gap: $spacing-xl !default;
|
|
143
|
-
$profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
|
|
144
|
-
$profile-button-padding-v: $spacing-sm !default;
|
|
145
|
-
$profile-button-padding-h: $spacing-md !default;
|
|
146
|
-
$profile-panel-mobile-max-width: 40rem !default; // 400px (was 25rem)
|
|
147
|
-
$profile-panel-content-padding: 1.6rem !default; // Matches sidebar-padding horizontal (16px)
|
|
148
|
-
|
|
149
|
-
// ============================================================================
|
|
150
|
-
// DETAIL PANEL SYSTEM
|
|
151
|
-
// ============================================================================
|
|
152
|
-
$detail-panel-width: 40rem !default;
|
|
153
|
-
$detail-panel-min-width: 28rem !default;
|
|
154
|
-
$detail-panel-max-width: 64rem !default;
|
|
155
|
-
$detail-panel-mobile-width: 90vw !default;
|
|
156
|
-
$detail-panel-header-padding-v: 1.2rem !default;
|
|
157
|
-
$detail-panel-header-padding-h: 1.6rem !default;
|
|
158
|
-
$detail-panel-body-padding-v: 1.2rem !default;
|
|
159
|
-
$detail-panel-body-padding-h: 1.6rem !default;
|
|
160
|
-
$detail-panel-footer-padding-v: 1.2rem !default;
|
|
161
|
-
$detail-panel-footer-padding-h: 1.6rem !default;
|
|
162
|
-
$detail-panel-overlay-bg: rgba(0, 0, 0, 0.3) !default;
|
|
163
|
-
$detail-panel-z-index: 4500 !default;
|
|
164
|
-
$detail-panel-shadow: $shadow-profile-panel !default;
|
|
165
|
-
$detail-panel-close-size: 3.2rem !default;
|
|
166
|
-
$detail-panel-resize-handle-width: 6px !default;
|
|
167
|
-
$detail-panel-selected-bg: rgba($accent-color, 0.08) !default;
|
|
168
|
-
|
|
169
|
-
// ============================================================================
|
|
170
|
-
// CARD SYSTEM
|
|
171
|
-
// ============================================================================
|
|
172
|
-
$card-border-width: $border-width-base !default; // Card outer border (themes can override)
|
|
173
|
-
$card-border-radius: $border-radius-lg !default; // Controls card + header corners
|
|
174
|
-
$card-body-padding-v: 1.6rem !default; // 16px vertical
|
|
175
|
-
$card-body-padding-h: 1rem !default; // 10px horizontal
|
|
176
|
-
$card-header-padding-v: 0.5rem !default; // 5px vertical
|
|
177
|
-
$card-header-padding-h: 1rem !default; // 10px horizontal - matches body
|
|
178
|
-
$card-header-min-height: 4rem !default; // 40px - fits xs buttons (32px) with padding
|
|
179
|
-
// Vertical nudge that drops the (smaller) header description onto the title's
|
|
180
|
-
// baseline. Under the header's center alignment a 16px title and 14px
|
|
181
|
-
// description don't share a baseline, leaving the description ~1px high. The
|
|
182
|
-
// exact correction is font-metric dependent, so it's exposed as a variable
|
|
183
|
-
// (SCSS default here + `--pc-card-description-offset-y` at runtime) that themes
|
|
184
|
-
// with a different font can retune. Set to 0 to disable the nudge entirely.
|
|
185
|
-
$card-description-offset-y: 1px !default;
|
|
186
|
-
$card-footer-padding-v: 1.2rem !default; // 12px vertical
|
|
187
|
-
$card-footer-padding-h: 1rem !default; // 10px horizontal - matches body
|
|
188
|
-
$card-grid-min-width: 280px !default;
|
|
189
|
-
$card-stat-padding-v: $spacing-lg !default;
|
|
190
|
-
$card-stat-padding-h: $spacing-base !default;
|
|
191
|
-
|
|
192
|
-
// Card inline tabs (tabs inside header)
|
|
193
|
-
$card-tab-inline-padding-v: 0.3rem !default; // 3px - compact for header
|
|
194
|
-
$card-tab-inline-padding-h: 0.8rem !default; // 8px
|
|
195
|
-
$card-tab-hover-opacity: 0.1 !default;
|
|
196
|
-
|
|
197
|
-
// Responsive actions — header width below which the spread button list
|
|
198
|
-
// hides and the collapsed (split-button) form takes over. Default 28rem
|
|
199
|
-
// = 280px, which fits a 3-button action set comfortably.
|
|
200
|
-
$card-actions-collapse-at: 28rem !default;
|
|
201
|
-
|
|
202
|
-
// ============================================================================
|
|
203
|
-
// TABLE SYSTEM
|
|
204
|
-
// ============================================================================
|
|
205
|
-
// Table base padding (matches button/input default)
|
|
206
|
-
$table-padding-base-v: 0.8rem !default; // 8px - matches button SM/default
|
|
207
|
-
$table-padding-base-h: 0.8rem !default; // 8px
|
|
208
|
-
|
|
209
|
-
// Table size variants - synchronized with button/input sizes
|
|
210
|
-
$table-padding-xs-v: $btn-padding-xs-v !default; // 0.6rem
|
|
211
|
-
$table-padding-xs-h: $btn-padding-xs-h !default; // 0.8rem
|
|
212
|
-
$table-padding-sm-v: $btn-padding-sm-v !default; // 0.8rem
|
|
213
|
-
$table-padding-sm-h: $btn-padding-sm-h !default; // 1rem
|
|
214
|
-
$table-padding-lg-v: $btn-padding-lg-v !default; // 0.8rem
|
|
215
|
-
$table-padding-lg-h: $btn-padding-lg-h !default; // 1.4rem
|
|
216
|
-
$table-padding-xl-v: $btn-padding-xl-v !default; // 0.8rem
|
|
217
|
-
$table-padding-xl-h: $btn-padding-xl-h !default; // 1.6rem
|
|
218
|
-
|
|
219
|
-
// Table cell heights - button height + size-specific buffer
|
|
220
|
-
$table-cell-height-buffer-xs: 0.7rem !default;
|
|
221
|
-
$table-cell-height-buffer-sm: 0.8rem !default;
|
|
222
|
-
$table-cell-height-buffer-lg: 0.8rem !default;
|
|
223
|
-
$table-cell-height-buffer-xl: 0.8rem !default;
|
|
224
|
-
|
|
225
|
-
$table-cell-height-xs: $btn-height-xs + $table-cell-height-buffer-xs !default;
|
|
226
|
-
$table-cell-height: $btn-height-base + $table-cell-height-buffer-sm !default;
|
|
227
|
-
$table-cell-height-sm: $btn-height-sm + $table-cell-height-buffer-sm !default;
|
|
228
|
-
$table-cell-height-lg: $btn-height-lg + $table-cell-height-buffer-lg !default;
|
|
229
|
-
$table-cell-height-xl: $btn-height-xl + $table-cell-height-buffer-xl !default;
|
|
230
|
-
|
|
231
|
-
// Virtual table (for large datasets)
|
|
232
|
-
$virtual-table-cell-padding-v: 0.5rem !default; // 5px (was 0.3rem)
|
|
233
|
-
$virtual-table-cell-padding-h: 0.8rem !default; // 8px (was 0.5rem)
|
|
234
|
-
|
|
235
|
-
// Responsive table system
|
|
236
|
-
$table-responsive-breakpoint: $mobile-breakpoint !default;
|
|
237
|
-
$table-responsive-card-margin: $spacing-base !default;
|
|
238
|
-
$table-responsive-card-padding: $spacing-md !default;
|
|
239
|
-
$table-responsive-label-width: 40% !default;
|
|
240
|
-
$table-responsive-label-font-weight: $font-weight-semibold !default;
|
|
241
|
-
|
|
242
|
-
// ============================================================================
|
|
243
|
-
// FORM SYSTEM
|
|
244
|
-
// ============================================================================
|
|
245
|
-
// Gap between adjacent form bits — a label and its inline icon, footer action
|
|
246
|
-
// buttons, and checkbox/radio group options. It is ONLY ever used as a `gap:`
|
|
247
|
-
// value; the old name ($form-scale) misleadingly read as an input-sizing
|
|
248
|
-
// multiplier. Consumers can retune it at runtime via the --pc-form-gap CSS var.
|
|
249
|
-
$form-gap: 0.8rem !default; // 8px (was 0.5rem)
|
|
250
|
-
$form-scale: $form-gap !default; // DEPRECATED alias — retire in a major
|
|
251
|
-
$form-group-margin-bottom: $spacing-sm !default;
|
|
252
|
-
$form-label-margin-bottom: 0.3rem !default; // ~3px (was 0.2rem)
|
|
253
|
-
$form-help-margin-top: $spacing-xs !default;
|
|
254
|
-
$input-padding-v: $spacing-sm !default; // 0.8rem = 8px
|
|
255
|
-
$input-padding-xs-v: 0.6rem !default; // 6px
|
|
256
|
-
$input-padding-h: $spacing-sm !default; // 0.8rem = 8px
|
|
257
|
-
$select-padding-v: 0.7rem !default; // 7px
|
|
258
|
-
$select-padding-h: 0.5rem !default; // 5px - aligns options with inputs
|
|
259
|
-
$textarea-min-height: 9.6rem !default; // 96px (was 6rem)
|
|
260
|
-
$input-focus-ring-opacity: 0.1 !default;
|
|
261
|
-
$input-focus-border-color: $accent-color !default;
|
|
262
|
-
$select-focus-border-color: $accent-color !default;
|
|
263
|
-
$textarea-focus-border-color: $accent-color !default;
|
|
264
|
-
$input-group-prepend-bg: $secondary-bg !default;
|
|
265
|
-
$input-group-prepend-text: $text-color-2 !default;
|
|
266
|
-
$input-group-append-bg: $secondary-bg !default;
|
|
267
|
-
$input-group-append-text: $text-color-2 !default;
|
|
268
|
-
$checkbox-margin-top: 0.2rem !default; // 2px (was 0.125rem)
|
|
269
|
-
$checkbox-size-xs: 1.2rem !default; // 12px (was 0.75rem)
|
|
270
|
-
$checkbox-size-sm: 1.4rem !default; // 14px (was 0.875rem)
|
|
271
|
-
$checkbox-size: 1.6rem !default; // 16px (was 1rem)
|
|
272
|
-
$checkbox-size-lg: 2rem !default; // 20px (was 1.25rem)
|
|
273
|
-
$checkbox-size-xl: 2.4rem !default; // 24px (was 1.5rem)
|
|
274
|
-
$form-group-margin-compact: 1.2rem !default; // 12px (was 0.75rem)
|
|
275
|
-
|
|
276
|
-
// Custom checkbox appearance (tri-state support)
|
|
277
|
-
$checkbox-border-radius: $border-radius !default; // Match input border-radius
|
|
278
|
-
$checkbox-border-width: $border-width-base !default; // 1px
|
|
279
|
-
$checkbox-border-color: $base-checkbox-border-color !default; // reconciled: shared checkbox-border knob (= border-color default)
|
|
280
|
-
$checkbox-border-color-hover: $accent-color !default; // Hover border
|
|
281
|
-
$checkbox-border-color-checked: $accent-color !default; // Checked border
|
|
282
|
-
$checkbox-bg: $card-bg !default; // Unchecked background
|
|
283
|
-
$checkbox-bg-checked: $accent-color !default; // Checked background
|
|
284
|
-
$checkbox-bg-indeterminate: $accent-color !default; // Indeterminate background
|
|
285
|
-
$checkbox-checkmark-color: white !default; // Checkmark/dash color
|
|
286
|
-
$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25) !default;
|
|
287
|
-
$checkbox-transition: $transition-fast !default;
|
|
288
|
-
|
|
289
|
-
// ============================================================================
|
|
290
|
-
// MULTISELECT SYSTEM
|
|
291
|
-
// ============================================================================
|
|
292
|
-
$multiselect-input-padding-v: $input-padding-v !default;
|
|
293
|
-
$multiselect-input-padding-h: $input-padding-h !default;
|
|
294
|
-
$multiselect-dropdown-bg: $base-dropdown-bg !default; // reconciled: floating surface → dropdown-bg (= main-bg default)
|
|
295
|
-
$multiselect-dropdown-border: $border-color !default;
|
|
296
|
-
$multiselect-dropdown-text: $text-color-1 !default;
|
|
297
|
-
$multiselect-dropdown-shadow: $shadow-lg !default;
|
|
298
|
-
$multiselect-dropdown-max-height: 32rem !default; // 320px (was 20rem)
|
|
299
|
-
$multiselect-hint-bg: $page-bg !default; // canvas tone (was $main-bg, which is now the white surface)
|
|
300
|
-
$multiselect-hint-border: $border-color !default;
|
|
301
|
-
$multiselect-hint-padding: $spacing-sm !default;
|
|
302
|
-
$multiselect-option-padding-v: $spacing-sm !default;
|
|
303
|
-
$multiselect-option-padding-h: $spacing-md !default;
|
|
304
|
-
$multiselect-option-hover-bg: $base-hover-bg !default; // RECONCILED: was main-bg; now the shared hover surface
|
|
305
|
-
$multiselect-pill-bg: $accent-light !default;
|
|
306
|
-
$multiselect-pill-border: $accent-color !default;
|
|
307
|
-
$multiselect-pill-padding: $spacing-xs $spacing-sm !default;
|
|
308
|
-
$multiselect-pill-gap: $spacing-xs !default;
|
|
309
|
-
$multiselect-selected-popover-width: 32rem !default; // 320px (was 20rem)
|
|
310
|
-
|
|
311
|
-
// ============================================================================
|
|
312
|
-
// ALERT SYSTEM
|
|
313
|
-
// ============================================================================
|
|
314
|
-
// Default alert padding — decoupled from $card-footer-padding so alerts
|
|
315
|
-
// can have their own scale. The previous coupling left default with V
|
|
316
|
-
// padding (1.2rem) bigger than --lg's (1rem) and H padding (1rem) equal
|
|
317
|
-
// to --sm's, so default sat visually outside the size scale instead of
|
|
318
|
-
// in the middle.
|
|
319
|
-
$alert-padding-v: $spacing-md !default; // 0.75rem
|
|
320
|
-
$alert-padding-h: 1.25rem !default; // sits between --sm (1rem) and --lg (1.5rem)
|
|
321
|
-
|
|
322
|
-
// Size-modifier scales — themes can override to tighten/loosen each size
|
|
323
|
-
// independently. V steps 0.5 → 0.75 → 1, H steps 1 → 1.25 → 1.5.
|
|
324
|
-
$alert-padding-sm-v: $spacing-sm !default; // 0.5rem
|
|
325
|
-
$alert-padding-sm-h: $spacing-base !default; // 1rem
|
|
326
|
-
$alert-font-size-sm: $font-size-xs !default; // 1.2rem (12px)
|
|
327
|
-
$alert-padding-lg-v: $spacing-base !default; // 1rem
|
|
328
|
-
$alert-padding-lg-h: $spacing-lg !default; // 1.5rem
|
|
329
|
-
$alert-font-size-lg: $font-size-base !default; // 1.6rem (16px)
|
|
330
|
-
|
|
331
|
-
$alert-dismissible-padding-right: 4.8rem !default; // 48px (was 3rem)
|
|
332
|
-
$alert-close-opacity: $opacity-muted !default;
|
|
333
|
-
$alert-icon-margin: $spacing-sm !default;
|
|
334
|
-
$alert-list-padding-left: $spacing-lg !default;
|
|
335
|
-
$alert-list-item-margin-top: $card-footer-padding-v !default;
|
|
336
|
-
|
|
337
|
-
// Alert colors - Now derived via color-mix() mixins in _base-css-variables.scss
|
|
338
|
-
// Themes call output-pc-alert-variables-light/dark instead of hardcoding values
|
|
339
|
-
// Keep only the text transform variable as it's not color-related
|
|
340
|
-
$alert-danger-text-transform: none !default;
|
|
341
|
-
|
|
342
|
-
// ============================================================================
|
|
343
|
-
// CALLOUT SYSTEM
|
|
344
|
-
// ============================================================================
|
|
345
|
-
$callout-border-width: 0.4rem !default; // 4px left border accent
|
|
346
|
-
|
|
347
|
-
// ============================================================================
|
|
348
|
-
// STATS SYSTEM
|
|
349
|
-
// ============================================================================
|
|
350
|
-
$stat-icon-size: 4.8rem !default; // 48px (was 3rem)
|
|
351
|
-
$stat-square-min-size: 12.8rem !default; // 128px (was 8rem)
|
|
352
|
-
$stat-label-letter-spacing: 0.05em !default;
|
|
353
|
-
$stat-change-margin-bottom: 0.4rem !default; // 4px (was 0.25rem)
|
|
354
|
-
$stat-number-margin-bottom: $spacing-xs !default;
|
|
355
|
-
$stat-symbol-opacity: 0.85 !default;
|
|
356
|
-
$stat-square-symbol-gap: 0.15em !default; // tight gap between number and symbol on the same row
|
|
357
|
-
|
|
358
|
-
// Stat square clamp values (10px base).
|
|
359
|
-
// Scale uses `cqi` (container query inline-size, requires `container-type: inline-size`
|
|
360
|
-
// on .pa-stat--square) so font tracks the tile width, not the viewport. Without this,
|
|
361
|
-
// a wide-viewport / narrow-tile combination (e.g. 6 KPIs in a 33% column on 1920px)
|
|
362
|
-
// hits the max font size and overflows multi-character values like "$847K" or "¥12.4M".
|
|
363
|
-
//
|
|
364
|
-
// Sizing budget: a 5-char number ("12.4M") at $stat-square-number-scale plus a 1-char
|
|
365
|
-
// symbol at $stat-square-symbol-scale plus the inter-element gap should fit inside the
|
|
366
|
-
// tile's content area (tile width minus 2× $spacing-lg padding) at typical tile widths
|
|
367
|
-
// (~250–400px). Numbers are sized aggressively so the KPI reads as the dominant element.
|
|
368
|
-
$stat-square-number-min: 3.2rem !default; // 32px floor
|
|
369
|
-
$stat-square-number-scale: 25cqi !default; // 25% of tile width
|
|
370
|
-
$stat-square-number-max: 7.2rem !default; // 72px ceiling (was 9.6 — full-width tiles hit the ceiling and read as oversized banners; 72px keeps a wide tile readable without dominating the page)
|
|
371
|
-
// Symbol is intentionally smaller than the number (visual hierarchy: number primary, unit secondary).
|
|
372
|
-
$stat-square-symbol-min: 1.6rem !default; // 16px floor (~50% of number-min)
|
|
373
|
-
$stat-square-symbol-scale: 12cqi !default; // 12% of tile width (~48% of number)
|
|
374
|
-
$stat-square-symbol-max: 3.6rem !default; // 36px ceiling (~50% of number-max, was 4.8)
|
|
375
|
-
|
|
376
|
-
// Guard so a very wide tile (e.g. one square per full-width row instead of in a
|
|
377
|
-
// 1/3 KPI column) can't grow into a page-dominating block. Caps how tall the
|
|
378
|
-
// flex layout gets before the label is pushed to the bottom edge.
|
|
379
|
-
$stat-square-max-height: 16rem !default; // 160px
|
|
380
|
-
|
|
381
|
-
// Stat square FIT mode (opt-in via [data-pa-stat-fit]) — progressive disclosure.
|
|
382
|
-
// The number is sized to fill the box by pa-stat-fit.js (ResizeObserver); the
|
|
383
|
-
// lower-priority rows reveal as the tile earns BOTH enough width and height.
|
|
384
|
-
// NB: @container does NOT auto-interpolate Sass vars (unlike @media) — these
|
|
385
|
-
// must be emitted with #{} in the rules. Gated on width AND height so a
|
|
386
|
-
// wide-but-short banner doesn't reveal the tall-only tiers.
|
|
387
|
-
$stat-square-fit-container-name: pa-stat !default;
|
|
388
|
-
$stat-square-fit-meta-size: $font-size-xs !default; // no-JS fallback for the metadata
|
|
389
|
-
// column; pa-stat-fit.js overrides it
|
|
390
|
-
// inline with META_RATIO × number size
|
|
391
|
-
$stat-square-fit-symbol-ratio: 0.5 !default; // symbol = 0.5em of the number
|
|
392
|
-
$stat-square-fit-symbol-min-w: 8rem !default; // P1 symbol reveals at…
|
|
393
|
-
$stat-square-fit-symbol-min-h: 4.5rem !default;
|
|
394
|
-
$stat-square-fit-label-min-w: 13rem !default; // P2 label
|
|
395
|
-
$stat-square-fit-label-min-h: 6.5rem !default;
|
|
396
|
-
$stat-square-fit-change-min-w: 18rem !default; // P3 trend
|
|
397
|
-
$stat-square-fit-change-min-h: 9.5rem !default;
|
|
398
|
-
$stat-square-fit-context-min-w: 24rem !default; // P4 context
|
|
399
|
-
$stat-square-fit-context-min-h: 13rem !default;
|
|
400
|
-
|
|
401
|
-
// Horizontal "banner" arrangement: on wide tiles the number moves to the left
|
|
402
|
-
// (filling the height) and the metadata stacks in a column to its right, so the
|
|
403
|
-
// number stays dominant and the width isn't wasted. Auto-switches once the tile
|
|
404
|
-
// is at least this wide (plain width query — broadest engine support).
|
|
405
|
-
$stat-square-fit-horizontal-min-w: 32rem !default; // ≥ this wide → horizontal banner
|
|
406
|
-
$stat-square-fit-number-width: 44% !default; // number column share in horizontal
|
|
407
|
-
|
|
408
|
-
// Stat shadow values
|
|
409
|
-
$stat-text-shadow-1-y: 4px !default;
|
|
410
|
-
$stat-text-shadow-1-blur: 8px !default;
|
|
411
|
-
$stat-text-shadow-2-y: 2px !default;
|
|
412
|
-
$stat-text-shadow-2-blur: 4px !default;
|
|
413
|
-
$stat-drop-shadow-y: 2px !default;
|
|
414
|
-
$stat-drop-shadow-blur: 4px !default;
|
|
415
|
-
|
|
416
|
-
// ============================================================================
|
|
417
|
-
// DASHBOARD & CHARTS
|
|
418
|
-
// ============================================================================
|
|
419
|
-
$chart-height: 400px !default;
|
|
420
|
-
$dashboard-grid-col-sm: 80px !default;
|
|
421
|
-
$dashboard-grid-col-md: 100px !default;
|
|
422
|
-
$dashboard-grid-col-lg: 120px !default;
|
|
423
|
-
|
|
424
|
-
// ============================================================================
|
|
425
|
-
// SPINNER/LOADER SYSTEM
|
|
426
|
-
// ============================================================================
|
|
427
|
-
$spinner-size: 1.6rem !default; // 16px (was 1rem)
|
|
428
|
-
$spinner-border-width: 2px !default;
|
|
429
|
-
$loader-border-width: 3px !default;
|
|
430
|
-
$loader-dot-size: 1.2rem !default; // 12px (was 0.75rem)
|
|
431
|
-
$loader-bar-width: $spacing-xs !default;
|
|
432
|
-
$loader-bar-height: $spacing-lg !default;
|
|
433
|
-
$loader-animation-opacity-min: $opacity-muted !default;
|
|
434
|
-
$loader-overlay-bg: rgba(255, 255, 255, 0.8) !default;
|
|
435
|
-
|
|
436
|
-
// Loader animation delays
|
|
437
|
-
$loader-dots-delay-1: -0.32s !default;
|
|
438
|
-
$loader-dots-delay-2: -0.16s !default;
|
|
439
|
-
$loader-bars-delay-1: -1.2s !default;
|
|
440
|
-
$loader-bars-delay-2: -1.1s !default;
|
|
441
|
-
$loader-bars-delay-3: -1.0s !default;
|
|
442
|
-
$loader-bars-delay-4: -0.9s !default;
|
|
443
|
-
$loader-bars-delay-5: -0.8s !default;
|
|
444
|
-
|
|
445
|
-
// Loader animation properties
|
|
446
|
-
$loader-pulse-duration: 1.2s !default;
|
|
447
|
-
$loader-pulse-easing: cubic-bezier(0.5, 0, 0.5, 1) !default;
|
|
448
|
-
|
|
449
|
-
// ============================================================================
|
|
450
|
-
// TABS SYSTEM
|
|
451
|
-
// ============================================================================
|
|
452
|
-
$tabs-margin-bottom: $spacing-sm !default;
|
|
453
|
-
$tabs-panel-padding-top: $spacing-sm !default;
|
|
454
|
-
$tabs-vertical-icon-size: $sidebar-icon-size !default;
|
|
455
|
-
$tabs-vertical-item-gap: $sidebar-item-gap !default;
|
|
456
|
-
$tabs-pill-hover-opacity: 0.1 !default;
|
|
457
|
-
$tabs-pill-border-opacity: 0.3 !default;
|
|
458
|
-
$tabs-boxed-hover-opacity: 0.1 !default;
|
|
459
|
-
$tabs-vertical-hover-opacity: 0.05 !default;
|
|
460
|
-
$tabs-vertical-active-opacity: 0.1 !default;
|
|
461
|
-
$tabs-scroll-btn-width: 3.2rem !default; // 32px (was 2rem)
|
|
462
|
-
$tabs-scroll-gradient-opacity: 0.95 !default;
|
|
463
|
-
$tabs-scroll-hover-gradient-opacity: 0.8 !default;
|
|
464
|
-
|
|
465
|
-
// ============================================================================
|
|
466
|
-
// TOAST SYSTEM
|
|
467
|
-
// ============================================================================
|
|
468
|
-
$toast-min-width: 32rem !default; // 320px (was 20rem)
|
|
469
|
-
$toast-max-width: 40rem !default; // 400px (was 25rem)
|
|
470
|
-
$toast-padding-v: $spacing-md !default;
|
|
471
|
-
$toast-padding-h: $spacing-md !default;
|
|
472
|
-
$toast-icon-size: 3.2rem !default; // 32px (was 2rem)
|
|
473
|
-
$toast-close-size: 2.4rem !default; // 24px (was 1.5rem)
|
|
474
|
-
$toast-progress-height: 5px !default;
|
|
475
|
-
|
|
476
|
-
// ============================================================================
|
|
477
|
-
// TOOLTIP SYSTEM
|
|
478
|
-
// ============================================================================
|
|
479
|
-
$tooltip-arrow-size: 5px !default;
|
|
480
|
-
$tooltip-distance: 8px !default;
|
|
481
|
-
$tooltip-offset: 4px !default;
|
|
482
|
-
$tooltip-max-width: 24rem !default; // 240px (was 15rem)
|
|
483
|
-
$tooltip-multiline-max-width: 32rem !default; // 320px (was 20rem)
|
|
484
|
-
$tooltip-multiline-width: 32rem !default; // 320px (was 20rem)
|
|
485
|
-
$tooltip-arrow-offset: 2px !default;
|
|
486
|
-
$tooltip-z-index: $z-index-tooltip !default;
|
|
487
|
-
|
|
488
|
-
// ============================================================================
|
|
489
|
-
// POPOVER SYSTEM
|
|
490
|
-
// ============================================================================
|
|
491
|
-
$popover-min-width: 25.6rem !default; // 256px (was 16rem)
|
|
492
|
-
$popover-max-width: 32rem !default; // 320px (was 20rem)
|
|
493
|
-
$popover-arrow-size: 6px !default;
|
|
494
|
-
$popover-distance: 8px !default;
|
|
495
|
-
$popover-trigger-size: 2rem !default; // 20px (was 1.25rem)
|
|
496
|
-
$popover-close-size: $spacing-lg !default;
|
|
497
|
-
$popover-header-padding-v: $spacing-sm !default;
|
|
498
|
-
$popover-header-padding-h: $spacing-sm !default;
|
|
499
|
-
$popover-header-padding-right: 0.3rem !default; // ~3px (was 0.2rem)
|
|
500
|
-
$popover-header-padding: $popover-header-padding-v $popover-header-padding-right $popover-header-padding-v $popover-header-padding-h !default;
|
|
501
|
-
$popover-header-border: $border-width-base solid $border-color !default;
|
|
502
|
-
$popover-header-border-radius: $border-radius $border-radius 0 0 !default;
|
|
503
|
-
$popover-title-font-size: $font-size-lg !default;
|
|
504
|
-
$popover-sm-min-width: 19.2rem !default; // 192px (was 12rem)
|
|
505
|
-
$popover-sm-max-width: 25.6rem !default; // 256px (was 16rem)
|
|
506
|
-
$popover-lg-min-width: 32rem !default; // 320px (was 20rem)
|
|
507
|
-
$popover-lg-max-width: 44.8rem !default; // 448px (was 28rem)
|
|
508
|
-
$popover-shift-offset: 3.2rem !default; // 32px (was 2rem)
|
|
509
|
-
$popover-z-index: $z-index-popover !default;
|
|
510
|
-
|
|
511
|
-
// Popover code element styling (10px base)
|
|
512
|
-
$popover-code-padding-v: 0.2rem !default; // 2px (was 0.125rem)
|
|
513
|
-
$popover-code-padding-h: 0.4rem !default; // 4px (was 0.25rem)
|
|
514
|
-
$popover-code-font-scale: 0.9em !default;
|
|
515
|
-
|
|
516
|
-
// ============================================================================
|
|
517
|
-
// COMMAND PALETTE SYSTEM
|
|
518
|
-
// ============================================================================
|
|
519
|
-
$command-palette-width: 60.8rem !default; // 608px (was 38rem)
|
|
520
|
-
$command-palette-offset-top: 12.8rem !default; // 128px (was 8rem)
|
|
521
|
-
$command-palette-border-radius: $border-radius !default;
|
|
522
|
-
$command-palette-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
|
|
523
|
-
$command-palette-backdrop-blur: 4px !default;
|
|
524
|
-
$command-palette-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.3) !default; // 16px 48px (was 1rem 3rem)
|
|
525
|
-
$command-palette-input-padding-v: $input-padding-v !default;
|
|
526
|
-
$command-palette-input-padding-h: $input-padding-h !default;
|
|
527
|
-
$command-palette-input-font-size: $font-size-base !default;
|
|
528
|
-
$command-palette-results-max-height: 38.4rem !default; // 384px (was 24rem)
|
|
529
|
-
$command-palette-empty-padding-v: $spacing-2xl !default;
|
|
530
|
-
$command-palette-item-padding-v: $spacing-sm !default;
|
|
531
|
-
$command-palette-item-hover-bg: rgba($accent-color, 0.05) !default;
|
|
532
|
-
$command-palette-item-active-bg: rgba($accent-color, 0.1) !default;
|
|
533
|
-
$command-palette-item-icon-size: 3.2rem !default; // 32px (was 2rem)
|
|
534
|
-
$command-palette-highlight-bg: rgba($accent-color, 0.2) !default;
|
|
535
|
-
$command-palette-highlight-text: $accent-color !default;
|
|
536
|
-
|
|
537
|
-
// ============================================================================
|
|
538
|
-
// SETTINGS PANEL SYSTEM
|
|
539
|
-
// ============================================================================
|
|
540
|
-
$settings-panel-top: 15vh !default;
|
|
541
|
-
$settings-panel-height: 70vh !default;
|
|
542
|
-
$settings-panel-min-height: 400px !default;
|
|
543
|
-
$settings-panel-vertical-clearance: 100px !default;
|
|
544
|
-
$settings-panel-hover-offset: 5px !default;
|
|
545
|
-
$settings-panel-transition-duration: 0.3s !default;
|
|
546
|
-
$settings-panel-transition-easing: ease !default;
|
|
547
|
-
|
|
548
|
-
// ============================================================================
|
|
549
|
-
// PAGER SYSTEM
|
|
550
|
-
// ============================================================================
|
|
551
|
-
$pager-input-width: 6.4rem !default; // 64px (was 4rem)
|
|
552
|
-
$pager-controls-gap: $spacing-xs !default;
|
|
553
|
-
$pager-button-margin: $spacing-base !default;
|
|
554
|
-
|
|
555
|
-
// ============================================================================
|
|
556
|
-
// TIMELINE SYSTEM
|
|
557
|
-
// ============================================================================
|
|
558
|
-
|
|
559
|
-
// Timeline - Simple variant (10px base)
|
|
560
|
-
$timeline-simple-line-width: 1px !default;
|
|
561
|
-
$timeline-simple-margin-left: 10px !default;
|
|
562
|
-
$timeline-simple-padding-left: 20px !default;
|
|
563
|
-
$timeline-simple-dot-size: 15px !default;
|
|
564
|
-
$timeline-simple-dot-border: 1px !default;
|
|
565
|
-
$timeline-simple-dot-offset: -30px !default;
|
|
566
|
-
$timeline-simple-dot-shadow-offset-x: 3px !default;
|
|
567
|
-
$timeline-simple-dot-shadow-offset-y: 3px !default;
|
|
568
|
-
$timeline-simple-dot-shadow-blur: 0 !default;
|
|
569
|
-
$timeline-simple-dot-shadow-opacity: 0.5 !default;
|
|
570
|
-
$timeline-simple-dot-border-radius: 30% !default;
|
|
571
|
-
$timeline-simple-content-margin-top: 0.6rem !default; // 6px (was 0.4rem)
|
|
572
|
-
$timeline-simple-scroll-container-max-height: 400px !default;
|
|
573
|
-
$timeline-simple-scroll-loader-min-height: 60px !default;
|
|
574
|
-
$timeline-simple-load-more-margin-top: 2.4rem !default; // 24px (was 1.5rem)
|
|
575
|
-
|
|
576
|
-
// Timeline Block - Alternating variant
|
|
577
|
-
$timeline-block-max-width: 1140px !default;
|
|
578
|
-
$timeline-block-padding: $spacing-base 0 !default;
|
|
579
|
-
$timeline-block-line-width: $border-width-medium !default;
|
|
580
|
-
$timeline-block-item-width: 50% !default;
|
|
581
|
-
$timeline-block-item-padding: $spacing-base $spacing-xl !default;
|
|
582
|
-
$timeline-block-item-padding-left-odd: 0rem !default;
|
|
583
|
-
$timeline-block-item-padding-right-even: 0rem !default;
|
|
584
|
-
$timeline-block-content-padding-v: $spacing-xl !default;
|
|
585
|
-
$timeline-block-content-padding-h: $spacing-xl !default;
|
|
586
|
-
$timeline-block-content-padding-extended: calc($spacing-xl * 2 + 40px) !default;
|
|
587
|
-
$timeline-block-content-border-radius: 500px !default;
|
|
588
|
-
$timeline-block-dot-size: 16px !default;
|
|
589
|
-
$timeline-block-dot-border: 2px !default;
|
|
590
|
-
$timeline-block-dot-top-offset: calc(50% - 8px) !default;
|
|
591
|
-
$timeline-block-dot-horizontal-offset: -8px !default;
|
|
592
|
-
$timeline-block-connector-width: 50px !default;
|
|
593
|
-
$timeline-block-connector-height: 2px !default;
|
|
594
|
-
$timeline-block-connector-top-offset: calc(50% - 1px) !default;
|
|
595
|
-
$timeline-block-connector-horizontal-offset: 8px !default;
|
|
596
|
-
$timeline-block-icon-size: 40px !default;
|
|
597
|
-
$timeline-block-icon-border: 2px !default;
|
|
598
|
-
$timeline-block-icon-top-offset: calc(50% - 20px) !default;
|
|
599
|
-
$timeline-block-date-top-offset: calc(50% - 8px) !default;
|
|
600
|
-
$timeline-block-date-offset: -75px !default;
|
|
601
|
-
$timeline-block-date-letter-spacing: 1px !default;
|
|
602
|
-
$timeline-block-icon-offset-odd: 56px !default;
|
|
603
|
-
$timeline-block-icon-offset-even: 56px !default;
|
|
604
|
-
$timeline-block-responsive-breakpoint: 767px !default;
|
|
605
|
-
$timeline-block-responsive-line-left: 90px !default;
|
|
606
|
-
$timeline-block-responsive-padding-left: 120px !default;
|
|
607
|
-
$timeline-block-responsive-padding-right: $spacing-xl !default;
|
|
608
|
-
$timeline-block-responsive-dot-left: 82px !default;
|
|
609
|
-
$timeline-block-responsive-connector-left: 100px !default;
|
|
610
|
-
$timeline-block-responsive-date-left: 15px !default;
|
|
611
|
-
$timeline-block-responsive-icon-left: 146px !default;
|
|
612
|
-
|
|
613
|
-
// Timeline - Feed variant (10px base)
|
|
614
|
-
$timeline-feed-gap: $spacing-base !default;
|
|
615
|
-
$timeline-feed-item-padding-bottom: $spacing-sm !default;
|
|
616
|
-
$timeline-feed-border-left: 3px !default;
|
|
617
|
-
$timeline-feed-padding-left: 40px !default;
|
|
618
|
-
$timeline-feed-icon-size: 40px !default;
|
|
619
|
-
$timeline-feed-icon-margin-left: -52px !default;
|
|
620
|
-
$timeline-feed-icon-box-shadow-width: 6px !default;
|
|
621
|
-
$timeline-feed-avatar-size: 28px !default;
|
|
622
|
-
$timeline-feed-avatar-margin-right: $spacing-xs !default;
|
|
623
|
-
$timeline-feed-comment-margin-top: $spacing-sm !default;
|
|
624
|
-
$timeline-feed-comment-padding: $spacing-base !default;
|
|
625
|
-
$timeline-feed-date-icon-size: $spacing-base !default;
|
|
626
|
-
$timeline-feed-date-label-font-size: $font-size-sm !default;
|
|
627
|
-
$timeline-feed-date-label-letter-spacing: 0.5px !default;
|
|
628
|
-
$timeline-feed-date-margin-bottom: $spacing-sm !default;
|
|
629
|
-
$timeline-feed-time-width: 50px !default;
|
|
630
|
-
$timeline-feed-time-font-size: $font-size-xs !default;
|
|
631
|
-
$timeline-feed-time-padding-top: 6px !default;
|
|
632
|
-
$timeline-feed-scroll-container-max-height: 400px !default;
|
|
633
|
-
|
|
634
|
-
// ============================================================================
|
|
635
|
-
// DATA DISPLAY (READ-ONLY FIELDS)
|
|
636
|
-
// ============================================================================
|
|
637
|
-
$field-label-font-size: $font-size-xs !default;
|
|
638
|
-
$field-label-font-weight: $font-weight-semibold !default;
|
|
639
|
-
$field-label-opacity: 0.55 !default;
|
|
640
|
-
$field-label-letter-spacing: 0.05em !default;
|
|
641
|
-
$field-value-font-size: $font-size-sm !default;
|
|
642
|
-
$field-gap: $spacing-xs !default;
|
|
643
|
-
$field-horizontal-label-min-width: 8rem !default;
|
|
644
|
-
$field-horizontal-label-max-width: 40% !default;
|
|
645
|
-
|
|
646
|
-
// Copyable field interactions
|
|
647
|
-
$field-copy-padding: 0.4rem !default;
|
|
648
|
-
$field-copy-opacity: 0.5 !default;
|
|
649
|
-
$field-copy-hover-opacity: 1 !default;
|
|
650
|
-
$field-copy-hover-bg: rgba(128, 128, 128, 0.1) !default;
|
|
651
|
-
$field-copy-transition: 0.15s !default;
|
|
652
|
-
$field-copy-click-hover-opacity: 0.7 !default;
|
|
653
|
-
$field-copy-hint-opacity: 0.6 !default;
|
|
654
|
-
|
|
655
|
-
$fields-gap: $spacing-base !default;
|
|
656
|
-
$fields-relaxed-gap: $spacing-lg !default;
|
|
657
|
-
$fields-bordered-padding: $spacing-sm !default;
|
|
658
|
-
$fields-bordered-border-color: $border-color !default;
|
|
659
|
-
$fields-striped-bg: $table-stripe !default;
|
|
660
|
-
$fields-cols-gap: $spacing-base !default;
|
|
661
|
-
$fields-border-left: 3px solid $accent-color !default;
|
|
662
|
-
$fields-padding-left: $spacing-base !default;
|
|
663
|
-
$fields-filled-bg: rgba(128, 128, 128, 0.06) !default;
|
|
664
|
-
$fields-filled-padding: $spacing-base !default;
|
|
665
|
-
|
|
666
|
-
// Field group (labeled section of fields)
|
|
667
|
-
$field-group-gap: $spacing-sm !default;
|
|
668
|
-
$field-group-title-font-size: $font-size-sm !default;
|
|
669
|
-
$field-group-title-font-weight: $font-weight-semibold !default;
|
|
670
|
-
$field-group-title-border-color: $border-color !default;
|
|
671
|
-
$field-group-spacing: $spacing-lg !default;
|
|
672
|
-
|
|
673
|
-
// Descriptions Table (pa-desc-table)
|
|
674
|
-
$desc-table-cols: 3 !default;
|
|
675
|
-
$desc-table-cell-padding-v: 1.2rem !default;
|
|
676
|
-
$desc-table-cell-padding-h: 1.6rem !default;
|
|
677
|
-
$desc-table-font-size: $font-size-sm !default;
|
|
678
|
-
$desc-table-label-bg: $fields-filled-bg !default;
|
|
679
|
-
$desc-table-label-colon-spacing: 2px !default;
|
|
680
|
-
$desc-table-value-font-weight: $font-weight-medium !default;
|
|
681
|
-
$desc-table-label-fixed-width: 14rem !default;
|
|
682
|
-
|
|
683
|
-
// Dot Leaders (pa-dot-leaders)
|
|
684
|
-
$dot-leaders-item-padding-v: 0.6rem !default;
|
|
685
|
-
$dot-leaders-font-size: $font-size-sm !default;
|
|
686
|
-
$dot-leaders-label-font-weight: $font-weight-medium !default;
|
|
687
|
-
$dot-leaders-value-font-weight: $font-weight-semibold !default;
|
|
688
|
-
$dot-leaders-leader-width: 2px !default;
|
|
689
|
-
$dot-leaders-leader-margin: 0.8rem !default;
|
|
690
|
-
$dot-leaders-leader-min-width: 2rem !default;
|
|
691
|
-
$dot-leaders-total-margin-top: 0.4rem !default;
|
|
692
|
-
$dot-leaders-total-padding-top: 0.8rem !default;
|
|
693
|
-
$dot-leaders-total-border-width: 2px !default;
|
|
694
|
-
$dot-leaders-total-font-size: $font-size-base !default;
|
|
695
|
-
$dot-leaders-total-font-weight: $font-weight-bold !default;
|
|
696
|
-
|
|
697
|
-
// Property Card (pa-prop-card)
|
|
698
|
-
$prop-card-border-radius: 6px !default;
|
|
699
|
-
$prop-card-header-padding-v: 1rem !default;
|
|
700
|
-
$prop-card-header-padding-h: 1.6rem !default;
|
|
701
|
-
$prop-card-header-font-size: 1.3rem !default;
|
|
702
|
-
$prop-card-header-font-weight: $font-weight-semibold !default;
|
|
703
|
-
$prop-card-header-letter-spacing: 0.04em !default;
|
|
704
|
-
$prop-card-header-bg: rgba(128, 128, 128, 0.04) !default;
|
|
705
|
-
$prop-card-row-padding-v: 1rem !default;
|
|
706
|
-
$prop-card-row-padding-h: 1.6rem !default;
|
|
707
|
-
$prop-card-row-font-size: $font-size-sm !default;
|
|
708
|
-
$prop-card-row-gap: 1.6rem !default;
|
|
709
|
-
$prop-card-row-divider-color: rgba(128, 128, 128, 0.08) !default;
|
|
710
|
-
|
|
711
|
-
// Fields Linear modifier (pa-fields--linear)
|
|
712
|
-
$fields-linear-gap: $spacing-sm !default;
|
|
713
|
-
$fields-linear-font-size: $font-size-sm !default;
|
|
714
|
-
$fields-linear-min-height: 2.8rem !default;
|
|
715
|
-
$fields-linear-label-width: 10rem !default;
|
|
716
|
-
$fields-linear-field-gap: 1.2rem !default;
|
|
717
|
-
|
|
718
|
-
// Fields Chips modifier (pa-fields--chips)
|
|
719
|
-
$fields-chips-gap-v: 0.6rem !default;
|
|
720
|
-
$fields-chips-gap-h: 1.4rem !default;
|
|
721
|
-
$fields-chips-padding-v: 0.4rem !default;
|
|
722
|
-
$fields-chips-font-size: $font-size-sm !default;
|
|
723
|
-
$fields-chips-field-gap: 0.5rem !default;
|
|
724
|
-
$fields-chips-value-padding-v: 0.2rem !default;
|
|
725
|
-
$fields-chips-value-padding-h: 0.8rem !default;
|
|
726
|
-
$fields-chips-value-font-size: 1.3rem !default;
|
|
727
|
-
$fields-chips-value-font-weight: $font-weight-medium !default;
|
|
728
|
-
$fields-chips-value-bg: rgba(128, 128, 128, 0.1) !default;
|
|
729
|
-
$fields-chips-value-border-radius: 4px !default;
|
|
730
|
-
|
|
731
|
-
// Banded Rows (pa-banded)
|
|
732
|
-
$banded-font-size: $font-size-sm !default;
|
|
733
|
-
$banded-label-width: 14rem !default;
|
|
734
|
-
$banded-label-width-narrow: 10rem !default;
|
|
735
|
-
$banded-label-width-wide: 20rem !default;
|
|
736
|
-
$banded-label-padding-v: 0.8rem !default;
|
|
737
|
-
$banded-label-padding-h: 1.2rem !default;
|
|
738
|
-
$banded-label-bg: $fields-filled-bg !default;
|
|
739
|
-
$banded-label-font-weight: $font-weight-medium !default;
|
|
740
|
-
$banded-value-padding-v: 0.8rem !default;
|
|
741
|
-
$banded-value-padding-h: 1.2rem !default;
|
|
742
|
-
|
|
743
|
-
// Accent Grid (pa-accent-grid)
|
|
744
|
-
$accent-grid-min-col: 20rem !default;
|
|
745
|
-
$accent-grid-gap: 0.8rem !default;
|
|
746
|
-
$accent-grid-item-padding-v: 0.8rem !default;
|
|
747
|
-
$accent-grid-item-padding-h: 1.2rem !default;
|
|
748
|
-
$accent-grid-item-padding-start: 1.4rem !default;
|
|
749
|
-
$accent-grid-border-width: 3px !default;
|
|
750
|
-
$accent-grid-label-font-size: 1.1rem !default;
|
|
751
|
-
$accent-grid-label-font-weight: $font-weight-medium !default;
|
|
752
|
-
$accent-grid-label-letter-spacing: 0.03em !default;
|
|
753
|
-
$accent-grid-label-margin-bottom: 0.2rem !default;
|
|
754
|
-
$accent-grid-value-font-size: $font-size-md !default;
|
|
755
|
-
$accent-grid-value-font-weight: $font-weight-semibold !default;
|
|
756
|
-
$accent-grid-value-line-height: $line-height-tight !default;
|
|
757
|
-
|
|
758
|
-
// ============================================================================
|
|
759
|
-
// DATA VISUALIZATION COMPONENTS
|
|
760
|
-
// ============================================================================
|
|
761
|
-
|
|
762
|
-
// Progress bar (pa-progress)
|
|
763
|
-
$progress-height: 0.8rem !default; // 8px
|
|
764
|
-
$progress-height-xs: 0.3rem !default; // 3px
|
|
765
|
-
$progress-height-sm: 0.5rem !default; // 5px
|
|
766
|
-
$progress-height-lg: 1.2rem !default; // 12px
|
|
767
|
-
$progress-bg: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent) !default;
|
|
768
|
-
$progress-border-radius: $border-radius !default;
|
|
769
|
-
$progress-stripe-angle: 45deg !default;
|
|
770
|
-
$progress-stripe-size: 1.6rem !default; // 16px
|
|
771
|
-
$progress-animation-duration: 1s !default;
|
|
772
|
-
$progress-label-font-size: $font-size-xs !default;
|
|
773
|
-
$progress-label-font-weight: $font-weight-medium !default;
|
|
774
|
-
|
|
775
|
-
// Stacked bar (pa-stacked-bar)
|
|
776
|
-
$stacked-bar-height: 1.2rem !default; // 12px
|
|
777
|
-
$stacked-bar-border-radius: $border-radius !default;
|
|
778
|
-
$stacked-bar-legend-gap: $spacing-base !default;
|
|
779
|
-
$stacked-bar-legend-swatch-size: 1rem !default; // 10px
|
|
780
|
-
$stacked-bar-legend-font-size: $font-size-xs !default;
|
|
781
|
-
|
|
782
|
-
// Progress ring (pa-progress-ring)
|
|
783
|
-
$progress-ring-size: 8rem !default; // 80px
|
|
784
|
-
$progress-ring-size-sm: 5rem !default; // 50px
|
|
785
|
-
$progress-ring-size-lg: 11rem !default; // 110px
|
|
786
|
-
$progress-ring-track-color: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent) !default;
|
|
787
|
-
$progress-ring-value-font-size: $font-size-lg !default;
|
|
788
|
-
$progress-ring-value-font-weight: $font-weight-bold !default;
|
|
789
|
-
$progress-ring-label-font-size: $font-size-2xs !default;
|
|
790
|
-
|
|
791
|
-
// Gauge (pa-gauge)
|
|
792
|
-
$gauge-size: 12rem !default; // 120px
|
|
793
|
-
$gauge-track-color: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent) !default;
|
|
794
|
-
$gauge-label-font-size: $font-size-xs !default;
|
|
795
|
-
$gauge-value-font-size: $font-size-3xl !default; // 2.8rem — value gets the whole donut hole (label is now below the gauge)
|
|
796
|
-
$gauge-value-font-weight: $font-weight-bold !default;
|
|
797
|
-
|
|
798
|
-
// Data bar (pa-data-bar)
|
|
799
|
-
$data-bar-height: 0.4rem !default; // 4px
|
|
800
|
-
$data-bar-border-radius: $border-radius-sm !default;
|
|
801
|
-
$data-bar-bg: rgba(0, 0, 0, 0.06) !default;
|
|
802
|
-
|
|
803
|
-
// Heatmap (pa-heatmap)
|
|
804
|
-
$heatmap-cell-size: 1.2rem !default; // 12px
|
|
805
|
-
$heatmap-gap: 0.2rem !default; // 2px
|
|
806
|
-
$heatmap-border-radius: $border-radius-sm !default;
|
|
807
|
-
$heatmap-legend-gap: $spacing-xs !default;
|
|
808
|
-
$heatmap-legend-font-size: $font-size-xs !default;
|
|
809
|
-
|
|
810
|
-
// Sparkline (pa-sparkline)
|
|
811
|
-
$sparkline-bar-width: 0.3rem !default; // 3px
|
|
812
|
-
$sparkline-height: 3rem !default; // 30px
|
|
813
|
-
$sparkline-gap: 0.2rem !default; // 2px
|
|
814
|
-
$sparkline-border-radius: $border-radius-sm !default;
|
|
815
|
-
|
|
816
|
-
// Bar list (pa-bar-list)
|
|
817
|
-
$bar-list-gap: $spacing-base !default;
|
|
818
|
-
$bar-list-bar-height: 0.4rem !default;
|
|
819
|
-
$bar-list-bar-border-radius: $border-radius-sm !default;
|
|
820
|
-
$bar-list-bar-bg: rgba(0, 0, 0, 0.06) !default;
|
|
821
|
-
$bar-list-label-font-size: $font-size-sm !default;
|
|
822
|
-
$bar-list-value-font-size: $font-size-sm !default;
|
|
823
|
-
$bar-list-value-font-weight: $font-weight-semibold !default;
|
|
824
|
-
|
|
825
|
-
// ============================================================================
|
|
826
|
-
// SPLITTER SYSTEM
|
|
827
|
-
// ============================================================================
|
|
828
|
-
$splitter-gutter-size: 0.6rem !default; // 6px gutter thickness
|
|
829
|
-
$splitter-gutter-bg: rgba(128, 128, 128, 0.08) !default;
|
|
830
|
-
$splitter-gutter-hover-bg: rgba(128, 128, 128, 0.18) !default;
|
|
831
|
-
$splitter-gutter-active-bg: rgba($accent-color, 0.35) !default; // mid-drag
|
|
832
|
-
$splitter-gutter-grip-length: 2.4rem !default; // 24px grip indicator
|
|
833
|
-
$splitter-gutter-grip-thickness: 2px !default;
|
|
834
|
-
$splitter-gutter-grip-color: rgba(128, 128, 128, 0.45) !default;
|
|
835
|
-
$splitter-gutter-grip-hover-color: $accent-color !default;
|
|
836
|
-
$splitter-focus-ring-color: rgba($accent-color, 0.4) !default;
|
|
837
|
-
$splitter-focus-ring-width: 2px !default;
|
|
838
|
-
$splitter-transition: background-color 0.15s ease !default;
|
|
839
|
-
$splitter-pane-min-size: 0 !default; // absolute floor regardless of constraints
|
|
840
|
-
$splitter-rail-size: 4rem !default; // 40px — start pane width when minimized to rail
|