@wistia/ui 2.0.0-beta.ced7f346.8a255c0 → 2.0.0-beta.ddfb55c3.7d55872

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.
Files changed (20) hide show
  1. package/dist/css/schemes/blue.css +70 -0
  2. package/dist/css/schemes/error.css +70 -0
  3. package/dist/css/schemes/green.css +70 -0
  4. package/dist/css/schemes/info.css +70 -0
  5. package/dist/css/schemes/nav.css +74 -0
  6. package/dist/css/schemes/orange.css +70 -0
  7. package/dist/css/schemes/pink.css +70 -0
  8. package/dist/css/schemes/purple.css +70 -0
  9. package/dist/css/schemes/red.css +70 -0
  10. package/dist/css/schemes/remix-lime.css +70 -0
  11. package/dist/css/schemes/standard.css +70 -0
  12. package/dist/css/schemes/success.css +70 -0
  13. package/dist/css/schemes/vendor-hubspot.css +70 -0
  14. package/dist/css/schemes/vendor-marketo.css +70 -0
  15. package/dist/css/schemes/vendor-pardot.css +70 -0
  16. package/dist/css/schemes/warning.css +70 -0
  17. package/dist/css/schemes/yellow.css +70 -0
  18. package/dist/css/tokens.css +2217 -0
  19. package/dist/index.js +1 -1
  20. package/package.json +7 -3
