@universal-material/web 3.5.9 → 3.6.1
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/css/universal-material.css +128 -598
- package/css/universal-material.min.css +128 -598
- package/custom-elements.json +10089 -10089
- package/package.json +1 -1
- package/scss/_css-vars.scss +5 -1
- package/scss/_global.scss +1 -1
- package/scss/_reboot.scss +2 -4
- package/scss/mixins/_text-bg.scss +2 -12
- package/scss/table/_table.scss +3 -3
- package/scss/utilities/_divider.scss +1 -1
- package/scss/utilities/_scheme.scss +0 -2
- package/scss/utilities/_text.scss +1 -0
- package/theme/theme-builder.d.ts.map +1 -1
- package/theme/theme-builder.js +1 -2
- package/theme/theme-builder.js.map +1 -1
- package/vscode.html-custom-data.json +59 -59
package/package.json
CHANGED
package/scss/_css-vars.scss
CHANGED
|
@@ -20,13 +20,17 @@
|
|
|
20
20
|
|
|
21
21
|
--u-font-family: #{variables.$font-family};
|
|
22
22
|
--u-font-monospace: #{variables.$font-mono};
|
|
23
|
-
--u-current-text-color: var(--u-color-on-body);
|
|
24
23
|
--u-text-opacity: var(--u-high-emphasis-opacity);
|
|
25
24
|
--u-layout-margin: var(--u-layout-margin-default);
|
|
26
25
|
--u-layout-gutter: var(--u-layout-gutter-default);
|
|
27
26
|
--u-layout-margin-default: var(--u-spacing-medium);
|
|
28
27
|
--u-layout-gutter-default: var(--u-spacing-medium);
|
|
29
28
|
|
|
29
|
+
|
|
30
|
+
--u-color-high-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-high-emphasis-opacity))} !important;
|
|
31
|
+
--u-color-low-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))} !important;
|
|
32
|
+
--u-color-lower-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-lower-emphasis-opacity))} !important;
|
|
33
|
+
|
|
30
34
|
@each $name, $value in variables.$font-weights {
|
|
31
35
|
--u-font-weight-#{$name}: #{$value};
|
|
32
36
|
}
|
package/scss/_global.scss
CHANGED
package/scss/_reboot.scss
CHANGED
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
body {
|
|
52
52
|
--u-current-bg-color: var(--u-color-body);
|
|
53
53
|
background-color: var(--u-current-bg-color);
|
|
54
|
-
color: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-text-opacity))};
|
|
55
54
|
margin: 0; // 1
|
|
56
55
|
@include mixins.typo-prop(body-l, font-size);
|
|
57
56
|
@include mixins.typo-prop(body-l, font-weight);
|
|
@@ -220,8 +219,7 @@
|
|
|
220
219
|
}
|
|
221
220
|
|
|
222
221
|
a {
|
|
223
|
-
--u-
|
|
224
|
-
color: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-text-opacity))};
|
|
222
|
+
color: #{functions.get-color-transparency-mix(var(--u-link-color, --u-color-primary), var(--u-text-opacity))};
|
|
225
223
|
text-decoration: none;
|
|
226
224
|
|
|
227
225
|
@media (hover: hover) {
|
|
@@ -295,7 +293,7 @@
|
|
|
295
293
|
caption {
|
|
296
294
|
padding-top: 0.5rem;
|
|
297
295
|
padding-bottom: 0.5rem;
|
|
298
|
-
color: #{functions.get-color-transparency-mix(
|
|
296
|
+
color: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))};
|
|
299
297
|
text-align: left;
|
|
300
298
|
}
|
|
301
299
|
|
|
@@ -3,21 +3,11 @@
|
|
|
3
3
|
@use "../functions";
|
|
4
4
|
|
|
5
5
|
@mixin current-color-vars-important($current-color-var-name) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--u-color-high-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-high-emphasis-opacity))} !important;
|
|
9
|
-
--u-color-low-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-low-emphasis-opacity))} !important;
|
|
10
|
-
--u-color-lower-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-lower-emphasis-opacity))} !important;
|
|
11
|
-
color: var(--u-color-high-emphasis) !important;
|
|
6
|
+
color: var(#{$current-color-var-name}) !important;
|
|
12
7
|
}
|
|
13
8
|
|
|
14
9
|
@mixin current-color-vars($current-color-var-name) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--u-color-high-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-high-emphasis-opacity))};
|
|
18
|
-
--u-color-low-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-low-emphasis-opacity))};
|
|
19
|
-
--u-color-lower-emphasis: #{functions.get-color-transparency-mix(var(--u-current-text-color), var(--u-lower-emphasis-opacity))};
|
|
20
|
-
color: var(--u-color-high-emphasis);
|
|
10
|
+
color: var(#{$current-color-var-name});
|
|
21
11
|
}
|
|
22
12
|
|
|
23
13
|
@mixin bg-variant-important($color-name) {
|
package/scss/table/_table.scss
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
> tr {
|
|
18
18
|
@at-root .u-table:has(> thead) > tbody > tr,
|
|
19
19
|
&:not(:first-child) {
|
|
20
|
-
border-top: 1px solid #{functions.get-color-transparency-mix(
|
|
20
|
+
border-top: 1px solid #{functions.get-color-transparency-mix(currentColor, var(--u-table-divider-opacity, 20%))};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
> td {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
padding: var(--u-th-padding, var(--u-table-cell-padding));
|
|
33
33
|
font-size: var(--u-th-font-size, .8125rem);
|
|
34
34
|
font-weight: var(--u-th-font-weight, var(--u-table-cell-font-weight));
|
|
35
|
-
color: #{functions.get-color-transparency-mix(
|
|
35
|
+
color: #{functions.get-color-transparency-mix(currentColor, var(--u-text-opacity))};
|
|
36
36
|
text-align: start;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
> tbody > tr,
|
|
43
43
|
> tr {
|
|
44
44
|
&:hover {
|
|
45
|
-
background-color: #{functions.get-color-transparency-mix(
|
|
45
|
+
background-color: #{functions.get-color-transparency-mix(currentColor, var(--u-table-hover-opacity))};
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-builder.d.ts","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,qBAAa,YAAY;;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,UAAU,EAAE,CAAM;IAE1B,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO;IAOP,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAIpD,MAAM,CAAC,aAAa,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAO3D,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAOxD,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;IAatE,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,GAAG,YAAY;IAS1E,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY;IAK3C,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,mBAAmB;
|
|
1
|
+
{"version":3,"file":"theme-builder.d.ts","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,qBAAa,YAAY;;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,UAAU,EAAE,CAAM;IAE1B,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO;IAOP,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAIpD,MAAM,CAAC,aAAa,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAO3D,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAOxD,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;IAatE,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,GAAG,YAAY;IAS1E,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY;IAK3C,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,0BAA0B;IAQlC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAQ5C,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAoBpB,KAAK,IAAI,MAAM;CAehB"}
|
package/theme/theme-builder.js
CHANGED
|
@@ -83,8 +83,7 @@ export class ThemeBuilder {
|
|
|
83
83
|
.add('--u-color-body', 'var(--u-color-surface)')
|
|
84
84
|
.add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')
|
|
85
85
|
.add('--u-color-on-body', 'var(--u-color-on-surface)')
|
|
86
|
-
.add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')
|
|
87
|
-
.add('--u-current-text-color', 'var(--u-color-on-body)');
|
|
86
|
+
.add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)');
|
|
88
87
|
return builder.build();
|
|
89
88
|
}
|
|
90
89
|
getNeutralVariantVariables() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-builder.js","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\nimport { CssVarBuilder } from './css-var-builder.js';\nimport { neutralColors, neutralVariantColors } from './neutral-colors.js';\nimport { ThemeColor } from './theme-color.js';\n\nconst getCss = (selector: string, content: string): string =>\n `${selector} {\n${content}}`;\n\nexport class ThemeBuilder {\n cssClass: string | null;\n colors: ThemeColor[] = [];\n\n private partial = false;\n readonly #corePalette: CorePalette;\n\n private constructor(primaryColorHex: string) {\n this.cssClass = null;\n\n this.#corePalette = CorePalette.of(argbFromHex(primaryColorHex));\n this.addColorFromPalette('primary', this.#corePalette.a1);\n }\n\n static create(primaryColorHex: string): ThemeBuilder {\n return new ThemeBuilder(primaryColorHex);\n }\n\n static createPartial(primaryColorHex: string): ThemeBuilder {\n const themeBuilder = new ThemeBuilder(primaryColorHex);\n themeBuilder.partial = true;\n\n return themeBuilder;\n }\n\n addColorFromHex(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n\n this.addColorFromPalette(name, palette);\n return this;\n }\n\n addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {\n this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });\n\n this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });\n return this;\n }\n\n addStaticColor(name: string, hex: string, tone: number = 80): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n this.colors.push({ name, fixedTone: tone, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });\n return this;\n }\n\n setCssClass(cssClass: string): ThemeBuilder {\n this.cssClass = cssClass;\n return this;\n }\n\n private ensureCssClassStartsWithDot(): void {\n if (!this.cssClass || this.cssClass.startsWith('.')) {\n return;\n }\n\n this.cssClass = `.${this.cssClass}`;\n }\n\n private ensureThemeColors(): void {\n if (!this.colors.find(c => c.name === 'secondary')) {\n this.addColorFromPalette('secondary', this.#corePalette.a2);\n }\n\n if (!this.colors.find(c => c.name === 'tertiary')) {\n this.addColorFromPalette('tertiary', this.#corePalette.a3);\n }\n }\n\n private ensureStatusColors(): void {\n if (!this.colors.find(c => c.name === 'success')) {\n this.addStaticColor('success', '#198754', 60);\n }\n\n if (!this.colors.find(c => c.name === 'info')) {\n this.addStaticColor('info', '#0dcaf0');\n }\n\n if (!this.colors.find(c => c.name === 'warning')) {\n this.addStaticColor('warning', '#ffc107');\n }\n\n if (!this.colors.find(c => c.name === 'error')) {\n this.addColorFromHex('error', '#b3261e');\n }\n }\n\n private getNeutralVariables(): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralColors, this.#corePalette.n1);\n\n builder\n .add('--u-color-body', 'var(--u-color-surface)')\n .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')\n .add('--u-color-on-body', 'var(--u-color-on-surface)')\n .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')\n .add('--u-current-text-color', 'var(--u-color-on-body)');\n\n return builder.build();\n }\n\n private getNeutralVariantVariables(): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralVariantColors, this.#corePalette.n2);\n\n return builder.build();\n }\n\n getColorVariables(color: ThemeColor): string {\n const builder = CssVarBuilder.create();\n\n this.addToneColor(builder, color, color.tonalPalette);\n\n return builder.build();\n }\n\n private getColorsVariables(): string {\n let variables = '';\n\n for (const color of this.colors) {\n variables += this.getColorVariables(color);\n }\n\n variables += this.getNeutralVariables();\n variables += this.getNeutralVariantVariables();\n\n return variables;\n }\n\n private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette): void {\n for (const color of colors) {\n this.addToneColor(builder, color, palette);\n }\n }\n\n private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette): void {\n if (color.fixedTone !== undefined) {\n builder.addFromArgb(color.name, palette.tone(color.fixedTone));\n return;\n }\n\n const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');\n\n builder\n .addLightAndDarkFromArgb(color.name, palette.tone(color.lightTone!), palette.tone(color.darkTone!))\n .addLightAndDarkFromArgb(inverseName, palette.tone(color.darkTone!), palette.tone(color.lightTone!));\n\n if (color.name === 'surface' || color.name === 'on-surface') {\n const prefix = color.name.startsWith('on-') ? 'on-' : '';\n\n builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!));\n builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!));\n }\n }\n\n build(): string {\n this.ensureCssClassStartsWithDot();\n\n const selector = this.cssClass ?? ':root';\n\n this.ensureThemeColors();\n\n if (!this.partial) {\n this.ensureStatusColors();\n }\n\n const variables = `${getCss(selector, this.getColorsVariables())}\n`;\n return variables;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"theme-builder.js","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\nimport { CssVarBuilder } from './css-var-builder.js';\nimport { neutralColors, neutralVariantColors } from './neutral-colors.js';\nimport { ThemeColor } from './theme-color.js';\n\nconst getCss = (selector: string, content: string): string =>\n `${selector} {\n${content}}`;\n\nexport class ThemeBuilder {\n cssClass: string | null;\n colors: ThemeColor[] = [];\n\n private partial = false;\n readonly #corePalette: CorePalette;\n\n private constructor(primaryColorHex: string) {\n this.cssClass = null;\n\n this.#corePalette = CorePalette.of(argbFromHex(primaryColorHex));\n this.addColorFromPalette('primary', this.#corePalette.a1);\n }\n\n static create(primaryColorHex: string): ThemeBuilder {\n return new ThemeBuilder(primaryColorHex);\n }\n\n static createPartial(primaryColorHex: string): ThemeBuilder {\n const themeBuilder = new ThemeBuilder(primaryColorHex);\n themeBuilder.partial = true;\n\n return themeBuilder;\n }\n\n addColorFromHex(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n\n this.addColorFromPalette(name, palette);\n return this;\n }\n\n addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {\n this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });\n\n this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });\n return this;\n }\n\n addStaticColor(name: string, hex: string, tone: number = 80): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n this.colors.push({ name, fixedTone: tone, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });\n return this;\n }\n\n setCssClass(cssClass: string): ThemeBuilder {\n this.cssClass = cssClass;\n return this;\n }\n\n private ensureCssClassStartsWithDot(): void {\n if (!this.cssClass || this.cssClass.startsWith('.')) {\n return;\n }\n\n this.cssClass = `.${this.cssClass}`;\n }\n\n private ensureThemeColors(): void {\n if (!this.colors.find(c => c.name === 'secondary')) {\n this.addColorFromPalette('secondary', this.#corePalette.a2);\n }\n\n if (!this.colors.find(c => c.name === 'tertiary')) {\n this.addColorFromPalette('tertiary', this.#corePalette.a3);\n }\n }\n\n private ensureStatusColors(): void {\n if (!this.colors.find(c => c.name === 'success')) {\n this.addStaticColor('success', '#198754', 60);\n }\n\n if (!this.colors.find(c => c.name === 'info')) {\n this.addStaticColor('info', '#0dcaf0');\n }\n\n if (!this.colors.find(c => c.name === 'warning')) {\n this.addStaticColor('warning', '#ffc107');\n }\n\n if (!this.colors.find(c => c.name === 'error')) {\n this.addColorFromHex('error', '#b3261e');\n }\n }\n\n private getNeutralVariables(): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralColors, this.#corePalette.n1);\n\n builder\n .add('--u-color-body', 'var(--u-color-surface)')\n .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')\n .add('--u-color-on-body', 'var(--u-color-on-surface)')\n .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)');\n\n return builder.build();\n }\n\n private getNeutralVariantVariables(): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralVariantColors, this.#corePalette.n2);\n\n return builder.build();\n }\n\n getColorVariables(color: ThemeColor): string {\n const builder = CssVarBuilder.create();\n\n this.addToneColor(builder, color, color.tonalPalette);\n\n return builder.build();\n }\n\n private getColorsVariables(): string {\n let variables = '';\n\n for (const color of this.colors) {\n variables += this.getColorVariables(color);\n }\n\n variables += this.getNeutralVariables();\n variables += this.getNeutralVariantVariables();\n\n return variables;\n }\n\n private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette): void {\n for (const color of colors) {\n this.addToneColor(builder, color, palette);\n }\n }\n\n private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette): void {\n if (color.fixedTone !== undefined) {\n builder.addFromArgb(color.name, palette.tone(color.fixedTone));\n return;\n }\n\n const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');\n\n builder\n .addLightAndDarkFromArgb(color.name, palette.tone(color.lightTone!), palette.tone(color.darkTone!))\n .addLightAndDarkFromArgb(inverseName, palette.tone(color.darkTone!), palette.tone(color.lightTone!));\n\n if (color.name === 'surface' || color.name === 'on-surface') {\n const prefix = color.name.startsWith('on-') ? 'on-' : '';\n\n builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!));\n builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!));\n }\n }\n\n build(): string {\n this.ensureCssClassStartsWithDot();\n\n const selector = this.cssClass ?? ':root';\n\n this.ensureThemeColors();\n\n if (!this.partial) {\n this.ensureStatusColors();\n }\n\n const variables = `${getCss(selector, this.getColorsVariables())}\n`;\n return variables;\n }\n}\n"]}
|
|
@@ -494,6 +494,17 @@
|
|
|
494
494
|
],
|
|
495
495
|
"references": []
|
|
496
496
|
},
|
|
497
|
+
{
|
|
498
|
+
"name": "u-badge",
|
|
499
|
+
"description": "\n---\n",
|
|
500
|
+
"attributes": [
|
|
501
|
+
{
|
|
502
|
+
"name": "static",
|
|
503
|
+
"values": []
|
|
504
|
+
}
|
|
505
|
+
],
|
|
506
|
+
"references": []
|
|
507
|
+
},
|
|
497
508
|
{
|
|
498
509
|
"name": "u-button-field",
|
|
499
510
|
"description": "\n---\n",
|
|
@@ -572,17 +583,6 @@
|
|
|
572
583
|
],
|
|
573
584
|
"references": []
|
|
574
585
|
},
|
|
575
|
-
{
|
|
576
|
-
"name": "u-badge",
|
|
577
|
-
"description": "\n---\n",
|
|
578
|
-
"attributes": [
|
|
579
|
-
{
|
|
580
|
-
"name": "static",
|
|
581
|
-
"values": []
|
|
582
|
-
}
|
|
583
|
-
],
|
|
584
|
-
"references": []
|
|
585
|
-
},
|
|
586
586
|
{
|
|
587
587
|
"name": "u-calendar",
|
|
588
588
|
"description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
|
|
@@ -1625,54 +1625,6 @@
|
|
|
1625
1625
|
],
|
|
1626
1626
|
"references": []
|
|
1627
1627
|
},
|
|
1628
|
-
{
|
|
1629
|
-
"name": "u-tab-bar",
|
|
1630
|
-
"description": "\n---\n",
|
|
1631
|
-
"attributes": [
|
|
1632
|
-
{
|
|
1633
|
-
"name": "variant",
|
|
1634
|
-
"values": [
|
|
1635
|
-
{
|
|
1636
|
-
"name": "primary"
|
|
1637
|
-
},
|
|
1638
|
-
{
|
|
1639
|
-
"name": "secondary"
|
|
1640
|
-
}
|
|
1641
|
-
]
|
|
1642
|
-
}
|
|
1643
|
-
],
|
|
1644
|
-
"references": []
|
|
1645
|
-
},
|
|
1646
|
-
{
|
|
1647
|
-
"name": "u-tab",
|
|
1648
|
-
"description": "\n---\n",
|
|
1649
|
-
"attributes": [
|
|
1650
|
-
{
|
|
1651
|
-
"name": "hasIcon",
|
|
1652
|
-
"values": []
|
|
1653
|
-
},
|
|
1654
|
-
{
|
|
1655
|
-
"name": "disabled",
|
|
1656
|
-
"description": "Whether the button is disabled or not.",
|
|
1657
|
-
"values": []
|
|
1658
|
-
},
|
|
1659
|
-
{
|
|
1660
|
-
"name": "href",
|
|
1661
|
-
"description": "The URL that the link button points to.",
|
|
1662
|
-
"values": []
|
|
1663
|
-
},
|
|
1664
|
-
{
|
|
1665
|
-
"name": "target",
|
|
1666
|
-
"description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
|
|
1667
|
-
"values": []
|
|
1668
|
-
},
|
|
1669
|
-
{
|
|
1670
|
-
"name": "name",
|
|
1671
|
-
"values": []
|
|
1672
|
-
}
|
|
1673
|
-
],
|
|
1674
|
-
"references": []
|
|
1675
|
-
},
|
|
1676
1628
|
{
|
|
1677
1629
|
"name": "u-text-area",
|
|
1678
1630
|
"description": "\n---\n",
|
|
@@ -1774,6 +1726,54 @@
|
|
|
1774
1726
|
],
|
|
1775
1727
|
"references": []
|
|
1776
1728
|
},
|
|
1729
|
+
{
|
|
1730
|
+
"name": "u-tab-bar",
|
|
1731
|
+
"description": "\n---\n",
|
|
1732
|
+
"attributes": [
|
|
1733
|
+
{
|
|
1734
|
+
"name": "variant",
|
|
1735
|
+
"values": [
|
|
1736
|
+
{
|
|
1737
|
+
"name": "primary"
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
"name": "secondary"
|
|
1741
|
+
}
|
|
1742
|
+
]
|
|
1743
|
+
}
|
|
1744
|
+
],
|
|
1745
|
+
"references": []
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
"name": "u-tab",
|
|
1749
|
+
"description": "\n---\n",
|
|
1750
|
+
"attributes": [
|
|
1751
|
+
{
|
|
1752
|
+
"name": "hasIcon",
|
|
1753
|
+
"values": []
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
"name": "disabled",
|
|
1757
|
+
"description": "Whether the button is disabled or not.",
|
|
1758
|
+
"values": []
|
|
1759
|
+
},
|
|
1760
|
+
{
|
|
1761
|
+
"name": "href",
|
|
1762
|
+
"description": "The URL that the link button points to.",
|
|
1763
|
+
"values": []
|
|
1764
|
+
},
|
|
1765
|
+
{
|
|
1766
|
+
"name": "target",
|
|
1767
|
+
"description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
|
|
1768
|
+
"values": []
|
|
1769
|
+
},
|
|
1770
|
+
{
|
|
1771
|
+
"name": "name",
|
|
1772
|
+
"values": []
|
|
1773
|
+
}
|
|
1774
|
+
],
|
|
1775
|
+
"references": []
|
|
1776
|
+
},
|
|
1777
1777
|
{
|
|
1778
1778
|
"name": "u-text-field",
|
|
1779
1779
|
"description": "\n---\n",
|