vuetiwatch 0.2.0 → 0.2.2
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/README.md +25 -202
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +19 -3
- package/dist/plugin.js.map +1 -1
- package/dist/styles/aurora.css +1 -1
- package/dist/styles/aurora.min.css +1 -1
- package/dist/styles/brutalist.css +1 -1
- package/dist/styles/brutalist.min.css +1 -1
- package/dist/styles/calm.css +1 -1
- package/dist/styles/calm.min.css +1 -1
- package/dist/styles/candy.css +1 -4
- package/dist/styles/candy.min.css +1 -1
- package/dist/styles/clay.css +1 -1
- package/dist/styles/clay.min.css +1 -1
- package/dist/styles/core.css +44 -2
- package/dist/styles/core.min.css +1 -1
- package/dist/styles/darkGlass.css +1 -1
- package/dist/styles/darkGlass.min.css +1 -1
- package/dist/styles/liquidGlass.css +10 -1
- package/dist/styles/liquidGlass.min.css +1 -1
- package/dist/styles/lux.css +1 -1
- package/dist/styles/lux.min.css +1 -1
- package/dist/styles/neon.css +1 -1
- package/dist/styles/neon.min.css +1 -1
- package/dist/styles/slate.css +1 -1
- package/dist/styles/slate.min.css +1 -1
- package/dist/styles/soft.css +3 -2
- package/dist/styles/soft.min.css +1 -1
- package/dist/styles.css +66 -17
- package/dist/styles.min.css +1 -1
- package/dist/themes/atlas.d.ts +35 -0
- package/dist/themes/atlas.d.ts.map +1 -1
- package/dist/themes/atlas.js +75 -1
- package/dist/themes/atlas.js.map +1 -1
- package/dist/themes/atlasDark.d.ts.map +1 -1
- package/dist/themes/atlasDark.js +5 -0
- package/dist/themes/atlasDark.js.map +1 -1
- package/dist/themes/atlasSepia.d.ts.map +1 -1
- package/dist/themes/atlasSepia.js +5 -0
- package/dist/themes/atlasSepia.js.map +1 -1
- package/dist/themes/aurora.d.ts.map +1 -1
- package/dist/themes/aurora.js +20 -1
- package/dist/themes/aurora.js.map +1 -1
- package/dist/themes/brutalist.d.ts.map +1 -1
- package/dist/themes/brutalist.js +63 -5
- package/dist/themes/brutalist.js.map +1 -1
- package/dist/themes/calm.d.ts.map +1 -1
- package/dist/themes/calm.js +22 -1
- package/dist/themes/calm.js.map +1 -1
- package/dist/themes/candy.d.ts.map +1 -1
- package/dist/themes/candy.js +23 -1
- package/dist/themes/candy.js.map +1 -1
- package/dist/themes/clay.d.ts.map +1 -1
- package/dist/themes/clay.js +14 -1
- package/dist/themes/clay.js.map +1 -1
- package/dist/themes/darkGlass.d.ts.map +1 -1
- package/dist/themes/darkGlass.js +13 -1
- package/dist/themes/darkGlass.js.map +1 -1
- package/dist/themes/graphite.d.ts.map +1 -1
- package/dist/themes/graphite.js +42 -7
- package/dist/themes/graphite.js.map +1 -1
- package/dist/themes/liquidGlass.d.ts.map +1 -1
- package/dist/themes/liquidGlass.js +41 -5
- package/dist/themes/liquidGlass.js.map +1 -1
- package/dist/themes/lux.d.ts.map +1 -1
- package/dist/themes/lux.js +48 -6
- package/dist/themes/lux.js.map +1 -1
- package/dist/themes/morph.d.ts.map +1 -1
- package/dist/themes/morph.js +21 -1
- package/dist/themes/morph.js.map +1 -1
- package/dist/themes/neon.d.ts.map +1 -1
- package/dist/themes/neon.js +35 -1
- package/dist/themes/neon.js.map +1 -1
- package/dist/themes/paper.d.ts.map +1 -1
- package/dist/themes/paper.js +38 -1
- package/dist/themes/paper.js.map +1 -1
- package/dist/themes/sketchy.d.ts.map +1 -1
- package/dist/themes/sketchy.js +27 -1
- package/dist/themes/sketchy.js.map +1 -1
- package/dist/themes/slate.d.ts.map +1 -1
- package/dist/themes/slate.js +42 -6
- package/dist/themes/slate.js.map +1 -1
- package/dist/themes/soft.d.ts.map +1 -1
- package/dist/themes/soft.js +49 -8
- package/dist/themes/soft.js.map +1 -1
- package/dist/util/defaults.d.ts +35 -0
- package/dist/util/defaults.d.ts.map +1 -1
- package/dist/util/defaults.js +51 -0
- package/dist/util/defaults.js.map +1 -1
- package/package.json +2 -1
- package/src/index.ts +2 -2
- package/src/plugin.ts +20 -3
- package/src/styles/core.css +152 -3
- package/src/styles/themes/aurora.css +1 -0
- package/src/styles/themes/brutalist.css +1 -0
- package/src/styles/themes/calm.css +1 -0
- package/src/styles/themes/candy.css +9 -4
- package/src/styles/themes/clay.css +1 -0
- package/src/styles/themes/darkGlass.css +1 -0
- package/src/styles/themes/liquidGlass.css +41 -0
- package/src/styles/themes/lux.css +1 -0
- package/src/styles/themes/neon.css +1 -0
- package/src/styles/themes/slate.css +1 -0
- package/src/styles/themes/soft.css +10 -0
- package/src/themes/atlas.ts +76 -1
- package/src/themes/atlasDark.ts +5 -0
- package/src/themes/atlasSepia.ts +5 -0
- package/src/themes/aurora.ts +21 -1
- package/src/themes/brutalist.ts +65 -5
- package/src/themes/calm.ts +23 -1
- package/src/themes/candy.ts +24 -1
- package/src/themes/clay.ts +15 -1
- package/src/themes/darkGlass.ts +14 -1
- package/src/themes/graphite.ts +44 -7
- package/src/themes/liquidGlass.ts +42 -5
- package/src/themes/lux.ts +50 -6
- package/src/themes/morph.ts +22 -1
- package/src/themes/neon.ts +37 -1
- package/src/themes/paper.ts +40 -1
- package/src/themes/sketchy.ts +29 -1
- package/src/themes/slate.ts +43 -6
- package/src/themes/soft.ts +50 -8
- package/src/util/defaults.ts +84 -0
package/dist/themes/brutalist.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, fields, icons } from '../util/defaults.js';
|
|
1
|
+
import { bars, fields, icons, overlays, ripple } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* Neobrutalism: thick black rules, an acid accent, and a hard offset shadow
|
|
@@ -75,16 +75,65 @@ export const brutalist = defineTheme({
|
|
|
75
75
|
'vw-heading-weight': '700',
|
|
76
76
|
'vw-heading-tracking': '-0.02em',
|
|
77
77
|
'vw-tab-slider-height': '4px',
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
/**
|
|
79
|
+
* Nothing eases and nothing tweens: a state change is the frame it
|
|
80
|
+
* happens in.
|
|
81
|
+
*
|
|
82
|
+
* A stepped curve was the first attempt at saying that, and it says
|
|
83
|
+
* the opposite. Two discrete jumps across 80ms read as a dropped
|
|
84
|
+
* frame rather than as a decision, and on anything that takes longer
|
|
85
|
+
* to arrive — a tooltip, a dialog the size of the screen — the hold
|
|
86
|
+
* between the steps looks like the page has hung. Zero is the only
|
|
87
|
+
* duration that is actually instant.
|
|
88
|
+
*
|
|
89
|
+
* `linear` is what is left for the two things here that are
|
|
90
|
+
* animations rather than transitions — the icon pop and the theme
|
|
91
|
+
* wipe — where a curve would be the theme describing a weight it
|
|
92
|
+
* does not have.
|
|
93
|
+
*
|
|
94
|
+
* The press is the theme's own slide into its shadow, so the shared
|
|
95
|
+
* squash stays out of its way.
|
|
96
|
+
*/
|
|
97
|
+
'vw-motion-duration': '0ms',
|
|
98
|
+
'vw-motion-ease': 'linear',
|
|
99
|
+
/**
|
|
100
|
+
* The scrim cannot follow it, though, and this is the one place the
|
|
101
|
+
* theme's own rule is wrong. A panel appearing in a single frame is
|
|
102
|
+
* decisive; a whole screen going dark in a single frame is a flash,
|
|
103
|
+
* and the eye reads a flash as a fault rather than as a choice. So
|
|
104
|
+
* the panel keeps its zero and the dimming gets a beat of its own —
|
|
105
|
+
* still linear, still short enough that nothing is waited for.
|
|
106
|
+
*
|
|
107
|
+
* Left at Vuetify's own 300ms the mismatch was the other way round:
|
|
108
|
+
* the panel was there and the room was still darkening a third of a
|
|
109
|
+
* second later.
|
|
110
|
+
*/
|
|
111
|
+
'vw-overlay-duration': '0ms',
|
|
112
|
+
'vw-scrim-duration': '120ms',
|
|
82
113
|
'vw-press-scale': '1',
|
|
83
114
|
'vw-pop-scale': '1.3',
|
|
84
115
|
'vw-pop-duration': '100ms',
|
|
85
116
|
'vw-focus-ring': '3px solid rgb(var(--v-shadow-color))',
|
|
86
117
|
'vw-focus-offset': '3px',
|
|
87
118
|
'vw-theme-transition': '200ms',
|
|
119
|
+
// Hard states to match the hard edges: a pressed control is a
|
|
120
|
+
// different colour, not a slightly darker one.
|
|
121
|
+
'focus-opacity': 0.2,
|
|
122
|
+
'activated-opacity': 0.3,
|
|
123
|
+
'disabled-opacity': 0.5,
|
|
124
|
+
/**
|
|
125
|
+
* A tab is set at body size rather than shrunk to Vuetify's label
|
|
126
|
+
* size — nothing in this theme whispers.
|
|
127
|
+
*/
|
|
128
|
+
'vw-tab-size': '1rem',
|
|
129
|
+
/**
|
|
130
|
+
* Lime is this theme's active colour — it already marks the table
|
|
131
|
+
* heads, the current page and the slider — so a selected run of text
|
|
132
|
+
* joins them. Solid rather than a tint: nothing here is translucent,
|
|
133
|
+
* and the ink on top is stated rather than left to the browser.
|
|
134
|
+
*/
|
|
135
|
+
'vw-selection-fill': 'rgb(var(--v-theme-secondary))',
|
|
136
|
+
'vw-selection-color': 'rgb(var(--v-shadow-color))',
|
|
88
137
|
// A structural beam, and the dot is a square like everything else.
|
|
89
138
|
'vw-timeline-line': 'rgb(var(--v-shadow-color))',
|
|
90
139
|
'vw-timeline-line-width': '4px',
|
|
@@ -124,6 +173,15 @@ export const brutalist = defineTheme({
|
|
|
124
173
|
sortDesc: 'mdi-menu-down',
|
|
125
174
|
close: 'mdi-close-thick',
|
|
126
175
|
}),
|
|
176
|
+
/**
|
|
177
|
+
* No transition at all, which is the only honest answer here. Every
|
|
178
|
+
* other theme animates a surface arriving from somewhere; this one has
|
|
179
|
+
* no depth for it to arrive through, so the panel is simply there —
|
|
180
|
+
* one frame without it, the next frame with it.
|
|
181
|
+
*/
|
|
182
|
+
overlays({ dialog: false, menu: false, tooltip: false }),
|
|
183
|
+
// A ripple is a soft, round, spreading thing.
|
|
184
|
+
ripple(false),
|
|
127
185
|
],
|
|
128
186
|
});
|
|
129
187
|
//# sourceMappingURL=brutalist.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"brutalist.js","sourceRoot":"","sources":["../../src/themes/brutalist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"brutalist.js","sourceRoot":"","sources":["../../src/themes/brutalist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,2EAA2E;QACxF,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QACpD,KAAK,EAAE,CAAC,eAAe,CAAC;KACzB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,KAAK;QACX,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,SAAS;YAClB,gBAAgB,EAAE,SAAS;YAC3B,eAAe,EAAE,SAAS;YAC1B,iBAAiB,EAAE,SAAS;YAC5B,oBAAoB,EAAE,SAAS;YAC/B,OAAO,EAAE,SAAS;YAClB,kBAAkB,EAAE,SAAS;YAC7B,SAAS,EAAE,SAAS;YACpB,oBAAoB,EAAE,SAAS;YAC/B,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,eAAe,EAAE,SAAS;YAC1B,8DAA8D;YAC9D,+DAA+D;YAC/D,uFAAuF;YACvF,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,SAAS;YACrB,cAAc,EAAE,SAAS;YACzB,YAAY,EAAE,SAAS;YACvB,YAAY,EAAE,SAAS;SACxB;QACD,SAAS,EAAE;YACT;qEACyD;YACzD,iBAAiB,EAAE,2DAA2D;YAC9E,iBAAiB,EACf,0EAA0E;YAC5E,cAAc,EAAE,SAAS;YACzB,gBAAgB,EAAE,CAAC;YACnB,cAAc,EAAE,SAAS;YACzB,uBAAuB,EAAE,CAAC;YAC1B,yBAAyB,EAAE,IAAI;YAC/B,eAAe,EAAE,IAAI;YACrB,WAAW,EAAE,uDAAuD;YACpE,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,KAAK;YACrB,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;YACvB,oDAAoD;YACpD,oBAAoB,EAAE,KAAK;YAC3B,iBAAiB,EAAE,KAAK;YACxB,kBAAkB,EAAE,WAAW;YAC/B,iBAAiB,EAAE,QAAQ;YAC3B,eAAe,EAAE,KAAK;YACtB,kEAAkE;YAClE,0BAA0B;YAC1B,4BAA4B,EAAE,+BAA+B;YAC7D,8BAA8B,EAAE,GAAG;YACnC,mBAAmB,EAAE,KAAK;YAC1B,qBAAqB,EAAE,SAAS;YAChC,sBAAsB,EAAE,KAAK;YAE7B;;;;;;;;;;;;;;;;;;eAkBG;YACH,oBAAoB,EAAE,KAAK;YAC3B,gBAAgB,EAAE,QAAQ;YAC1B;;;;;;;;;;;eAWG;YACH,qBAAqB,EAAE,KAAK;YAC5B,mBAAmB,EAAE,OAAO;YAC5B,gBAAgB,EAAE,GAAG;YACrB,cAAc,EAAE,KAAK;YACrB,iBAAiB,EAAE,OAAO;YAC1B,eAAe,EAAE,sCAAsC;YACvD,iBAAiB,EAAE,KAAK;YACxB,qBAAqB,EAAE,OAAO;YAE9B,8DAA8D;YAC9D,+CAA+C;YAC/C,eAAe,EAAE,GAAG;YACpB,mBAAmB,EAAE,GAAG;YACxB,kBAAkB,EAAE,GAAG;YACvB;;;eAGG;YACH,aAAa,EAAE,MAAM;YAErB;;;;;eAKG;YACH,mBAAmB,EAAE,+BAA+B;YACpD,oBAAoB,EAAE,4BAA4B;YAElD,mEAAmE;YACnE,kBAAkB,EAAE,4BAA4B;YAChD,wBAAwB,EAAE,KAAK;YAC/B,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,KAAK;SAC1B;KACF;IACD,QAAQ,EAAE;QACR;YACE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;YAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9B,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YACxB,iBAAiB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YAClC,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC5B,oEAAoE;YACpE,wDAAwD;YACxD,OAAO,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE;YAC5D,YAAY,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;SACrC;QACD,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;QAC/B,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;QACjC,KAAK,CAAC;YACJ,6DAA6D;YAC7D,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,aAAa;YACvB,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,eAAe;YACrB,UAAU,EAAE,qBAAqB;YACjC,WAAW,EAAE,4BAA4B;YACzC,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,kBAAkB;YAC/B,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,iBAAiB;SACzB,CAAC;QACF;;;;;WAKG;QACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACxD,8CAA8C;QAC9C,MAAM,CAAC,KAAK,CAAC;KACd;CACF,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calm.d.ts","sourceRoot":"","sources":["../../src/themes/calm.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,+
|
|
1
|
+
{"version":3,"file":"calm.d.ts","sourceRoot":"","sources":["../../src/themes/calm.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,+CAwHf,CAAA"}
|
package/dist/themes/calm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, controls, fields, icons, tables } from '../util/defaults.js';
|
|
1
|
+
import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* The counter-trend: an interface that does not compete for attention.
|
|
@@ -73,6 +73,17 @@ export const calm = defineTheme({
|
|
|
73
73
|
'vw-pop-scale': '1.08',
|
|
74
74
|
'vw-pop-duration': '280ms',
|
|
75
75
|
'vw-theme-transition': '560ms',
|
|
76
|
+
// Slow here too, so an overlay drifts in rather than appearing.
|
|
77
|
+
'vw-overlay-duration': '320ms',
|
|
78
|
+
'vw-overlay-exit': '240ms',
|
|
79
|
+
/**
|
|
80
|
+
* Every state is a shade quieter than Vuetify draws it. The theme
|
|
81
|
+
* spends colour only on what you can act on, and a wash under
|
|
82
|
+
* something already selected is not one of those things.
|
|
83
|
+
*/
|
|
84
|
+
'focus-opacity': 0.1,
|
|
85
|
+
'activated-opacity': 0.06,
|
|
86
|
+
'disabled-opacity': 0.35,
|
|
76
87
|
// Barely there, like everything else in this theme.
|
|
77
88
|
'vw-timeline-line': 'rgba(var(--v-border-color), 0.5)',
|
|
78
89
|
'vw-timeline-line-width': '1px',
|
|
@@ -103,6 +114,16 @@ export const calm = defineTheme({
|
|
|
103
114
|
ratingEmpty: 'mdi-circle-outline',
|
|
104
115
|
close: 'mdi-close',
|
|
105
116
|
}),
|
|
117
|
+
// Nothing arrives from a direction, and nothing scales: the surface
|
|
118
|
+
// is simply there a moment later than you asked.
|
|
119
|
+
overlays({
|
|
120
|
+
dialog: 'fade-transition',
|
|
121
|
+
menu: 'fade-transition',
|
|
122
|
+
tooltip: 'fade-transition',
|
|
123
|
+
}),
|
|
124
|
+
// The discipline is subtractive, and a ripple is a fill spreading
|
|
125
|
+
// across the one part of the screen you are already looking at.
|
|
126
|
+
ripple(false),
|
|
106
127
|
],
|
|
107
128
|
});
|
|
108
129
|
//# sourceMappingURL=calm.js.map
|
package/dist/themes/calm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calm.js","sourceRoot":"","sources":["../../src/themes/calm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"calm.js","sourceRoot":"","sources":["../../src/themes/calm.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"candy.d.ts","sourceRoot":"","sources":["../../src/themes/candy.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"candy.d.ts","sourceRoot":"","sources":["../../src/themes/candy.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK,gDAiJhB,CAAA"}
|
package/dist/themes/candy.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, controls, fields, icons } from '../util/defaults.js';
|
|
1
|
+
import { bars, controls, fields, icons, overlays } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* The plush theme: a warm cream ground and padded, pillowy shapes that
|
|
@@ -98,6 +98,19 @@ export const candy = defineTheme({
|
|
|
98
98
|
'vw-focus-ring': '3px solid rgb(var(--v-theme-primary))',
|
|
99
99
|
'vw-focus-offset': '3px',
|
|
100
100
|
'vw-theme-transition': '480ms',
|
|
101
|
+
/**
|
|
102
|
+
* The spring above rides along through `--v-vw-motion-ease`, so an
|
|
103
|
+
* overlay overshoots and settles like every other shape here. The
|
|
104
|
+
* exit skips the spring by being too short to overshoot in.
|
|
105
|
+
*/
|
|
106
|
+
'vw-overlay-duration': '260ms',
|
|
107
|
+
'vw-overlay-exit': '160ms',
|
|
108
|
+
// Loud, like the rest of it: a pressed sweet goes visibly darker.
|
|
109
|
+
'focus-opacity': 0.2,
|
|
110
|
+
'activated-opacity': 0.18,
|
|
111
|
+
'disabled-opacity': 0.4,
|
|
112
|
+
// A big letter in a big circle.
|
|
113
|
+
'vw-avatar-ratio': '0.46',
|
|
101
114
|
// A fat ribbon with rounded ends — see the stylesheet.
|
|
102
115
|
'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.3)',
|
|
103
116
|
'vw-timeline-line-width': '6px',
|
|
@@ -137,6 +150,15 @@ export const candy = defineTheme({
|
|
|
137
150
|
prev: 'mdi-chevron-left',
|
|
138
151
|
breadcrumbDivider: '•',
|
|
139
152
|
}),
|
|
153
|
+
/**
|
|
154
|
+
* The dialog comes up from the bottom, the way every app a child has
|
|
155
|
+
* used opens a sheet, and the small surfaces pop rather than fade.
|
|
156
|
+
*/
|
|
157
|
+
overlays({
|
|
158
|
+
dialog: 'dialog-bottom-transition',
|
|
159
|
+
menu: 'scale-transition',
|
|
160
|
+
tooltip: 'scale-transition',
|
|
161
|
+
}),
|
|
140
162
|
],
|
|
141
163
|
});
|
|
142
164
|
//# sourceMappingURL=candy.js.map
|
package/dist/themes/candy.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"candy.js","sourceRoot":"","sources":["../../src/themes/candy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"candy.js","sourceRoot":"","sources":["../../src/themes/candy.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clay.d.ts","sourceRoot":"","sources":["../../src/themes/clay.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,IAAI,+
|
|
1
|
+
{"version":3,"file":"clay.d.ts","sourceRoot":"","sources":["../../src/themes/clay.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,IAAI,+CA4Gf,CAAA"}
|
package/dist/themes/clay.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, fields, icons } from '../util/defaults.js';
|
|
1
|
+
import { bars, fields, icons, overlays } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* Claymorphism — neumorphism's louder descendant. Where `morph` hides its
|
|
@@ -72,6 +72,12 @@ export const clay = defineTheme({
|
|
|
72
72
|
'vw-press-scale': '0.97',
|
|
73
73
|
'vw-pop-scale': '1.25',
|
|
74
74
|
'vw-pop-duration': '280ms',
|
|
75
|
+
// Soft mass takes a moment to arrive, as it takes one to squash.
|
|
76
|
+
'vw-overlay-duration': '220ms',
|
|
77
|
+
'vw-overlay-exit': '160ms',
|
|
78
|
+
// The shapes are bright and the fills are generous; the states match.
|
|
79
|
+
'focus-opacity': 0.16,
|
|
80
|
+
'activated-opacity': 0.16,
|
|
75
81
|
// A channel pressed into the ground rather than a line on it.
|
|
76
82
|
'vw-timeline-line': 'rgb(var(--v-theme-background))',
|
|
77
83
|
'vw-timeline-line-width': '8px',
|
|
@@ -97,6 +103,13 @@ export const clay = defineTheme({
|
|
|
97
103
|
ratingEmpty: 'mdi-star-outline',
|
|
98
104
|
close: 'mdi-close-circle',
|
|
99
105
|
}),
|
|
106
|
+
// Inflated, so it inflates: every floating shape swells into place
|
|
107
|
+
// rather than sliding or fading.
|
|
108
|
+
overlays({
|
|
109
|
+
dialog: 'scale-transition',
|
|
110
|
+
menu: 'scale-transition',
|
|
111
|
+
tooltip: 'scale-transition',
|
|
112
|
+
}),
|
|
100
113
|
],
|
|
101
114
|
});
|
|
102
115
|
//# sourceMappingURL=clay.js.map
|
package/dist/themes/clay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clay.js","sourceRoot":"","sources":["../../src/themes/clay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"clay.js","sourceRoot":"","sources":["../../src/themes/clay.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"darkGlass.d.ts","sourceRoot":"","sources":["../../src/themes/darkGlass.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"darkGlass.d.ts","sourceRoot":"","sources":["../../src/themes/darkGlass.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,SAAS,oDAyGpB,CAAA"}
|
package/dist/themes/darkGlass.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, fields, icons } from '../util/defaults.js';
|
|
1
|
+
import { bars, fields, icons, overlays } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* Translucent dark surfaces over a deep violet ground, with backdrop blur
|
|
@@ -67,6 +67,12 @@ export const darkGlass = defineTheme({
|
|
|
67
67
|
'vw-hover-lift': '2px',
|
|
68
68
|
'vw-pop-scale': '1.18',
|
|
69
69
|
'vw-pop-duration': '240ms',
|
|
70
|
+
// Glass slides, and it takes its time doing it.
|
|
71
|
+
'vw-overlay-duration': '260ms',
|
|
72
|
+
'vw-overlay-exit': '200ms',
|
|
73
|
+
// The ground is dark enough that a state has to be lit to register.
|
|
74
|
+
'focus-opacity': 0.16,
|
|
75
|
+
'activated-opacity': 0.14,
|
|
70
76
|
// Violet through the glass.
|
|
71
77
|
'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.45)',
|
|
72
78
|
'vw-timeline-line-width': '2px',
|
|
@@ -93,6 +99,12 @@ export const darkGlass = defineTheme({
|
|
|
93
99
|
ratingFull: 'mdi-star',
|
|
94
100
|
ratingEmpty: 'mdi-star-outline',
|
|
95
101
|
}),
|
|
102
|
+
// Sheets slide; the tip, which is not a sheet, fades.
|
|
103
|
+
overlays({
|
|
104
|
+
dialog: 'slide-y-transition',
|
|
105
|
+
menu: 'slide-y-transition',
|
|
106
|
+
tooltip: 'fade-transition',
|
|
107
|
+
}),
|
|
96
108
|
],
|
|
97
109
|
});
|
|
98
110
|
//# sourceMappingURL=darkGlass.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"darkGlass.js","sourceRoot":"","sources":["../../src/themes/darkGlass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"darkGlass.js","sourceRoot":"","sources":["../../src/themes/darkGlass.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graphite.d.ts","sourceRoot":"","sources":["../../src/themes/graphite.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"graphite.d.ts","sourceRoot":"","sources":["../../src/themes/graphite.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,mDA4KnB,CAAA"}
|
package/dist/themes/graphite.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, controls, fields, icons, tables } from '../util/defaults.js';
|
|
1
|
+
import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* The product-dark theme every developer tool converged on: near-black,
|
|
@@ -91,6 +91,33 @@ export const graphite = defineTheme({
|
|
|
91
91
|
'vw-pop-duration': '140ms',
|
|
92
92
|
'vw-focus-ring': '1px solid rgba(var(--v-theme-primary), 0.85)',
|
|
93
93
|
'vw-theme-transition': '260ms',
|
|
94
|
+
// The overlays repaint at the same 90ms as everything else; the
|
|
95
|
+
// linear easing above reaches them through `--v-vw-motion-ease`.
|
|
96
|
+
'vw-overlay-duration': '90ms',
|
|
97
|
+
'vw-overlay-exit': '70ms',
|
|
98
|
+
/**
|
|
99
|
+
* `primary` here is a near-white, so a tonal fill drawn at Vuetify's
|
|
100
|
+
* 0.12 is a pale grey on a near-black ground — the one place this
|
|
101
|
+
* palette needs more of the accent rather than less.
|
|
102
|
+
*/
|
|
103
|
+
'activated-opacity': 0.14,
|
|
104
|
+
'focus-opacity': 0.18,
|
|
105
|
+
'disabled-opacity': 0.4,
|
|
106
|
+
/**
|
|
107
|
+
* The theme ships a mono stack for exactly this, and a developer tool
|
|
108
|
+
* shows more code than prose. Both take the raised surface rather
|
|
109
|
+
* than Vuetify's stock grey.
|
|
110
|
+
*/
|
|
111
|
+
'theme-code': '#16191D',
|
|
112
|
+
'theme-on-code': '#E6E9ED',
|
|
113
|
+
'theme-kbd': '#1B1E23',
|
|
114
|
+
'theme-on-kbd': '#E6E9ED',
|
|
115
|
+
/**
|
|
116
|
+
* `primary` is a near-white here, and a wash of it over near-black
|
|
117
|
+
* text is a grey haze. The indigo held in `secondary` is what every
|
|
118
|
+
* editor this theme is modelled on selects with.
|
|
119
|
+
*/
|
|
120
|
+
'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.4)',
|
|
94
121
|
// Hairline and squared off, like every other edge here.
|
|
95
122
|
'vw-timeline-line': 'rgba(var(--v-border-color), 0.35)',
|
|
96
123
|
'vw-timeline-line-width': '1px',
|
|
@@ -100,17 +127,15 @@ export const graphite = defineTheme({
|
|
|
100
127
|
},
|
|
101
128
|
defaults: [
|
|
102
129
|
{
|
|
103
|
-
// No ripple anywhere: it is a Material animation about the weight of
|
|
104
|
-
// a surface, and nothing in this theme has any.
|
|
105
130
|
// No `density` here on purpose: Vuetify subtracts it from the size
|
|
106
131
|
// height, and a compact `x-small` button ends up shorter than its
|
|
107
132
|
// own label. The tight geometry comes from the radius instead.
|
|
108
|
-
|
|
133
|
+
// The ripple is off through `ripple(false)` below, which reaches the
|
|
134
|
+
// tick boxes this list used to miss.
|
|
135
|
+
VBtn: { variant: 'flat' },
|
|
109
136
|
VCard: { variant: 'outlined' },
|
|
110
137
|
VAlert: { variant: 'outlined', density: 'compact' },
|
|
111
|
-
VChip: { variant: 'outlined', size: 'small'
|
|
112
|
-
VListItem: { ripple: false },
|
|
113
|
-
VTab: { ripple: false },
|
|
138
|
+
VChip: { variant: 'outlined', size: 'small' },
|
|
114
139
|
// Flush stacked rows rather than floating panels with gaps.
|
|
115
140
|
VExpansionPanels: { variant: 'accordion' },
|
|
116
141
|
VNavigationDrawer: { border: 'e' },
|
|
@@ -142,6 +167,16 @@ export const graphite = defineTheme({
|
|
|
142
167
|
close: 'mdi-close',
|
|
143
168
|
breadcrumbDivider: '/',
|
|
144
169
|
}),
|
|
170
|
+
/**
|
|
171
|
+
* Nothing here has weight, so nothing arrives from anywhere: a panel is
|
|
172
|
+
* repainted rather than opened. Linear, at the same 90ms as the rest.
|
|
173
|
+
*/
|
|
174
|
+
overlays({
|
|
175
|
+
dialog: 'fade-transition',
|
|
176
|
+
menu: 'fade-transition',
|
|
177
|
+
tooltip: 'fade-transition',
|
|
178
|
+
}),
|
|
179
|
+
ripple(false),
|
|
145
180
|
],
|
|
146
181
|
});
|
|
147
182
|
//# sourceMappingURL=graphite.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graphite.js","sourceRoot":"","sources":["../../src/themes/graphite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"graphite.js","sourceRoot":"","sources":["../../src/themes/graphite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,qEAAqE;QAClF,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QACpD,KAAK,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC;KACnC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,SAAS;YAClB,gBAAgB,EAAE,SAAS;YAC3B,eAAe,EAAE,SAAS;YAC1B,iBAAiB,EAAE,SAAS;YAC5B,oBAAoB,EAAE,SAAS;YAC/B,OAAO,EAAE,SAAS;YAClB,kBAAkB,EAAE,SAAS;YAC7B,SAAS,EAAE,SAAS;YACpB,oBAAoB,EAAE,SAAS;YAC/B,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,eAAe,EAAE,SAAS;YAC1B,8DAA8D;YAC9D,+DAA+D;YAC/D,yFAAyF;YACzF,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,SAAS;SACtB;QACD,SAAS,EAAE;YACT;qEACyD;YACzD,iBAAiB,EACf,gEAAgE;YAClE,cAAc,EAAE,SAAS;YACzB,gBAAgB,EAAE,IAAI;YACtB,cAAc,EAAE,SAAS;YACzB,uBAAuB,EAAE,IAAI;YAC7B,yBAAyB,EAAE,GAAG;YAC9B,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,2DAA2D;YACxE,qEAAqE;YACrE,oCAAoC;YACpC,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,KAAK;YACrB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,KAAK;YACxB,iBAAiB,EAAE,KAAK;YACxB,kBAAkB,EAAE,MAAM;YAC1B,iBAAiB,EAAE,GAAG;YACtB,eAAe,EAAE,KAAK;YACtB,6DAA6D;YAC7D,mBAAmB,EAAE,KAAK;YAC1B,qBAAqB,EAAE,UAAU;YACjC,0CAA0C;YAC1C,cAAc,EAAE,KAAK;YACrB,gBAAgB,EAAE,QAAQ;YAC1B,iBAAiB,EAAE,WAAW;YAC9B,sEAAsE;YACtE,YAAY,EAAE,cAAc;YAC5B,sBAAsB,EAAE,KAAK;YAC7B,qEAAqE;YACrE,kEAAkE;YAClE,mBAAmB,EAAE,6CAA6C;YAClE,mBAAmB,EAAE,gCAAgC;YACrD,+DAA+D;YAC/D,oBAAoB,EAAE,MAAM;YAE5B,yEAAyE;YACzE,oBAAoB,EAAE,MAAM;YAC5B,gBAAgB,EAAE,QAAQ;YAC1B,gBAAgB,EAAE,GAAG;YACrB,cAAc,EAAE,KAAK;YACrB,iBAAiB,EAAE,OAAO;YAC1B,eAAe,EAAE,8CAA8C;YAC/D,qBAAqB,EAAE,OAAO;YAE9B,gEAAgE;YAChE,iEAAiE;YACjE,qBAAqB,EAAE,MAAM;YAC7B,iBAAiB,EAAE,MAAM;YACzB;;;;eAIG;YACH,mBAAmB,EAAE,IAAI;YACzB,eAAe,EAAE,IAAI;YACrB,kBAAkB,EAAE,GAAG;YACvB;;;;eAIG;YACH,YAAY,EAAE,SAAS;YACvB,eAAe,EAAE,SAAS;YAC1B,WAAW,EAAE,SAAS;YACtB,cAAc,EAAE,SAAS;YAEzB;;;;eAIG;YACH,mBAAmB,EAAE,qCAAqC;YAE1D,wDAAwD;YACxD,kBAAkB,EAAE,mCAAmC;YACvD,wBAAwB,EAAE,KAAK;YAC/B,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,KAAK;SAC1B;KACF;IACD,QAAQ,EAAE;QACR;YACE,mEAAmE;YACnE,kEAAkE;YAClE,+DAA+D;YAC/D,qEAAqE;YACrE,qCAAqC;YACrC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE;YACnD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE;YAC7C,4DAA4D;YAC5D,gBAAgB,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;YAC1C,iBAAiB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;SACnC;QACD,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;QACnD,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;QAChC,MAAM,CAAC,SAAS,CAAC;QACjB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;QACjC;YACE,mEAAmE;YACnE,8CAA8C;YAC9C,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC5B,OAAO,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE;SACzC;QACD,KAAK,CAAC;YACJ,kEAAkE;YAClE,yCAAyC;YACzC,QAAQ,EAAE,kBAAkB;YAC5B,QAAQ,EAAE,gBAAgB;YAC1B,UAAU,EAAE,qBAAqB;YACjC,WAAW,EAAE,4BAA4B;YACzC,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,gBAAgB;YAC1B,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,yBAAyB;YAChC,IAAI,EAAE,0BAA0B;YAChC,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,WAAW;YAClB,iBAAiB,EAAE,GAAG;SACvB,CAAC;QACF;;;WAGG;QACH,QAAQ,CAAC;YACP,MAAM,EAAE,iBAAiB;YACzB,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,iBAAiB;SAC3B,CAAC;QACF,MAAM,CAAC,KAAK,CAAC;KACd;CACF,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"liquidGlass.d.ts","sourceRoot":"","sources":["../../src/themes/liquidGlass.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"liquidGlass.d.ts","sourceRoot":"","sources":["../../src/themes/liquidGlass.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,sDA0JtB,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, controls, fields, icons, tables } from '../util/defaults.js';
|
|
1
|
+
import { bars, controls, fields, icons, overlays, tables } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* Glass that refracts rather than merely blurs, after Apple's iOS 26
|
|
@@ -47,10 +47,20 @@ export const liquidGlass = defineTheme({
|
|
|
47
47
|
warning: '#FF9500',
|
|
48
48
|
'on-surface': '#1C1C1E',
|
|
49
49
|
'on-background': '#1C1C1E',
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Vuetify picks the label colour by luminance and settles for about
|
|
52
|
+
* 3:1, which is the bar for large text rather than for a button
|
|
53
|
+
* label. Measured on the filled buttons: error 3.5:1 → 4.8:1.
|
|
54
|
+
*
|
|
55
|
+
* `info` is deliberately not in this list. It is the same `#0071ED`
|
|
56
|
+
* as `primary`, and forcing a label on one of them and not the other
|
|
57
|
+
* put two different inks on one colour in one theme. It is also the
|
|
58
|
+
* one hue here that sits almost exactly on the crossover: black and
|
|
59
|
+
* white both measure 4.58:1, so nothing is bought by stating either,
|
|
60
|
+
* while APCA separates them 79 to 33 in white's favour. Vuetify's own
|
|
61
|
+
* pick is white, which is what the platform this theme follows puts
|
|
62
|
+
* on system blue, so the theme says nothing and lets it.
|
|
63
|
+
*/
|
|
54
64
|
'on-error': '#1C1C1E',
|
|
55
65
|
'on-success': '#06140A',
|
|
56
66
|
'on-warning': '#1A1004',
|
|
@@ -96,6 +106,22 @@ export const liquidGlass = defineTheme({
|
|
|
96
106
|
'vw-pop-scale': '1.2',
|
|
97
107
|
'vw-pop-duration': '300ms',
|
|
98
108
|
'vw-theme-transition': '520ms',
|
|
109
|
+
/**
|
|
110
|
+
* The iOS curve above carries overlays too, through
|
|
111
|
+
* `--v-vw-motion-ease`: fast out of the gate, then a long settle.
|
|
112
|
+
*/
|
|
113
|
+
'vw-overlay-duration': '320ms',
|
|
114
|
+
'vw-overlay-exit': '220ms',
|
|
115
|
+
/**
|
|
116
|
+
* The scrim, and with it the pane's own fade — the stylesheet reads
|
|
117
|
+
* this same number for the opacity leg of the entrance. Short, so the
|
|
118
|
+
* frost is alight while the pane is still arriving; see the note over
|
|
119
|
+
* the rule for why the two have to agree.
|
|
120
|
+
*/
|
|
121
|
+
'vw-scrim-duration': '120ms',
|
|
122
|
+
// Through glass a state is a change of light, not a block of colour.
|
|
123
|
+
'focus-opacity': 0.12,
|
|
124
|
+
'activated-opacity': 0.12,
|
|
99
125
|
// Frosted, so the line is a highlight rather than a rule.
|
|
100
126
|
'vw-timeline-line': 'rgba(var(--v-theme-on-surface), 0.18)',
|
|
101
127
|
'vw-timeline-line-width': '2px',
|
|
@@ -130,6 +156,16 @@ export const liquidGlass = defineTheme({
|
|
|
130
156
|
sortAsc: 'mdi-chevron-up',
|
|
131
157
|
sortDesc: 'mdi-chevron-down',
|
|
132
158
|
}),
|
|
159
|
+
/**
|
|
160
|
+
* A sheet of glass scales up from the control that summoned it, which
|
|
161
|
+
* is what the platform this theme follows does. The tooltip fades:
|
|
162
|
+
* it is one word, and a word that grows is a word you re-read.
|
|
163
|
+
*/
|
|
164
|
+
overlays({
|
|
165
|
+
dialog: 'scale-transition',
|
|
166
|
+
menu: 'scale-transition',
|
|
167
|
+
tooltip: 'fade-transition',
|
|
168
|
+
}),
|
|
133
169
|
],
|
|
134
170
|
});
|
|
135
171
|
//# sourceMappingURL=liquidGlass.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"liquidGlass.js","sourceRoot":"","sources":["../../src/themes/liquidGlass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"liquidGlass.js","sourceRoot":"","sources":["../../src/themes/liquidGlass.ts"],"names":[],"mappings":"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"}
|
package/dist/themes/lux.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lux.d.ts","sourceRoot":"","sources":["../../src/themes/lux.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"lux.d.ts","sourceRoot":"","sources":["../../src/themes/lux.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,GAAG,8CAmJd,CAAA"}
|
package/dist/themes/lux.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bars, controls, fields, icons, tables } from '../util/defaults.js';
|
|
1
|
+
import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js';
|
|
2
2
|
import { defineTheme } from '../util/defineTheme.js';
|
|
3
3
|
/**
|
|
4
4
|
* Restraint as decoration: hairline rules, wide letter-spacing, small caps
|
|
@@ -32,13 +32,24 @@ export const lux = defineTheme({
|
|
|
32
32
|
error: '#96322A',
|
|
33
33
|
info: '#3D5A73',
|
|
34
34
|
success: '#4A6B4F',
|
|
35
|
-
|
|
35
|
+
/**
|
|
36
|
+
* Deepened rather than re-inked. Vuetify picks the label colour by
|
|
37
|
+
* APCA and settles for about 3:1 on WCAG, which is the bar for large
|
|
38
|
+
* text rather than for a button label — so this theme states `on-*`
|
|
39
|
+
* wherever the automatic pick falls short.
|
|
40
|
+
*
|
|
41
|
+
* Warning is the case where doing that made things worse. The ochre
|
|
42
|
+
* sat where WCAG wanted black and APCA wanted white by a wide margin
|
|
43
|
+
* (73 to 37), and the forced dark label did not even clear 4.5:1
|
|
44
|
+
* (4.49:1). Taking 9 per cent of lightness out of the hue satisfies both:
|
|
45
|
+
* white now reads 4.56:1 on the filled button, APCA 79, and the colour
|
|
46
|
+
* as text on the surface goes from 3.88:1 — under the bar it was
|
|
47
|
+
* being held to elsewhere — to 4.56:1. The label is left to the
|
|
48
|
+
* automatic pick, which is white.
|
|
49
|
+
*/
|
|
50
|
+
warning: '#996E1B',
|
|
36
51
|
'on-surface': '#1A1A1A',
|
|
37
52
|
'on-background': '#1A1A1A',
|
|
38
|
-
// Vuetify picks the label colour by luminance and settles for
|
|
39
|
-
// about 3:1, which is the bar for large text rather than for a
|
|
40
|
-
// button label. Measured on the filled buttons: warning 3.9:1 → 4.5:1.
|
|
41
|
-
'on-warning': '#1A1A1A',
|
|
42
53
|
},
|
|
43
54
|
variables: {
|
|
44
55
|
/* A panel standing on its own — a bare list, sheet, banner or table.
|
|
@@ -73,6 +84,29 @@ export const lux = defineTheme({
|
|
|
73
84
|
'vw-pop-duration': '220ms',
|
|
74
85
|
'vw-focus-ring': '1px solid rgb(var(--v-theme-primary))',
|
|
75
86
|
'vw-theme-transition': '520ms',
|
|
87
|
+
// The same unhurried curve the rest of the theme moves on.
|
|
88
|
+
'vw-overlay-duration': '240ms',
|
|
89
|
+
'vw-overlay-exit': '180ms',
|
|
90
|
+
// Restraint applies to states too: an outline and a hairline of
|
|
91
|
+
// wash, never a block of colour.
|
|
92
|
+
'focus-opacity': 0.12,
|
|
93
|
+
'activated-opacity': 0.08,
|
|
94
|
+
'disabled-opacity': 0.35,
|
|
95
|
+
/**
|
|
96
|
+
* A tab is a label in this theme, set at the same size as the caps on
|
|
97
|
+
* the buttons rather than at Vuetify's body-sized default — the wide
|
|
98
|
+
* tracking below needs the smaller size to stay a line and not a
|
|
99
|
+
* heading.
|
|
100
|
+
*/
|
|
101
|
+
'vw-tab-size': '0.75rem',
|
|
102
|
+
/**
|
|
103
|
+
* Initials set small inside a generous circle: the air around a mark
|
|
104
|
+
* is the whole point of the register this theme is written in.
|
|
105
|
+
*/
|
|
106
|
+
'vw-avatar-ratio': '0.34',
|
|
107
|
+
// Ink again in `primary`, so the highlight is the theme's gold —
|
|
108
|
+
// the one flourish it allows itself, spent where a reader drags.
|
|
109
|
+
'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.25)',
|
|
76
110
|
// A gold hairline; the dot stays a circle.
|
|
77
111
|
'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.55)',
|
|
78
112
|
'vw-timeline-line-width': '1px',
|
|
@@ -105,6 +139,14 @@ export const lux = defineTheme({
|
|
|
105
139
|
// An em dash rather than a slash — the one flourish the theme allows.
|
|
106
140
|
breadcrumbDivider: '—',
|
|
107
141
|
}),
|
|
142
|
+
// Expensive things do not bounce. They fade, slowly, and stop.
|
|
143
|
+
overlays({
|
|
144
|
+
dialog: 'fade-transition',
|
|
145
|
+
menu: 'fade-transition',
|
|
146
|
+
tooltip: 'fade-transition',
|
|
147
|
+
}),
|
|
148
|
+
// Material's ink blot is the loudest thing this theme could do.
|
|
149
|
+
ripple(false),
|
|
108
150
|
],
|
|
109
151
|
});
|
|
110
152
|
//# sourceMappingURL=lux.js.map
|