@vonage/vivid 3.0.0-next.48 → 3.0.0-next.50
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 +2 -2
- package/fab/index.js +1 -1
- package/package.json +1 -1
- package/styles/fonts/SpeziaCompleteVariableItalicWeb.woff +0 -0
- package/styles/fonts/SpeziaCompleteVariableItalicWeb.woff2 +0 -0
- package/styles/fonts/SpeziaCompleteVariableUprightWeb.woff +0 -0
- package/styles/fonts/SpeziaCompleteVariableUprightWeb.woff2 +0 -0
- package/styles/fonts/SpeziaMonoCompleteVariableWeb.woff +0 -0
- package/styles/fonts/SpeziaMonoCompleteVariableWeb.woff2 +0 -0
- package/styles/fonts/spezia.css +11 -11
package/README.md
CHANGED
|
@@ -50,11 +50,11 @@ The folder contains the following files:
|
|
|
50
50
|
|
|
51
51
|
- Fonts
|
|
52
52
|
|
|
53
|
-
- `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components
|
|
53
|
+
- `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components. folder also contains the font files
|
|
54
54
|
|
|
55
55
|
- Typography
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
- `typography/desktop.css` - Defines the typography for desktop devices
|
|
58
58
|
|
|
59
59
|
- Themes - only one theme can apply at a time. thus, only one is required to be loaded
|
|
60
60
|
|
package/fab/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/object-keys.js';
|
|
|
20
20
|
import '../shared/form-associated.js';
|
|
21
21
|
import '../shared/aria-global.js';
|
|
22
22
|
|
|
23
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n font-size:
|
|
23
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n.density-extended .icon {\n font-size: 24px;\n}\n.icon:not(.density-extended) .icon {\n font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
24
24
|
styleInject(css_248z);
|
|
25
25
|
|
|
26
26
|
class Fab extends Button {}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/styles/fonts/spezia.css
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--vvd-font-family-spezia: SpeziaWebVariable;
|
|
3
|
-
--vvd-font-family-spezia-mono: SpeziaMonoWebVariable;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
1
|
@font-face {
|
|
7
|
-
font-display: block;
|
|
8
2
|
font-family: SpeziaWebVariable;
|
|
9
3
|
font-stretch: 50% 200%;
|
|
10
|
-
font-style: normal;
|
|
11
4
|
font-weight: 1 1000;
|
|
12
|
-
src: url("
|
|
5
|
+
src: url("SpeziaCompleteVariableUprightWeb.woff") format("woff");
|
|
6
|
+
src: url("SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
|
|
7
|
+
}
|
|
8
|
+
@font-face {
|
|
9
|
+
font-family: SpeziaCompleteVariableItalic;
|
|
10
|
+
font-stretch: 50% 200%;
|
|
11
|
+
font-weight: 1 1000;
|
|
12
|
+
src: url("SpeziaCompleteVariableItalicWeb.woff") format("woff");
|
|
13
|
+
src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
|
|
13
14
|
}
|
|
14
15
|
@font-face {
|
|
15
|
-
font-display: block;
|
|
16
16
|
font-family: SpeziaMonoWebVariable;
|
|
17
17
|
font-stretch: 50% 200%;
|
|
18
|
-
font-style: normal;
|
|
19
18
|
font-weight: 1 1000;
|
|
20
|
-
src: url("
|
|
19
|
+
src: url("SpeziaMonoCompleteVariableWeb.woff") format("woff");
|
|
20
|
+
src: url("SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/*# sourceMappingURL=spezia.css.map */
|