origam 2.18.14 → 2.18.16
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/dist/src/assets/css/main.css +1 -1
- package/dist/src/assets/css/tokens/dark.css +312 -0
- package/dist/src/assets/css/tokens/light.css +156 -0
- package/dist/src/assets/scss/tokens/_dark.scss +312 -0
- package/dist/src/assets/scss/tokens/_light.scss +156 -0
- package/dist/src/components/Bracket/OrigamBracket.vue +15 -0
- package/dist/src/components/Bracket/OrigamBracketMatch.vue +22 -1
- package/dist/src/components/Card/OrigamCard.vue +42 -35
- package/dist/src/components/Chart/OrigamChartAxis.vue +10 -0
- package/dist/src/components/Chart/OrigamChartBoxPlot.vue +3 -3
- package/dist/src/components/Chart/OrigamChartCandlestick.vue +2 -2
- package/dist/src/components/Chart/OrigamChartCartesian.vue +1 -1
- package/dist/src/components/Grid/OrigamGrid.vue +28 -0
- package/dist/src/types/tokens.type.d.ts +1 -1
- package/package.json +1 -1
|
@@ -237,6 +237,55 @@
|
|
|
237
237
|
--origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
|
|
238
238
|
--origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
|
|
239
239
|
--origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
|
|
240
|
+
/* Bracket — #592. Each value is the literal (or token reference) the
|
|
241
|
+
component SCSS already fell back to, so nothing moves on screen; what was
|
|
242
|
+
a component-local default becomes a real, per-mode, typed token channel.
|
|
243
|
+
DELIBERATELY ABSENT — the per-side border longhands
|
|
244
|
+
(---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
|
|
245
|
+
the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
|
|
246
|
+
each falls back to the general knob declared here, and declaring a rung
|
|
247
|
+
would freeze that cascade at its root value. Measured in Chromium: setting
|
|
248
|
+
only ---border-width moves all four sides. See the notes at the read sites. */
|
|
249
|
+
--origam-bracket---background-color: transparent;
|
|
250
|
+
--origam-bracket---color: currentColor;
|
|
251
|
+
--origam-bracket-connector---stroke-dasharray: none;
|
|
252
|
+
--origam-bracket-connector---stroke-linecap: butt;
|
|
253
|
+
--origam-bracket-double---section-gap: 40px;
|
|
254
|
+
--origam-bracket-double-label---color: var(--origam-color__text---primary);
|
|
255
|
+
--origam-bracket-double-label---font-size: 0.75rem;
|
|
256
|
+
--origam-bracket-double-label---font-weight: 700;
|
|
257
|
+
--origam-bracket-double-label---letter-spacing: 0.08em;
|
|
258
|
+
--origam-bracket-double-label---margin-block-end: 12px;
|
|
259
|
+
--origam-bracket-double-label---text-transform: uppercase;
|
|
260
|
+
--origam-bracket-match---background-color: var(--origam-color__surface---default);
|
|
261
|
+
--origam-bracket-match---border-color: var(--origam-color__border---subtle);
|
|
262
|
+
--origam-bracket-match---border-width: 1px;
|
|
263
|
+
--origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
264
|
+
--origam-bracket-match--hover---border-color: var(--origam-color__border---default);
|
|
265
|
+
--origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
|
|
266
|
+
--origam-bracket-round-robin---cell-size: 56px;
|
|
267
|
+
--origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
|
|
268
|
+
--origam-bracket-round---match-gap: 24px;
|
|
269
|
+
--origam-bracket-round-title---color: var(--origam-color__text---secondary);
|
|
270
|
+
--origam-bracket-competitor---background-color: transparent;
|
|
271
|
+
--origam-bracket-competitor---color: currentColor;
|
|
272
|
+
--origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
|
|
273
|
+
--origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
|
|
274
|
+
--origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
|
|
275
|
+
--origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
|
|
276
|
+
--origam-bracket-competitor--pending---font-style: italic;
|
|
277
|
+
--origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
|
|
278
|
+
--origam-bracket-competitor--winner---color: currentColor;
|
|
279
|
+
--origam-bracket-competitor--winner---font-weight: 600;
|
|
280
|
+
--origam-bracket-seed---color: var(--origam-color__text---secondary);
|
|
281
|
+
--origam-bracket-score---color: currentColor;
|
|
282
|
+
--origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
|
|
283
|
+
--origam-bracket-advantage---border-radius: 9999px;
|
|
284
|
+
--origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
|
|
285
|
+
--origam-bracket-advantage---font-size: 0.6875rem;
|
|
286
|
+
--origam-bracket-advantage---font-weight: 700;
|
|
287
|
+
--origam-bracket-advantage---padding-block: 1px;
|
|
288
|
+
--origam-bracket-advantage---padding-inline: 6px;
|
|
240
289
|
--origam-btn---background-color: var(--origam-color__action--secondary---bg);
|
|
241
290
|
--origam-btn---color: var(--origam-color__action--secondary---fg);
|
|
242
291
|
--origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
|
|
@@ -357,6 +406,21 @@
|
|
|
357
406
|
--origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
|
|
358
407
|
--origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
|
|
359
408
|
--origam-card__underlay---position: absolute;
|
|
409
|
+
/* Card — #593. Each value is the literal the component SCSS already fell back
|
|
410
|
+
to, so nothing moves on screen. --origam-card--loading---min-{width,height}
|
|
411
|
+
replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
|
|
412
|
+
to read ("--loading" is a state modifier, so the grammar is the
|
|
413
|
+
--state---property form, not a flat suffix).
|
|
414
|
+
--origam-card__loader---overlay-background stays undeclared on purpose —
|
|
415
|
+
see the comment at its read site in OrigamCard.vue. */
|
|
416
|
+
--origam-card--loading---min-width: 240px;
|
|
417
|
+
--origam-card--loading---min-height: 120px;
|
|
418
|
+
--origam-card__asset---aspect-ratio: 16 / 9;
|
|
419
|
+
--origam-card__loader---min-height: 4px;
|
|
420
|
+
--origam-card__loader---min-height-skeleton: 200px;
|
|
421
|
+
--origam-card__loader---z-index: 3;
|
|
422
|
+
--origam-card__progress---linear-height: 4px;
|
|
423
|
+
--origam-card__progress---circular-margin: 24px auto;
|
|
360
424
|
--origam-card__before---border-radius: inherit;
|
|
361
425
|
--origam-card__before---bottom: var(--origam-space---0);
|
|
362
426
|
--origam-card__before---content: "";
|
|
@@ -2871,6 +2935,98 @@
|
|
|
2871
2935
|
--origam-chart-streamgraph__ribbon---opacity: 0.82;
|
|
2872
2936
|
--origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
|
|
2873
2937
|
--origam-chart-streamgraph__axis-label---fill: #6b7280;
|
|
2938
|
+
--origam-chart__annotation---font-size: 0.6875rem;
|
|
2939
|
+
--origam-chart__annotation---font-weight: 600;
|
|
2940
|
+
--origam-chart__annotation-callout---color: #ffffff;
|
|
2941
|
+
--origam-chart__annotation-callout---font-size: 0.6875rem;
|
|
2942
|
+
--origam-chart__annotation-callout---font-weight: 600;
|
|
2943
|
+
--origam-chart__axis---stroke-width: 1;
|
|
2944
|
+
--origam-chart__axis-line---color: var(--origam-color__border---subtle);
|
|
2945
|
+
--origam-chart__body---min-width: 200px;
|
|
2946
|
+
--origam-chart__box---fill-opacity: 0.25;
|
|
2947
|
+
--origam-chart__box---stroke-width: 1.5;
|
|
2948
|
+
--origam-chart__box-cap---stroke-width: 2;
|
|
2949
|
+
--origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
|
|
2950
|
+
--origam-chart__box-median---stroke-width: 2;
|
|
2951
|
+
--origam-chart__box-outlier---fill-opacity: 0.7;
|
|
2952
|
+
--origam-chart__box-whisker---stroke-width: 1.5;
|
|
2953
|
+
--origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
|
|
2954
|
+
--origam-chart__breadcrumb---font-size: 0.8125rem;
|
|
2955
|
+
--origam-chart__breadcrumb---gap: 8px;
|
|
2956
|
+
--origam-chart__breadcrumb-back---background-color: transparent;
|
|
2957
|
+
--origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
|
|
2958
|
+
--origam-chart__breadcrumb-back---border-radius: 4px;
|
|
2959
|
+
--origam-chart__breadcrumb-back---color: currentColor;
|
|
2960
|
+
--origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
|
|
2961
|
+
--origam-chart__breadcrumb-current---color: currentColor;
|
|
2962
|
+
--origam-chart__breadcrumb-current---font-weight: 600;
|
|
2963
|
+
--origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
|
|
2964
|
+
--origam-chart__bullet-range---opacity: 0.55;
|
|
2965
|
+
--origam-chart__bullet-target---stroke-width: 3;
|
|
2966
|
+
--origam-chart__gauge-label---color: var(--origam-color__text---primary);
|
|
2967
|
+
--origam-chart__gauge-label---font-size: 1.5rem;
|
|
2968
|
+
--origam-chart__gauge-label---font-weight: 700;
|
|
2969
|
+
--origam-chart__gauge-track---color: var(--origam-color__border---subtle);
|
|
2970
|
+
--origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
|
|
2971
|
+
--origam-chart__heatmap---stroke-width: 0.5;
|
|
2972
|
+
--origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
|
|
2973
|
+
--origam-chart__heatmap-axis-label---font-size: 0.625rem;
|
|
2974
|
+
--origam-chart__heatmap-label---color: #ffffff;
|
|
2975
|
+
--origam-chart__heatmap-label---font-size: 0.5625rem;
|
|
2976
|
+
--origam-chart__heatmap-label---font-weight: 600;
|
|
2977
|
+
--origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
|
|
2978
|
+
--origam-chart__heatmap-legend-label---font-size: 0.625rem;
|
|
2979
|
+
--origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
|
|
2980
|
+
--origam-chart__honeycomb---stroke-width: 2;
|
|
2981
|
+
--origam-chart__honeycomb-label---color: #ffffff;
|
|
2982
|
+
--origam-chart__honeycomb-label---font-size: 0.625rem;
|
|
2983
|
+
--origam-chart__honeycomb-label---font-weight: 600;
|
|
2984
|
+
--origam-chart__legend---side-gap: 8px;
|
|
2985
|
+
--origam-chart__map---stroke-width: 1;
|
|
2986
|
+
--origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
|
|
2987
|
+
--origam-chart__map-legend-label---font-size: 0.625rem;
|
|
2988
|
+
--origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
|
|
2989
|
+
--origam-chart-pictorial__axis---font-size: 0.6875rem;
|
|
2990
|
+
--origam-chart-pictorial__label---color: var(--origam-color__text---primary);
|
|
2991
|
+
--origam-chart-pictorial__label---font-size: 0.6875rem;
|
|
2992
|
+
--origam-chart-pictorial__label---font-weight: 600;
|
|
2993
|
+
--origam-chart__plot-band-label---font-size: 0.6875rem;
|
|
2994
|
+
--origam-chart__plot-band-label---font-weight: 600;
|
|
2995
|
+
--origam-chart__plot-line-label---font-size: 0.6875rem;
|
|
2996
|
+
--origam-chart__plot-line-label---font-weight: 600;
|
|
2997
|
+
--origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
|
|
2998
|
+
--origam-chart__polar-bar---stroke-width: 1.5;
|
|
2999
|
+
--origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
|
|
3000
|
+
--origam-chart__polar-bar-label---font-size: 0.6875rem;
|
|
3001
|
+
--origam-chart__polar-bar-label---font-weight: 500;
|
|
3002
|
+
--origam-chart__polar-bar-value-label---color: #ffffff;
|
|
3003
|
+
--origam-chart__polar-bar-value-label---font-size: 0.625rem;
|
|
3004
|
+
--origam-chart__polar-bar-value-label---font-weight: 600;
|
|
3005
|
+
--origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
|
|
3006
|
+
--origam-chart__pyramid---stroke-width: 2;
|
|
3007
|
+
--origam-chart__pyramid-label---font-size: 0.75rem;
|
|
3008
|
+
--origam-chart__pyramid-label---font-weight: 500;
|
|
3009
|
+
--origam-chart__pyramid-label--inside---color: #ffffff;
|
|
3010
|
+
--origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
|
|
3011
|
+
--origam-chart__sankey-label---color: var(--origam-color__text---primary);
|
|
3012
|
+
--origam-chart__sankey-label---font-size: 0.6875rem;
|
|
3013
|
+
--origam-chart__sankey-label---font-weight: 500;
|
|
3014
|
+
--origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
|
|
3015
|
+
--origam-chart__sunburst---stroke-width: 1.5;
|
|
3016
|
+
--origam-chart__sunburst-label---color: #ffffff;
|
|
3017
|
+
--origam-chart__sunburst-label---font-size: 0.625rem;
|
|
3018
|
+
--origam-chart__sunburst-label---font-weight: 500;
|
|
3019
|
+
--origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
|
|
3020
|
+
--origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
|
|
3021
|
+
--origam-chart__sunburst-leader-line---width: 1;
|
|
3022
|
+
--origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
|
|
3023
|
+
--origam-chart__treemap---stroke-width: 2;
|
|
3024
|
+
--origam-chart__treemap-label---color: #ffffff;
|
|
3025
|
+
--origam-chart__treemap-label---font-size: 0.6875rem;
|
|
3026
|
+
--origam-chart__treemap-label---font-weight: 600;
|
|
3027
|
+
--origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
|
|
3028
|
+
--origam-chart__treemap-label--value---font-size: 0.625rem;
|
|
3029
|
+
--origam-chart__treemap-label--value---font-weight: 400;
|
|
2874
3030
|
--origam-data-table-header-cell---color: var(--origam-color__text---primary);
|
|
2875
3031
|
--origam-data-table-header-cell---background: var(--origam-color__surface---raised);
|
|
2876
3032
|
--origam-data-table-header-cell__content---gap: var(--origam-space---1);
|
|
@@ -2981,6 +3137,55 @@
|
|
|
2981
3137
|
--origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
|
|
2982
3138
|
--origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
|
|
2983
3139
|
--origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
|
|
3140
|
+
/* Bracket — #592. Each value is the literal (or token reference) the
|
|
3141
|
+
component SCSS already fell back to, so nothing moves on screen; what was
|
|
3142
|
+
a component-local default becomes a real, per-mode, typed token channel.
|
|
3143
|
+
DELIBERATELY ABSENT — the per-side border longhands
|
|
3144
|
+
(---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
|
|
3145
|
+
the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
|
|
3146
|
+
each falls back to the general knob declared here, and declaring a rung
|
|
3147
|
+
would freeze that cascade at its root value. Measured in Chromium: setting
|
|
3148
|
+
only ---border-width moves all four sides. See the notes at the read sites. */
|
|
3149
|
+
--origam-bracket---background-color: transparent;
|
|
3150
|
+
--origam-bracket---color: currentColor;
|
|
3151
|
+
--origam-bracket-connector---stroke-dasharray: none;
|
|
3152
|
+
--origam-bracket-connector---stroke-linecap: butt;
|
|
3153
|
+
--origam-bracket-double---section-gap: 40px;
|
|
3154
|
+
--origam-bracket-double-label---color: var(--origam-color__text---primary);
|
|
3155
|
+
--origam-bracket-double-label---font-size: 0.75rem;
|
|
3156
|
+
--origam-bracket-double-label---font-weight: 700;
|
|
3157
|
+
--origam-bracket-double-label---letter-spacing: 0.08em;
|
|
3158
|
+
--origam-bracket-double-label---margin-block-end: 12px;
|
|
3159
|
+
--origam-bracket-double-label---text-transform: uppercase;
|
|
3160
|
+
--origam-bracket-match---background-color: var(--origam-color__surface---default);
|
|
3161
|
+
--origam-bracket-match---border-color: var(--origam-color__border---subtle);
|
|
3162
|
+
--origam-bracket-match---border-width: 1px;
|
|
3163
|
+
--origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
3164
|
+
--origam-bracket-match--hover---border-color: var(--origam-color__border---default);
|
|
3165
|
+
--origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
|
|
3166
|
+
--origam-bracket-round-robin---cell-size: 56px;
|
|
3167
|
+
--origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
|
|
3168
|
+
--origam-bracket-round---match-gap: 24px;
|
|
3169
|
+
--origam-bracket-round-title---color: var(--origam-color__text---secondary);
|
|
3170
|
+
--origam-bracket-competitor---background-color: transparent;
|
|
3171
|
+
--origam-bracket-competitor---color: currentColor;
|
|
3172
|
+
--origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
|
|
3173
|
+
--origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
|
|
3174
|
+
--origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
|
|
3175
|
+
--origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
|
|
3176
|
+
--origam-bracket-competitor--pending---font-style: italic;
|
|
3177
|
+
--origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
|
|
3178
|
+
--origam-bracket-competitor--winner---color: currentColor;
|
|
3179
|
+
--origam-bracket-competitor--winner---font-weight: 600;
|
|
3180
|
+
--origam-bracket-seed---color: var(--origam-color__text---secondary);
|
|
3181
|
+
--origam-bracket-score---color: currentColor;
|
|
3182
|
+
--origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
|
|
3183
|
+
--origam-bracket-advantage---border-radius: 9999px;
|
|
3184
|
+
--origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
|
|
3185
|
+
--origam-bracket-advantage---font-size: 0.6875rem;
|
|
3186
|
+
--origam-bracket-advantage---font-weight: 700;
|
|
3187
|
+
--origam-bracket-advantage---padding-block: 1px;
|
|
3188
|
+
--origam-bracket-advantage---padding-inline: 6px;
|
|
2984
3189
|
--origam-btn---background-color: var(--origam-color__action--secondary---bg);
|
|
2985
3190
|
--origam-btn---color: var(--origam-color__action--secondary---fg);
|
|
2986
3191
|
--origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
|
|
@@ -3101,6 +3306,21 @@
|
|
|
3101
3306
|
--origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
|
|
3102
3307
|
--origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
|
|
3103
3308
|
--origam-card__underlay---position: absolute;
|
|
3309
|
+
/* Card — #593. Each value is the literal the component SCSS already fell back
|
|
3310
|
+
to, so nothing moves on screen. --origam-card--loading---min-{width,height}
|
|
3311
|
+
replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
|
|
3312
|
+
to read ("--loading" is a state modifier, so the grammar is the
|
|
3313
|
+
--state---property form, not a flat suffix).
|
|
3314
|
+
--origam-card__loader---overlay-background stays undeclared on purpose —
|
|
3315
|
+
see the comment at its read site in OrigamCard.vue. */
|
|
3316
|
+
--origam-card--loading---min-width: 240px;
|
|
3317
|
+
--origam-card--loading---min-height: 120px;
|
|
3318
|
+
--origam-card__asset---aspect-ratio: 16 / 9;
|
|
3319
|
+
--origam-card__loader---min-height: 4px;
|
|
3320
|
+
--origam-card__loader---min-height-skeleton: 200px;
|
|
3321
|
+
--origam-card__loader---z-index: 3;
|
|
3322
|
+
--origam-card__progress---linear-height: 4px;
|
|
3323
|
+
--origam-card__progress---circular-margin: 24px auto;
|
|
3104
3324
|
--origam-card__before---border-radius: inherit;
|
|
3105
3325
|
--origam-card__before---bottom: var(--origam-space---0);
|
|
3106
3326
|
--origam-card__before---content: "";
|
|
@@ -5614,6 +5834,98 @@
|
|
|
5614
5834
|
--origam-chart-streamgraph__ribbon---opacity: 0.82;
|
|
5615
5835
|
--origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
|
|
5616
5836
|
--origam-chart-streamgraph__axis-label---fill: #6b7280;
|
|
5837
|
+
--origam-chart__annotation---font-size: 0.6875rem;
|
|
5838
|
+
--origam-chart__annotation---font-weight: 600;
|
|
5839
|
+
--origam-chart__annotation-callout---color: #ffffff;
|
|
5840
|
+
--origam-chart__annotation-callout---font-size: 0.6875rem;
|
|
5841
|
+
--origam-chart__annotation-callout---font-weight: 600;
|
|
5842
|
+
--origam-chart__axis---stroke-width: 1;
|
|
5843
|
+
--origam-chart__axis-line---color: var(--origam-color__border---subtle);
|
|
5844
|
+
--origam-chart__body---min-width: 200px;
|
|
5845
|
+
--origam-chart__box---fill-opacity: 0.25;
|
|
5846
|
+
--origam-chart__box---stroke-width: 1.5;
|
|
5847
|
+
--origam-chart__box-cap---stroke-width: 2;
|
|
5848
|
+
--origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
|
|
5849
|
+
--origam-chart__box-median---stroke-width: 2;
|
|
5850
|
+
--origam-chart__box-outlier---fill-opacity: 0.7;
|
|
5851
|
+
--origam-chart__box-whisker---stroke-width: 1.5;
|
|
5852
|
+
--origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
|
|
5853
|
+
--origam-chart__breadcrumb---font-size: 0.8125rem;
|
|
5854
|
+
--origam-chart__breadcrumb---gap: 8px;
|
|
5855
|
+
--origam-chart__breadcrumb-back---background-color: transparent;
|
|
5856
|
+
--origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
|
|
5857
|
+
--origam-chart__breadcrumb-back---border-radius: 4px;
|
|
5858
|
+
--origam-chart__breadcrumb-back---color: currentColor;
|
|
5859
|
+
--origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
|
|
5860
|
+
--origam-chart__breadcrumb-current---color: currentColor;
|
|
5861
|
+
--origam-chart__breadcrumb-current---font-weight: 600;
|
|
5862
|
+
--origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
|
|
5863
|
+
--origam-chart__bullet-range---opacity: 0.55;
|
|
5864
|
+
--origam-chart__bullet-target---stroke-width: 3;
|
|
5865
|
+
--origam-chart__gauge-label---color: var(--origam-color__text---primary);
|
|
5866
|
+
--origam-chart__gauge-label---font-size: 1.5rem;
|
|
5867
|
+
--origam-chart__gauge-label---font-weight: 700;
|
|
5868
|
+
--origam-chart__gauge-track---color: var(--origam-color__border---subtle);
|
|
5869
|
+
--origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
|
|
5870
|
+
--origam-chart__heatmap---stroke-width: 0.5;
|
|
5871
|
+
--origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
|
|
5872
|
+
--origam-chart__heatmap-axis-label---font-size: 0.625rem;
|
|
5873
|
+
--origam-chart__heatmap-label---color: #ffffff;
|
|
5874
|
+
--origam-chart__heatmap-label---font-size: 0.5625rem;
|
|
5875
|
+
--origam-chart__heatmap-label---font-weight: 600;
|
|
5876
|
+
--origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
|
|
5877
|
+
--origam-chart__heatmap-legend-label---font-size: 0.625rem;
|
|
5878
|
+
--origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
|
|
5879
|
+
--origam-chart__honeycomb---stroke-width: 2;
|
|
5880
|
+
--origam-chart__honeycomb-label---color: #ffffff;
|
|
5881
|
+
--origam-chart__honeycomb-label---font-size: 0.625rem;
|
|
5882
|
+
--origam-chart__honeycomb-label---font-weight: 600;
|
|
5883
|
+
--origam-chart__legend---side-gap: 8px;
|
|
5884
|
+
--origam-chart__map---stroke-width: 1;
|
|
5885
|
+
--origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
|
|
5886
|
+
--origam-chart__map-legend-label---font-size: 0.625rem;
|
|
5887
|
+
--origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
|
|
5888
|
+
--origam-chart-pictorial__axis---font-size: 0.6875rem;
|
|
5889
|
+
--origam-chart-pictorial__label---color: var(--origam-color__text---primary);
|
|
5890
|
+
--origam-chart-pictorial__label---font-size: 0.6875rem;
|
|
5891
|
+
--origam-chart-pictorial__label---font-weight: 600;
|
|
5892
|
+
--origam-chart__plot-band-label---font-size: 0.6875rem;
|
|
5893
|
+
--origam-chart__plot-band-label---font-weight: 600;
|
|
5894
|
+
--origam-chart__plot-line-label---font-size: 0.6875rem;
|
|
5895
|
+
--origam-chart__plot-line-label---font-weight: 600;
|
|
5896
|
+
--origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
|
|
5897
|
+
--origam-chart__polar-bar---stroke-width: 1.5;
|
|
5898
|
+
--origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
|
|
5899
|
+
--origam-chart__polar-bar-label---font-size: 0.6875rem;
|
|
5900
|
+
--origam-chart__polar-bar-label---font-weight: 500;
|
|
5901
|
+
--origam-chart__polar-bar-value-label---color: #ffffff;
|
|
5902
|
+
--origam-chart__polar-bar-value-label---font-size: 0.625rem;
|
|
5903
|
+
--origam-chart__polar-bar-value-label---font-weight: 600;
|
|
5904
|
+
--origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
|
|
5905
|
+
--origam-chart__pyramid---stroke-width: 2;
|
|
5906
|
+
--origam-chart__pyramid-label---font-size: 0.75rem;
|
|
5907
|
+
--origam-chart__pyramid-label---font-weight: 500;
|
|
5908
|
+
--origam-chart__pyramid-label--inside---color: #ffffff;
|
|
5909
|
+
--origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
|
|
5910
|
+
--origam-chart__sankey-label---color: var(--origam-color__text---primary);
|
|
5911
|
+
--origam-chart__sankey-label---font-size: 0.6875rem;
|
|
5912
|
+
--origam-chart__sankey-label---font-weight: 500;
|
|
5913
|
+
--origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
|
|
5914
|
+
--origam-chart__sunburst---stroke-width: 1.5;
|
|
5915
|
+
--origam-chart__sunburst-label---color: #ffffff;
|
|
5916
|
+
--origam-chart__sunburst-label---font-size: 0.625rem;
|
|
5917
|
+
--origam-chart__sunburst-label---font-weight: 500;
|
|
5918
|
+
--origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
|
|
5919
|
+
--origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
|
|
5920
|
+
--origam-chart__sunburst-leader-line---width: 1;
|
|
5921
|
+
--origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
|
|
5922
|
+
--origam-chart__treemap---stroke-width: 2;
|
|
5923
|
+
--origam-chart__treemap-label---color: #ffffff;
|
|
5924
|
+
--origam-chart__treemap-label---font-size: 0.6875rem;
|
|
5925
|
+
--origam-chart__treemap-label---font-weight: 600;
|
|
5926
|
+
--origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
|
|
5927
|
+
--origam-chart__treemap-label--value---font-size: 0.625rem;
|
|
5928
|
+
--origam-chart__treemap-label--value---font-weight: 400;
|
|
5617
5929
|
--origam-data-table-header-cell---color: var(--origam-color__text---primary);
|
|
5618
5930
|
--origam-data-table-header-cell---background: var(--origam-color__surface---raised);
|
|
5619
5931
|
--origam-data-table-header-cell__content---gap: var(--origam-space---1);
|
|
@@ -139,6 +139,55 @@
|
|
|
139
139
|
--origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
|
|
140
140
|
--origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
|
|
141
141
|
--origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
|
|
142
|
+
/* Bracket — #592. Each value is the literal (or token reference) the
|
|
143
|
+
component SCSS already fell back to, so nothing moves on screen; what was
|
|
144
|
+
a component-local default becomes a real, per-mode, typed token channel.
|
|
145
|
+
DELIBERATELY ABSENT — the per-side border longhands
|
|
146
|
+
(---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
|
|
147
|
+
the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
|
|
148
|
+
each falls back to the general knob declared here, and declaring a rung
|
|
149
|
+
would freeze that cascade at its root value. Measured in Chromium: setting
|
|
150
|
+
only ---border-width moves all four sides. See the notes at the read sites. */
|
|
151
|
+
--origam-bracket---background-color: transparent;
|
|
152
|
+
--origam-bracket---color: currentColor;
|
|
153
|
+
--origam-bracket-connector---stroke-dasharray: none;
|
|
154
|
+
--origam-bracket-connector---stroke-linecap: butt;
|
|
155
|
+
--origam-bracket-double---section-gap: 40px;
|
|
156
|
+
--origam-bracket-double-label---color: var(--origam-color__text---primary);
|
|
157
|
+
--origam-bracket-double-label---font-size: 0.75rem;
|
|
158
|
+
--origam-bracket-double-label---font-weight: 700;
|
|
159
|
+
--origam-bracket-double-label---letter-spacing: 0.08em;
|
|
160
|
+
--origam-bracket-double-label---margin-block-end: 12px;
|
|
161
|
+
--origam-bracket-double-label---text-transform: uppercase;
|
|
162
|
+
--origam-bracket-match---background-color: var(--origam-color__surface---default);
|
|
163
|
+
--origam-bracket-match---border-color: var(--origam-color__border---subtle);
|
|
164
|
+
--origam-bracket-match---border-width: 1px;
|
|
165
|
+
--origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
166
|
+
--origam-bracket-match--hover---border-color: var(--origam-color__border---default);
|
|
167
|
+
--origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
|
|
168
|
+
--origam-bracket-round-robin---cell-size: 56px;
|
|
169
|
+
--origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
|
|
170
|
+
--origam-bracket-round---match-gap: 24px;
|
|
171
|
+
--origam-bracket-round-title---color: var(--origam-color__text---secondary);
|
|
172
|
+
--origam-bracket-competitor---background-color: transparent;
|
|
173
|
+
--origam-bracket-competitor---color: currentColor;
|
|
174
|
+
--origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
|
|
175
|
+
--origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
|
|
176
|
+
--origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
|
|
177
|
+
--origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
|
|
178
|
+
--origam-bracket-competitor--pending---font-style: italic;
|
|
179
|
+
--origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
|
|
180
|
+
--origam-bracket-competitor--winner---color: currentColor;
|
|
181
|
+
--origam-bracket-competitor--winner---font-weight: 600;
|
|
182
|
+
--origam-bracket-seed---color: var(--origam-color__text---secondary);
|
|
183
|
+
--origam-bracket-score---color: currentColor;
|
|
184
|
+
--origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
|
|
185
|
+
--origam-bracket-advantage---border-radius: 9999px;
|
|
186
|
+
--origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
|
|
187
|
+
--origam-bracket-advantage---font-size: 0.6875rem;
|
|
188
|
+
--origam-bracket-advantage---font-weight: 700;
|
|
189
|
+
--origam-bracket-advantage---padding-block: 1px;
|
|
190
|
+
--origam-bracket-advantage---padding-inline: 6px;
|
|
142
191
|
--origam-btn---background-color: var(--origam-color__action--secondary---bg);
|
|
143
192
|
--origam-btn---color: var(--origam-color__action--secondary---fg);
|
|
144
193
|
--origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
|
|
@@ -259,6 +308,21 @@
|
|
|
259
308
|
--origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
|
|
260
309
|
--origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
|
|
261
310
|
--origam-card__underlay---position: absolute;
|
|
311
|
+
/* Card — #593. Each value is the literal the component SCSS already fell back
|
|
312
|
+
to, so nothing moves on screen. --origam-card--loading---min-{width,height}
|
|
313
|
+
replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
|
|
314
|
+
to read ("--loading" is a state modifier, so the grammar is the
|
|
315
|
+
--state---property form, not a flat suffix).
|
|
316
|
+
--origam-card__loader---overlay-background stays undeclared on purpose —
|
|
317
|
+
see the comment at its read site in OrigamCard.vue. */
|
|
318
|
+
--origam-card--loading---min-width: 240px;
|
|
319
|
+
--origam-card--loading---min-height: 120px;
|
|
320
|
+
--origam-card__asset---aspect-ratio: 16 / 9;
|
|
321
|
+
--origam-card__loader---min-height: 4px;
|
|
322
|
+
--origam-card__loader---min-height-skeleton: 200px;
|
|
323
|
+
--origam-card__loader---z-index: 3;
|
|
324
|
+
--origam-card__progress---linear-height: 4px;
|
|
325
|
+
--origam-card__progress---circular-margin: 24px auto;
|
|
262
326
|
--origam-card__before---border-radius: inherit;
|
|
263
327
|
--origam-card__before---bottom: var(--origam-space---0);
|
|
264
328
|
--origam-card__before---content: "";
|
|
@@ -2787,6 +2851,98 @@
|
|
|
2787
2851
|
--origam-chart-streamgraph__ribbon---opacity: 0.82;
|
|
2788
2852
|
--origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
|
|
2789
2853
|
--origam-chart-streamgraph__axis-label---fill: #6b7280;
|
|
2854
|
+
--origam-chart__annotation---font-size: 0.6875rem;
|
|
2855
|
+
--origam-chart__annotation---font-weight: 600;
|
|
2856
|
+
--origam-chart__annotation-callout---color: #ffffff;
|
|
2857
|
+
--origam-chart__annotation-callout---font-size: 0.6875rem;
|
|
2858
|
+
--origam-chart__annotation-callout---font-weight: 600;
|
|
2859
|
+
--origam-chart__axis---stroke-width: 1;
|
|
2860
|
+
--origam-chart__axis-line---color: var(--origam-color__border---subtle);
|
|
2861
|
+
--origam-chart__body---min-width: 200px;
|
|
2862
|
+
--origam-chart__box---fill-opacity: 0.25;
|
|
2863
|
+
--origam-chart__box---stroke-width: 1.5;
|
|
2864
|
+
--origam-chart__box-cap---stroke-width: 2;
|
|
2865
|
+
--origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
|
|
2866
|
+
--origam-chart__box-median---stroke-width: 2;
|
|
2867
|
+
--origam-chart__box-outlier---fill-opacity: 0.7;
|
|
2868
|
+
--origam-chart__box-whisker---stroke-width: 1.5;
|
|
2869
|
+
--origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
|
|
2870
|
+
--origam-chart__breadcrumb---font-size: 0.8125rem;
|
|
2871
|
+
--origam-chart__breadcrumb---gap: 8px;
|
|
2872
|
+
--origam-chart__breadcrumb-back---background-color: transparent;
|
|
2873
|
+
--origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
|
|
2874
|
+
--origam-chart__breadcrumb-back---border-radius: 4px;
|
|
2875
|
+
--origam-chart__breadcrumb-back---color: currentColor;
|
|
2876
|
+
--origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
|
|
2877
|
+
--origam-chart__breadcrumb-current---color: currentColor;
|
|
2878
|
+
--origam-chart__breadcrumb-current---font-weight: 600;
|
|
2879
|
+
--origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
|
|
2880
|
+
--origam-chart__bullet-range---opacity: 0.55;
|
|
2881
|
+
--origam-chart__bullet-target---stroke-width: 3;
|
|
2882
|
+
--origam-chart__gauge-label---color: var(--origam-color__text---primary);
|
|
2883
|
+
--origam-chart__gauge-label---font-size: 1.5rem;
|
|
2884
|
+
--origam-chart__gauge-label---font-weight: 700;
|
|
2885
|
+
--origam-chart__gauge-track---color: var(--origam-color__border---subtle);
|
|
2886
|
+
--origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
|
|
2887
|
+
--origam-chart__heatmap---stroke-width: 0.5;
|
|
2888
|
+
--origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
|
|
2889
|
+
--origam-chart__heatmap-axis-label---font-size: 0.625rem;
|
|
2890
|
+
--origam-chart__heatmap-label---color: #ffffff;
|
|
2891
|
+
--origam-chart__heatmap-label---font-size: 0.5625rem;
|
|
2892
|
+
--origam-chart__heatmap-label---font-weight: 600;
|
|
2893
|
+
--origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
|
|
2894
|
+
--origam-chart__heatmap-legend-label---font-size: 0.625rem;
|
|
2895
|
+
--origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
|
|
2896
|
+
--origam-chart__honeycomb---stroke-width: 2;
|
|
2897
|
+
--origam-chart__honeycomb-label---color: #ffffff;
|
|
2898
|
+
--origam-chart__honeycomb-label---font-size: 0.625rem;
|
|
2899
|
+
--origam-chart__honeycomb-label---font-weight: 600;
|
|
2900
|
+
--origam-chart__legend---side-gap: 8px;
|
|
2901
|
+
--origam-chart__map---stroke-width: 1;
|
|
2902
|
+
--origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
|
|
2903
|
+
--origam-chart__map-legend-label---font-size: 0.625rem;
|
|
2904
|
+
--origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
|
|
2905
|
+
--origam-chart-pictorial__axis---font-size: 0.6875rem;
|
|
2906
|
+
--origam-chart-pictorial__label---color: var(--origam-color__text---primary);
|
|
2907
|
+
--origam-chart-pictorial__label---font-size: 0.6875rem;
|
|
2908
|
+
--origam-chart-pictorial__label---font-weight: 600;
|
|
2909
|
+
--origam-chart__plot-band-label---font-size: 0.6875rem;
|
|
2910
|
+
--origam-chart__plot-band-label---font-weight: 600;
|
|
2911
|
+
--origam-chart__plot-line-label---font-size: 0.6875rem;
|
|
2912
|
+
--origam-chart__plot-line-label---font-weight: 600;
|
|
2913
|
+
--origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
|
|
2914
|
+
--origam-chart__polar-bar---stroke-width: 1.5;
|
|
2915
|
+
--origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
|
|
2916
|
+
--origam-chart__polar-bar-label---font-size: 0.6875rem;
|
|
2917
|
+
--origam-chart__polar-bar-label---font-weight: 500;
|
|
2918
|
+
--origam-chart__polar-bar-value-label---color: #ffffff;
|
|
2919
|
+
--origam-chart__polar-bar-value-label---font-size: 0.625rem;
|
|
2920
|
+
--origam-chart__polar-bar-value-label---font-weight: 600;
|
|
2921
|
+
--origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
|
|
2922
|
+
--origam-chart__pyramid---stroke-width: 2;
|
|
2923
|
+
--origam-chart__pyramid-label---font-size: 0.75rem;
|
|
2924
|
+
--origam-chart__pyramid-label---font-weight: 500;
|
|
2925
|
+
--origam-chart__pyramid-label--inside---color: #ffffff;
|
|
2926
|
+
--origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
|
|
2927
|
+
--origam-chart__sankey-label---color: var(--origam-color__text---primary);
|
|
2928
|
+
--origam-chart__sankey-label---font-size: 0.6875rem;
|
|
2929
|
+
--origam-chart__sankey-label---font-weight: 500;
|
|
2930
|
+
--origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
|
|
2931
|
+
--origam-chart__sunburst---stroke-width: 1.5;
|
|
2932
|
+
--origam-chart__sunburst-label---color: #ffffff;
|
|
2933
|
+
--origam-chart__sunburst-label---font-size: 0.625rem;
|
|
2934
|
+
--origam-chart__sunburst-label---font-weight: 500;
|
|
2935
|
+
--origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
|
|
2936
|
+
--origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
|
|
2937
|
+
--origam-chart__sunburst-leader-line---width: 1;
|
|
2938
|
+
--origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
|
|
2939
|
+
--origam-chart__treemap---stroke-width: 2;
|
|
2940
|
+
--origam-chart__treemap-label---color: #ffffff;
|
|
2941
|
+
--origam-chart__treemap-label---font-size: 0.6875rem;
|
|
2942
|
+
--origam-chart__treemap-label---font-weight: 600;
|
|
2943
|
+
--origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
|
|
2944
|
+
--origam-chart__treemap-label--value---font-size: 0.625rem;
|
|
2945
|
+
--origam-chart__treemap-label--value---font-weight: 400;
|
|
2790
2946
|
--origam-data-table-header-cell---color: var(--origam-color__text---primary);
|
|
2791
2947
|
--origam-data-table-header-cell---background: var(--origam-color__surface---raised);
|
|
2792
2948
|
--origam-data-table-header-cell__content---gap: var(--origam-space---1);
|
|
@@ -821,6 +821,12 @@ defineExpose({
|
|
|
821
821
|
}
|
|
822
822
|
|
|
823
823
|
&__connector {
|
|
824
|
+
// ⛔ `---stroke-color` and `---stroke-color-winner` LEFT UNDECLARED (#592):
|
|
825
|
+
// both fall back to `--origam-bracket-match---border-color`, which #592
|
|
826
|
+
// declared, so the connector tracks the match box's border by default.
|
|
827
|
+
// Declaring the stroke tokens at `:root` would substitute that reference
|
|
828
|
+
// once at root and freeze the link — same mechanism as the long note in
|
|
829
|
+
// OrigamBracketMatch.vue's border block.
|
|
824
830
|
stroke: var(--origam-bracket-connector---stroke-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
|
|
825
831
|
stroke-width: var(--origam-bracket-connector---stroke-width, var(--origam-bracket-match---border-width, 1px));
|
|
826
832
|
stroke-dasharray: var(--origam-bracket-connector---stroke-dasharray, none);
|
|
@@ -848,6 +854,15 @@ defineExpose({
|
|
|
848
854
|
gap: 1px;
|
|
849
855
|
}
|
|
850
856
|
|
|
857
|
+
// ⛔ `--origam-bracket-round-robin---header-background` and
|
|
858
|
+
// `---cell-background-diag` LEFT UNDECLARED (#592): both fall back to
|
|
859
|
+
// `--origam-color__surface---subtle`, a name no token sheet declares (the DS
|
|
860
|
+
// has `sunken`, not `subtle`), so the literal `#f5f5f5` is what paints — in
|
|
861
|
+
// dark mode too. Choosing the replacement is a design decision, not a
|
|
862
|
+
// rename; see the note in OrigamBracketMatch.vue.
|
|
863
|
+
//
|
|
864
|
+
// NOTE also: no Variant of any Bracket story renders the round-robin layout,
|
|
865
|
+
// so these two channels have never been exercised by a spec either.
|
|
851
866
|
&__rr-corner {
|
|
852
867
|
background: var(--origam-bracket-round-robin---header-background, var(--origam-color__surface---subtle, #f5f5f5));
|
|
853
868
|
}
|
|
@@ -319,6 +319,19 @@ defineExpose({
|
|
|
319
319
|
border-color: var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
|
|
320
320
|
border-radius: var(--origam-bracket-match---border-radius, 6px);
|
|
321
321
|
|
|
322
|
+
// ⛔ THE 14 PER-SIDE LONGHANDS BELOW ARE LEFT UNDECLARED ON PURPOSE (#592).
|
|
323
|
+
// Each falls back to the general knob above it (`---border-width`,
|
|
324
|
+
// `---border-color`, `---border-radius`), which #592 DID declare in the
|
|
325
|
+
// token sheets. That cascade is the feature: a theme sets the general
|
|
326
|
+
// token once and all four sides follow — measured in Chromium, setting
|
|
327
|
+
// only `---border-width: 5px` gives 5px on all four sides.
|
|
328
|
+
//
|
|
329
|
+
// Declaring a longhand would destroy it. A custom property is substituted
|
|
330
|
+
// ON THE ELEMENT THAT DECLARES IT, so a `:root` declaration of
|
|
331
|
+
// `---border-top-width: var(---border-block-width, var(---border-width, 1px))`
|
|
332
|
+
// resolves to `1px` AT ROOT and every descendant inherits that literal.
|
|
333
|
+
// A consumer then setting `---border-width: 3px` on a wrapper would move
|
|
334
|
+
// the shorthand and nothing else — the four sides would stay pinned at 1px.
|
|
322
335
|
border-block-width: var(--origam-bracket-match---border-block-width, var(--origam-bracket-match---border-width, 1px));
|
|
323
336
|
border-inline-width: var(--origam-bracket-match---border-inline-width, var(--origam-bracket-match---border-width, 1px));
|
|
324
337
|
|
|
@@ -421,7 +434,15 @@ defineExpose({
|
|
|
421
434
|
cursor: pointer;
|
|
422
435
|
|
|
423
436
|
&:hover {
|
|
424
|
-
|
|
437
|
+
// ⛔ LEFT UNDECLARED (#592). Its fallback names
|
|
438
|
+
// `--origam-color__surface---elevated`, which NO token sheet declares —
|
|
439
|
+
// the DS vocabulary has `raised` and `sunken`, not `elevated`. So the
|
|
440
|
+
// literal `#fafafa` is what paints, in dark mode too. Declaring this
|
|
441
|
+
// token means choosing a semantic token on the strength of a name, which
|
|
442
|
+
// is the mistake #550 recorded on OrigamBottomNav. Pending the
|
|
443
|
+
// arbitration on the missing `surface---elevated` / `surface---subtle` /
|
|
444
|
+
// `text---tertiary` names — 13 such reads repo-wide, 5 in this family.
|
|
445
|
+
background-color: var(--origam-bracket-match--hover---background-color, var(--origam-color__surface---elevated, #fafafa));
|
|
425
446
|
border-color: var(--origam-bracket-match--hover---border-color, var(--origam-color__border---default, rgba(0, 0, 0, 0.24)));
|
|
426
447
|
}
|
|
427
448
|
}
|