package/dist/css/schemes/blue.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, blue permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-blue-1);
6
+ --wui-color-accent-2: var(--wui-blue-2);
7
+ --wui-color-accent-3: var(--wui-blue-3);
8
+ --wui-color-accent-4: var(--wui-blue-4);
9
+ --wui-color-accent-5: var(--wui-blue-5);
10
+ --wui-color-accent-6: var(--wui-blue-6);
11
+ --wui-color-accent-7: var(--wui-blue-7);
12
+ --wui-color-accent-8: var(--wui-blue-8);
13
+ --wui-color-accent-9: var(--wui-blue-9);
14
+ --wui-color-accent-10: var(--wui-blue-10);
15
+ --wui-color-accent-11: var(--wui-blue-11);
16
+ --wui-color-accent-12: var(--wui-blue-12);
17
+ --wui-color-accent-contrast: var(--wui-blue-contrast);
18
+ --wui-color-base-1: var(--wui-blue-1);
19
+ --wui-color-base-2: var(--wui-blue-2);
20
+ --wui-color-base-3: var(--wui-blue-3);
21
+ --wui-color-base-4: var(--wui-blue-4);
22
+ --wui-color-base-5: var(--wui-blue-5);
23
+ --wui-color-base-6: var(--wui-blue-6);
24
+ --wui-color-base-7: var(--wui-blue-7);
25
+ --wui-color-base-8: var(--wui-blue-8);
26
+ --wui-color-base-9: var(--wui-blue-9);
27
+ --wui-color-base-10: var(--wui-blue-10);
28
+ --wui-color-base-11: var(--wui-blue-11);
29
+ --wui-color-base-12: var(--wui-blue-12);
30
+ --wui-color-base-contrast: var(--wui-blue-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-blue-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-blue-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-blue-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/error.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, error permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-error-1);
6
+ --wui-color-accent-2: var(--wui-error-2);
7
+ --wui-color-accent-3: var(--wui-error-3);
8
+ --wui-color-accent-4: var(--wui-error-4);
9
+ --wui-color-accent-5: var(--wui-error-5);
10
+ --wui-color-accent-6: var(--wui-error-6);
11
+ --wui-color-accent-7: var(--wui-error-7);
12
+ --wui-color-accent-8: var(--wui-error-8);
13
+ --wui-color-accent-9: var(--wui-error-9);
14
+ --wui-color-accent-10: var(--wui-error-10);
15
+ --wui-color-accent-11: var(--wui-error-11);
16
+ --wui-color-accent-12: var(--wui-error-12);
17
+ --wui-color-accent-contrast: var(--wui-error-contrast);
18
+ --wui-color-base-1: var(--wui-error-1);
19
+ --wui-color-base-2: var(--wui-error-2);
20
+ --wui-color-base-3: var(--wui-error-3);
21
+ --wui-color-base-4: var(--wui-error-4);
22
+ --wui-color-base-5: var(--wui-error-5);
23
+ --wui-color-base-6: var(--wui-error-6);
24
+ --wui-color-base-7: var(--wui-error-7);
25
+ --wui-color-base-8: var(--wui-error-8);
26
+ --wui-color-base-9: var(--wui-error-9);
27
+ --wui-color-base-10: var(--wui-error-10);
28
+ --wui-color-base-11: var(--wui-error-11);
29
+ --wui-color-base-12: var(--wui-error-12);
30
+ --wui-color-base-contrast: var(--wui-error-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-error-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-error-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-error-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/green.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, green permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-green-1);
6
+ --wui-color-accent-2: var(--wui-green-2);
7
+ --wui-color-accent-3: var(--wui-green-3);
8
+ --wui-color-accent-4: var(--wui-green-4);
9
+ --wui-color-accent-5: var(--wui-green-5);
10
+ --wui-color-accent-6: var(--wui-green-6);
11
+ --wui-color-accent-7: var(--wui-green-7);
12
+ --wui-color-accent-8: var(--wui-green-8);
13
+ --wui-color-accent-9: var(--wui-green-9);
14
+ --wui-color-accent-10: var(--wui-green-10);
15
+ --wui-color-accent-11: var(--wui-green-11);
16
+ --wui-color-accent-12: var(--wui-green-12);
17
+ --wui-color-accent-contrast: var(--wui-green-contrast);
18
+ --wui-color-base-1: var(--wui-green-1);
19
+ --wui-color-base-2: var(--wui-green-2);
20
+ --wui-color-base-3: var(--wui-green-3);
21
+ --wui-color-base-4: var(--wui-green-4);
22
+ --wui-color-base-5: var(--wui-green-5);
23
+ --wui-color-base-6: var(--wui-green-6);
24
+ --wui-color-base-7: var(--wui-green-7);
25
+ --wui-color-base-8: var(--wui-green-8);
26
+ --wui-color-base-9: var(--wui-green-9);
27
+ --wui-color-base-10: var(--wui-green-10);
28
+ --wui-color-base-11: var(--wui-green-11);
29
+ --wui-color-base-12: var(--wui-green-12);
30
+ --wui-color-base-contrast: var(--wui-green-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-green-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-green-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-green-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/info.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, info permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-blue-1);
6
+ --wui-color-accent-2: var(--wui-blue-2);
7
+ --wui-color-accent-3: var(--wui-blue-3);
8
+ --wui-color-accent-4: var(--wui-blue-4);
9
+ --wui-color-accent-5: var(--wui-blue-5);
10
+ --wui-color-accent-6: var(--wui-blue-6);
11
+ --wui-color-accent-7: var(--wui-blue-7);
12
+ --wui-color-accent-8: var(--wui-blue-8);
13
+ --wui-color-accent-9: var(--wui-blue-9);
14
+ --wui-color-accent-10: var(--wui-blue-10);
15
+ --wui-color-accent-11: var(--wui-blue-11);
16
+ --wui-color-accent-12: var(--wui-blue-12);
17
+ --wui-color-accent-contrast: var(--wui-blue-contrast);
18
+ --wui-color-base-1: var(--wui-blue-1);
19
+ --wui-color-base-2: var(--wui-blue-2);
20
+ --wui-color-base-3: var(--wui-blue-3);
21
+ --wui-color-base-4: var(--wui-blue-4);
22
+ --wui-color-base-5: var(--wui-blue-5);
23
+ --wui-color-base-6: var(--wui-blue-6);
24
+ --wui-color-base-7: var(--wui-blue-7);
25
+ --wui-color-base-8: var(--wui-blue-8);
26
+ --wui-color-base-9: var(--wui-blue-9);
27
+ --wui-color-base-10: var(--wui-blue-10);
28
+ --wui-color-base-11: var(--wui-blue-11);
29
+ --wui-color-base-12: var(--wui-blue-12);
30
+ --wui-color-base-contrast: var(--wui-blue-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-blue-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-blue-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-blue-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/nav.css ADDED
@@ -0,0 +1,74 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, nav permutation
4
+ * ------------------------------------------- */
5
+ /* The page background itself — the backdrop everything sits on. One per page; never on components. */
6
+ --wui-color-bg-app: #1e3399;
7
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
8
+ --wui-color-bg-fill: var(--wui-blue-1);
9
+ /* Pressed background for a fill element. */
10
+ --wui-color-bg-fill-active: #dcdfef;
11
+ /* Hover background for an interactive fill element. */
12
+ --wui-color-bg-fill-hover: #e7e9f4;
13
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
14
+ --wui-color-bg-surface: #0000;
15
+ /* Pressed background for an item resting on surface. */
16
+ --wui-color-bg-surface-active: #122271;
17
+ /* Background of any disabled control. Static across color schemes. */
18
+ --wui-color-bg-surface-disabled: #0000;
19
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
20
+ --wui-color-bg-surface-hover: #15267b;
21
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
22
+ --wui-color-bg-surface-secondary: #15267b;
23
+ /* Pressed background for a surface-secondary element. */
24
+ --wui-color-bg-surface-secondary-active: #101e67;
25
+ /* Hover background for an interactive surface-secondary element. */
26
+ --wui-color-bg-surface-secondary-hover: #122271;
27
+ /* Background of a selected-but-not-filled element: the chosen item in a list, a toggled button, a selected calendar range. Static across color schemes. */
28
+ --wui-color-bg-surface-selected: var(--wui-color-bg-fill);
29
+ /* Pressed background for a selected element. Static across color schemes. */
30
+ --wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
31
+ /* Hover background for a selected element. Static across color schemes. */
32
+ --wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
33
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
34
+ --wui-color-bg-surface-tertiary: #0d1a5c;
35
+ /* Default edge for containers: cards, menus, popovers, tables, dividers. */
36
+ --wui-color-border: var(--wui-color-bg-fill);
37
+ /* Active or open edge for an interactive container. */
38
+ --wui-color-border-active: var(--wui-color-bg-fill-active);
39
+ /* Pressed edge for a selected element. Static across color schemes. */
40
+ --wui-color-border-active-selected: #0000;
41
+ /* Hover edge for an interactive container. */
42
+ --wui-color-border-hover: var(--wui-color-bg-fill-hover);
43
+ /* Hover edge for a selected element. Static across color schemes. */
44
+ --wui-color-border-hover-selected: #0000;
45
+ /* Higher-contrast edge for elements whose boundary is an affordance — chiefly form controls: inputs, checkboxes, radios, sliders. */
46
+ --wui-color-border-secondary: #101e67;
47
+ /* Edge of a selected element. Static across color schemes. */
48
+ --wui-color-border-selected: #0000;
49
+ /* The visible keyboard-focus indicator on any focusable element. */
50
+ --wui-color-focus-ring: var(--wui-blue-1);
51
+ /* Default icon color, slightly softer than text; use for icons next to labels. */
52
+ --wui-color-icon: var(--wui-blue-1);
53
+ /* Icons inside a disabled control. Static across color schemes. */
54
+ --wui-color-icon-disabled: var(--wui-blue-8);
55
+ /* Icons sitting on a bg-fill background. */
56
+ --wui-color-icon-on-fill: var(--wui-color-bg-app);
57
+ /* Icons inside a selected element. Static across color schemes. */
58
+ --wui-color-icon-selected: var(--wui-color-bg-app);
59
+ /* Text inside a selected element. Static across color schemes. */
60
+ --wui-color-segmented-color-text-override: var(--wui-blue-9);
61
+ /* Default foreground for headings, body copy, labels, and values. */
62
+ --wui-color-text: var(--wui-blue-1);
63
+ /* Label text inside buttons and button-like controls. Matches text in the standard scheme; resolves to the accent in colored schemes. */
64
+ --wui-color-text-button: var(--wui-blue-1);
65
+ /* Text inside a disabled control or inert content. Static across color schemes. */
66
+ --wui-color-text-disabled: var(--wui-blue-8);
67
+ /* Inline links and link-styled text. */
68
+ --wui-color-text-link: var(--wui-blue-4);
69
+ /* Any text sitting on a bg-fill (or tooltip) background. */
70
+ --wui-color-text-on-fill: var(--wui-color-bg-app);
71
+ /* Muted supporting text: descriptions, captions, helper text, metadata. */
72
+ --wui-color-text-secondary: var(--wui-blue-6);
73
+ /* Text inside a selected element. Static across color schemes. */
74
+ --wui-color-text-selected: var(--wui-color-bg-app);
package/dist/css/schemes/orange.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, orange permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-orange-1);
6
+ --wui-color-accent-2: var(--wui-orange-2);
7
+ --wui-color-accent-3: var(--wui-orange-3);
8
+ --wui-color-accent-4: var(--wui-orange-4);
9
+ --wui-color-accent-5: var(--wui-orange-5);
10
+ --wui-color-accent-6: var(--wui-orange-6);
11
+ --wui-color-accent-7: var(--wui-orange-7);
12
+ --wui-color-accent-8: var(--wui-orange-8);
13
+ --wui-color-accent-9: var(--wui-orange-9);
14
+ --wui-color-accent-10: var(--wui-orange-10);
15
+ --wui-color-accent-11: var(--wui-orange-11);
16
+ --wui-color-accent-12: var(--wui-orange-12);
17
+ --wui-color-accent-contrast: var(--wui-orange-contrast);
18
+ --wui-color-base-1: var(--wui-orange-1);
19
+ --wui-color-base-2: var(--wui-orange-2);
20
+ --wui-color-base-3: var(--wui-orange-3);
21
+ --wui-color-base-4: var(--wui-orange-4);
22
+ --wui-color-base-5: var(--wui-orange-5);
23
+ --wui-color-base-6: var(--wui-orange-6);
24
+ --wui-color-base-7: var(--wui-orange-7);
25
+ --wui-color-base-8: var(--wui-orange-8);
26
+ --wui-color-base-9: var(--wui-orange-9);
27
+ --wui-color-base-10: var(--wui-orange-10);
28
+ --wui-color-base-11: var(--wui-orange-11);
29
+ --wui-color-base-12: var(--wui-orange-12);
30
+ --wui-color-base-contrast: var(--wui-orange-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-orange-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-orange-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-orange-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/pink.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, pink permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-pink-1);
6
+ --wui-color-accent-2: var(--wui-pink-2);
7
+ --wui-color-accent-3: var(--wui-pink-3);
8
+ --wui-color-accent-4: var(--wui-pink-4);
9
+ --wui-color-accent-5: var(--wui-pink-5);
10
+ --wui-color-accent-6: var(--wui-pink-6);
11
+ --wui-color-accent-7: var(--wui-pink-7);
12
+ --wui-color-accent-8: var(--wui-pink-8);
13
+ --wui-color-accent-9: var(--wui-pink-9);
14
+ --wui-color-accent-10: var(--wui-pink-10);
15
+ --wui-color-accent-11: var(--wui-pink-11);
16
+ --wui-color-accent-12: var(--wui-pink-12);
17
+ --wui-color-accent-contrast: var(--wui-pink-contrast);
18
+ --wui-color-base-1: var(--wui-pink-1);
19
+ --wui-color-base-2: var(--wui-pink-2);
20
+ --wui-color-base-3: var(--wui-pink-3);
21
+ --wui-color-base-4: var(--wui-pink-4);
22
+ --wui-color-base-5: var(--wui-pink-5);
23
+ --wui-color-base-6: var(--wui-pink-6);
24
+ --wui-color-base-7: var(--wui-pink-7);
25
+ --wui-color-base-8: var(--wui-pink-8);
26
+ --wui-color-base-9: var(--wui-pink-9);
27
+ --wui-color-base-10: var(--wui-pink-10);
28
+ --wui-color-base-11: var(--wui-pink-11);
29
+ --wui-color-base-12: var(--wui-pink-12);
30
+ --wui-color-base-contrast: var(--wui-pink-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-pink-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-pink-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-pink-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/purple.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, purple permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-purple-1);
6
+ --wui-color-accent-2: var(--wui-purple-2);
7
+ --wui-color-accent-3: var(--wui-purple-3);
8
+ --wui-color-accent-4: var(--wui-purple-4);
9
+ --wui-color-accent-5: var(--wui-purple-5);
10
+ --wui-color-accent-6: var(--wui-purple-6);
11
+ --wui-color-accent-7: var(--wui-purple-7);
12
+ --wui-color-accent-8: var(--wui-purple-8);
13
+ --wui-color-accent-9: var(--wui-purple-9);
14
+ --wui-color-accent-10: var(--wui-purple-10);
15
+ --wui-color-accent-11: var(--wui-purple-11);
16
+ --wui-color-accent-12: var(--wui-purple-12);
17
+ --wui-color-accent-contrast: var(--wui-purple-contrast);
18
+ --wui-color-base-1: var(--wui-purple-1);
19
+ --wui-color-base-2: var(--wui-purple-2);
20
+ --wui-color-base-3: var(--wui-purple-3);
21
+ --wui-color-base-4: var(--wui-purple-4);
22
+ --wui-color-base-5: var(--wui-purple-5);
23
+ --wui-color-base-6: var(--wui-purple-6);
24
+ --wui-color-base-7: var(--wui-purple-7);
25
+ --wui-color-base-8: var(--wui-purple-8);
26
+ --wui-color-base-9: var(--wui-purple-9);
27
+ --wui-color-base-10: var(--wui-purple-10);
28
+ --wui-color-base-11: var(--wui-purple-11);
29
+ --wui-color-base-12: var(--wui-purple-12);
30
+ --wui-color-base-contrast: var(--wui-purple-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-purple-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-purple-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-purple-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);
package/dist/css/schemes/red.css ADDED
@@ -0,0 +1,70 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * Source: generated/tokens.css, red permutation
4
+ * ------------------------------------------- */
5
+ --wui-color-accent-1: var(--wui-red-1);
6
+ --wui-color-accent-2: var(--wui-red-2);
7
+ --wui-color-accent-3: var(--wui-red-3);
8
+ --wui-color-accent-4: var(--wui-red-4);
9
+ --wui-color-accent-5: var(--wui-red-5);
10
+ --wui-color-accent-6: var(--wui-red-6);
11
+ --wui-color-accent-7: var(--wui-red-7);
12
+ --wui-color-accent-8: var(--wui-red-8);
13
+ --wui-color-accent-9: var(--wui-red-9);
14
+ --wui-color-accent-10: var(--wui-red-10);
15
+ --wui-color-accent-11: var(--wui-red-11);
16
+ --wui-color-accent-12: var(--wui-red-12);
17
+ --wui-color-accent-contrast: var(--wui-red-contrast);
18
+ --wui-color-base-1: var(--wui-red-1);
19
+ --wui-color-base-2: var(--wui-red-2);
20
+ --wui-color-base-3: var(--wui-red-3);
21
+ --wui-color-base-4: var(--wui-red-4);
22
+ --wui-color-base-5: var(--wui-red-5);
23
+ --wui-color-base-6: var(--wui-red-6);
24
+ --wui-color-base-7: var(--wui-red-7);
25
+ --wui-color-base-8: var(--wui-red-8);
26
+ --wui-color-base-9: var(--wui-red-9);
27
+ --wui-color-base-10: var(--wui-red-10);
28
+ --wui-color-base-11: var(--wui-red-11);
29
+ --wui-color-base-12: var(--wui-red-12);
30
+ --wui-color-base-contrast: var(--wui-red-contrast);
31
+ /* Solid accent background for the highest-emphasis element in a region: primary buttons, checked controls, progress fills. Pair with the -on-fill foreground tokens. */
32
+ --wui-color-bg-fill: var(--wui-color-accent-9);
33
+ /* Pressed background for a fill element. */
34
+ --wui-color-bg-fill-active: var(--wui-color-accent-11);
35
+ /* Hover background for an interactive fill element. */
36
+ --wui-color-bg-fill-hover: var(--wui-color-accent-10);
37
+ /* Default background for a container that sits on the app background: cards, menus, popovers, toasts, sidebars, input interiors. */
38
+ --wui-color-bg-surface: var(--wui-color-surface-token);
39
+ /* Pressed background for an item resting on surface. */
40
+ --wui-color-bg-surface-active: var(--wui-color-base-4);
41
+ /* Hover background for an interactive item resting on surface: menu items, listbox options, editable text. */
42
+ --wui-color-bg-surface-hover: var(--wui-color-base-3);
43
+ /* Background for an element one nesting level deeper than surface, or a subtle tinted chip: badges, banners, tags, keyboard shortcuts, meter and progress tracks, secondary buttons. */
44
+ --wui-color-bg-surface-secondary: var(--wui-color-base-3);
45
+ /* Pressed background for a surface-secondary element. */
46
+ --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
47
+ /* Hover background for an interactive surface-secondary element. */
48
+ --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
49
+ /* Strongest non-interactive tint: text highlights, skeleton and placeholder shapes, off-state control tracks. Has no hover/active variants. */
50
+ --wui-color-bg-surface-tertiary: var(--wui-color-base-5);
51
+ --wui-color-border: var(--wui-color-base-6);
52
+ --wui-color-border-active: var(--wui-color-base-9);
53
+ --wui-color-border-hover: var(--wui-color-base-8);
54
+ --wui-color-border-secondary: var(--wui-color-base-8);
55
+ --wui-color-border-secondary-active: var(--wui-color-base-11);
56
+ --wui-color-border-secondary-hover: var(--wui-color-base-10);
57
+ --wui-color-focus-ring: var(--wui-color-accent-9);
58
+ --wui-color-icon: var(--wui-color-base-11);
59
+ --wui-color-icon-on-fill: var(--wui-color-accent-contrast);
60
+ /* Internal indirection target used by scheme definitions — use color.bg.surface instead. */
61
+ --wui-color-surface-token: var(--wui-red-2);
62
+ --wui-color-text: var(--wui-color-base-12);
63
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
64
+ --wui-color-text-button: var(--wui-color-text-button-token);
65
+ /* Internal indirection target used by scheme definitions — use color.text-button instead. */
66
+ --wui-color-text-button-token: var(--wui-red-11);
67
+ --wui-color-text-link: var(--wui-color-text-link-token);
68
+ --wui-color-text-link-token: var(--wui-red-9);
69
+ --wui-color-text-on-fill: var(--wui-color-accent-contrast);
70
+ --wui-color-text-secondary: var(--wui-color-base-11);