@workday/canvas-kit-css 15.0.0-alpha.1303-next.0 → 15.0.0

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 (37) hide show
  1. package/LICENSE +2 -1
  2. package/action-bar.css +7 -8
  3. package/avatar.css +90 -97
  4. package/badge.css +14 -13
  5. package/banner.css +36 -35
  6. package/breadcrumbs.css +48 -48
  7. package/button.css +292 -265
  8. package/card.css +12 -12
  9. package/checkbox.css +107 -100
  10. package/collection.css +1 -2
  11. package/color-picker.css +7 -13
  12. package/combobox.css +9 -0
  13. package/common.css +30 -0
  14. package/expandable.css +42 -40
  15. package/form-field.css +70 -76
  16. package/icon.css +58 -29
  17. package/information-highlight.css +122 -0
  18. package/loading-dots.css +9 -10
  19. package/menu.css +76 -73
  20. package/modal.css +55 -55
  21. package/package.json +4 -3
  22. package/pagination.css +67 -60
  23. package/pill.css +221 -0
  24. package/popup.css +22 -21
  25. package/segmented-control.css +119 -45
  26. package/select.css +19 -15
  27. package/side-panel.css +157 -0
  28. package/skeleton.css +14 -14
  29. package/switch.css +22 -24
  30. package/table.css +33 -33
  31. package/tabs.css +45 -36
  32. package/text-area.css +2 -2
  33. package/text-input.css +29 -31
  34. package/text.css +52 -52
  35. package/toast.css +17 -18
  36. package/tooltip.css +25 -23
  37. package/README.md +0 -4
package/text-input.css CHANGED
@@ -1,21 +1,21 @@
1
1
  .cnvs-text-input {
2
2
  box-sizing: border-box;
3
3
  font-family: var(--cnvs-sys-font-family-default);
4
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
4
5
  font-weight: var(--cnvs-sys-font-weight-normal);
5
- line-height: var(--cnvs-sys-line-height-subtext-large);
6
- font-size: var(--cnvs-sys-font-size-subtext-large);
7
- letter-spacing: var(--cnvs-base-letter-spacing-150);
6
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
7
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
8
8
  display: block;
9
9
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
10
- background-color: var(--cnvs-sys-color-bg-default);
11
- border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half));
12
- height: var(--cnvs-sys-space-x10);
10
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
11
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
12
+ height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
13
13
  transition: 0.2s box-shadow,0.2s border-color;
14
- padding: var(--cnvs-sys-space-x2);
15
- margin: 0rem;
14
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
15
+ margin: 0;
16
16
  width: var(--cnvs-text-input-width);
17
- min-width: var(--cnvs-text-input-width, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));
18
- color: var(--cnvs-sys-color-text-default);
17
+ min-width: var(--cnvs-text-input-width, 17.5rem);
18
+ color: var(--cnvs-sys-color-fg-default);
19
19
  text-overflow: ellipsis;
20
20
  }
21
21
 
@@ -24,27 +24,25 @@
24
24
  }
25
25
 
26
26
  .cnvs-text-input::placeholder {
27
- color: var(--cnvs-sys-color-text-hint);
27
+ color: var(--cnvs-sys-color-fg-muted-default);
28
28
  }
29
29
 
30
- .cnvs-text-input:is(:hover, .hover) {
31
- border-color: var(--cnvs-sys-color-border-input-strong);
30
+ .cnvs-text-input:is(:hover, .hover):where(:not([disabled], .disabled)) {
31
+ border-color: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
32
32
  }
33
33
 
34
34
  .cnvs-text-input:is(:focus-visible, .focus):where(:not([disabled])) {
35
- border-color: var(--cnvs-brand-common-focus-outline);
36
- box-shadow: inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);
35
+ border-color: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
36
+ box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
37
37
  outline: 0.125rem solid transparent;
38
38
  }
39
39
 
40
40
  .cnvs-text-input:is(:disabled, .disabled) {
41
- background-color: var(--cnvs-sys-color-bg-alt-softer);
42
- border-color: var(--cnvs-sys-color-border-input-disabled);
43
- color: var(--cnvs-sys-color-fg-disabled);
41
+ opacity: var(--cnvs-sys-opacity-disabled);
44
42
  }
45
43
 
46
44
  .cnvs-text-input:is(:disabled, .disabled)::placeholder {
47
- color: var(--cnvs-sys-color-fg-disabled);
45
+ opacity: var(--cnvs-sys-opacity-disabled);
48
46
  }
49
47
 
50
48
 
@@ -60,42 +58,42 @@
60
58
 
61
59
 
62
60
  .cnvs-text-input.error-error {
63
- border-color: var(--cnvs-brand-common-error-inner);
64
- border-width: 0.125rem;
65
- background-color: var(--cnvs-brand-error-lightest);
61
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
62
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
63
+ background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
66
64
  }
67
65
 
68
66
  .cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
69
- border-color: var(--cnvs-brand-common-error-inner);
67
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
70
68
  }
71
69
 
72
70
  .cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
73
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
71
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
74
72
  outline-offset: 0.125rem;
75
73
  }
76
74
 
77
75
 
78
76
  .cnvs-text-input.error-caution {
79
- border-color: var(--cnvs-brand-common-alert-outer);
80
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);
81
- background-color: var(--cnvs-brand-alert-lightest);
77
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
78
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
79
+ background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
82
80
  outline-offset: 0.125rem;
83
81
  }
84
82
 
85
83
  .cnvs-text-input.error-caution:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
86
- border-color: var(--cnvs-brand-common-alert-outer);
84
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
87
85
  }
88
86
 
89
87
  .cnvs-text-input.error-caution:is(:focus-visible, .focus):not([disabled]) {
90
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
88
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
91
89
  }
92
90
 
93
91
 
94
92
  .cnvs-input-group-inner {
95
93
  --cnvs-input-group-inner-inset-inline-start: initial;
96
94
  --cnvs-input-group-inner-inset-inline-end: initial;
97
- --cnvs-input-group-inner-width: var(--cnvs-sys-space-x10);
98
- --cnvs-input-group-inner-height: var(--cnvs-sys-space-x10);
95
+ --cnvs-input-group-inner-width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
96
+ --cnvs-input-group-inner-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
99
97
  box-sizing: border-box;
100
98
  display: flex;
101
99
  position: absolute;
package/text.css CHANGED
@@ -6,127 +6,127 @@
6
6
  .cnvs-text.type-level-title-large {
7
7
  font-family: var(--cnvs-sys-font-family-default);
8
8
  font-weight: var(--cnvs-sys-font-weight-bold);
9
- line-height: var(--cnvs-sys-line-height-title-large);
10
- font-size: var(--cnvs-sys-font-size-title-large);
11
- color: var(--cnvs-sys-color-text-strong);
9
+ font-size: var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));
10
+ line-height: var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));
11
+ color: var(--cnvs-sys-color-fg-strong);
12
12
  }
13
13
 
14
14
 
15
15
  .cnvs-text.type-level-title-medium {
16
16
  font-family: var(--cnvs-sys-font-family-default);
17
17
  font-weight: var(--cnvs-sys-font-weight-bold);
18
- line-height: var(--cnvs-sys-line-height-title-medium);
19
- font-size: var(--cnvs-sys-font-size-title-medium);
20
- color: var(--cnvs-sys-color-text-strong);
18
+ font-size: var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));
19
+ line-height: var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));
20
+ color: var(--cnvs-sys-color-fg-strong);
21
21
  }
22
22
 
23
23
 
24
24
  .cnvs-text.type-level-title-small {
25
25
  font-family: var(--cnvs-sys-font-family-default);
26
26
  font-weight: var(--cnvs-sys-font-weight-bold);
27
- line-height: var(--cnvs-sys-line-height-title-small);
28
- font-size: var(--cnvs-sys-font-size-title-small);
29
- color: var(--cnvs-sys-color-text-strong);
27
+ line-height: var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));
28
+ font-size: var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));
29
+ color: var(--cnvs-sys-color-fg-strong);
30
30
  }
31
31
 
32
32
 
33
33
  .cnvs-text.type-level-heading-large {
34
34
  font-family: var(--cnvs-sys-font-family-default);
35
35
  font-weight: var(--cnvs-sys-font-weight-bold);
36
- line-height: var(--cnvs-sys-line-height-heading-large);
37
- font-size: var(--cnvs-sys-font-size-heading-large);
38
- color: var(--cnvs-sys-color-text-strong);
36
+ font-size: var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));
37
+ line-height: var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));
38
+ color: var(--cnvs-sys-color-fg-strong);
39
39
  }
40
40
 
41
41
 
42
42
  .cnvs-text.type-level-heading-medium {
43
43
  font-family: var(--cnvs-sys-font-family-default);
44
44
  font-weight: var(--cnvs-sys-font-weight-bold);
45
- line-height: var(--cnvs-sys-line-height-heading-medium);
46
- font-size: var(--cnvs-sys-font-size-heading-medium);
47
- color: var(--cnvs-sys-color-text-strong);
45
+ font-size: var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));
46
+ line-height: var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));
47
+ color: var(--cnvs-sys-color-fg-strong);
48
48
  }
49
49
 
50
50
 
51
51
  .cnvs-text.type-level-heading-small {
52
52
  font-family: var(--cnvs-sys-font-family-default);
53
53
  font-weight: var(--cnvs-sys-font-weight-bold);
54
- line-height: var(--cnvs-sys-line-height-heading-small);
55
- font-size: var(--cnvs-sys-font-size-heading-small);
56
- color: var(--cnvs-sys-color-text-strong);
54
+ font-size: var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));
55
+ line-height: var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));
56
+ color: var(--cnvs-sys-color-fg-strong);
57
57
  }
58
58
 
59
59
 
60
60
  .cnvs-text.type-level-body-large {
61
61
  font-family: var(--cnvs-sys-font-family-default);
62
62
  font-weight: var(--cnvs-sys-font-weight-normal);
63
- line-height: var(--cnvs-sys-line-height-body-large);
64
- font-size: var(--cnvs-sys-font-size-body-large);
65
- color: var(--cnvs-sys-color-text-default);
63
+ font-size: var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));
64
+ line-height: var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));
65
+ color: var(--cnvs-sys-color-fg-default);
66
66
  }
67
67
 
68
68
 
69
69
  .cnvs-text.type-level-body-medium {
70
70
  font-family: var(--cnvs-sys-font-family-default);
71
71
  font-weight: var(--cnvs-sys-font-weight-normal);
72
- line-height: var(--cnvs-sys-line-height-body-medium);
73
- font-size: var(--cnvs-sys-font-size-body-medium);
74
- color: var(--cnvs-sys-color-text-default);
72
+ font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
73
+ line-height: var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
74
+ color: var(--cnvs-sys-color-fg-default);
75
75
  }
76
76
 
77
77
 
78
78
  .cnvs-text.type-level-body-small {
79
79
  font-family: var(--cnvs-sys-font-family-default);
80
80
  font-weight: var(--cnvs-sys-font-weight-normal);
81
- line-height: var(--cnvs-sys-line-height-body-small);
82
- font-size: var(--cnvs-sys-font-size-body-small);
83
- letter-spacing: var(--cnvs-base-letter-spacing-200);
84
- color: var(--cnvs-sys-color-text-default);
81
+ font-size: var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));
82
+ line-height: var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));
83
+ letter-spacing: var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));
84
+ color: var(--cnvs-sys-color-fg-default);
85
85
  }
86
86
 
87
87
 
88
88
  .cnvs-text.type-level-subtext-large {
89
89
  font-family: var(--cnvs-sys-font-family-default);
90
90
  font-weight: var(--cnvs-sys-font-weight-normal);
91
- line-height: var(--cnvs-sys-line-height-subtext-large);
92
- font-size: var(--cnvs-sys-font-size-subtext-large);
93
- letter-spacing: var(--cnvs-base-letter-spacing-150);
94
- color: var(--cnvs-sys-color-text-default);
91
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
92
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
93
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
94
+ color: var(--cnvs-sys-color-fg-default);
95
95
  }
96
96
 
97
97
 
98
98
  .cnvs-text.type-level-subtext-medium {
99
99
  font-family: var(--cnvs-sys-font-family-default);
100
100
  font-weight: var(--cnvs-sys-font-weight-normal);
101
- line-height: var(--cnvs-sys-line-height-subtext-medium);
102
- font-size: var(--cnvs-sys-font-size-subtext-medium);
103
- letter-spacing: var(--cnvs-base-letter-spacing-100);
104
- color: var(--cnvs-sys-color-text-default);
101
+ font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
102
+ line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
103
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
104
+ color: var(--cnvs-sys-color-fg-default);
105
105
  }
106
106
 
107
107
 
108
108
  .cnvs-text.type-level-subtext-small {
109
109
  font-family: var(--cnvs-sys-font-family-default);
110
110
  font-weight: var(--cnvs-sys-font-weight-normal);
111
- line-height: var(--cnvs-sys-line-height-subtext-small);
112
- font-size: var(--cnvs-sys-font-size-subtext-small);
113
- letter-spacing: var(--cnvs-base-letter-spacing-50);
114
- color: var(--cnvs-sys-color-text-default);
111
+ font-size: var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));
112
+ line-height: var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));
113
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));
114
+ color: var(--cnvs-sys-color-fg-default);
115
115
  }
116
116
 
117
117
 
118
118
  .cnvs-text.variant-error {
119
- color: var(--cnvs-sys-color-text-critical-default);
119
+ color: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
120
120
  }
121
121
 
122
122
 
123
123
  .cnvs-text.variant-hint {
124
- color: var(--cnvs-sys-color-text-hint);
124
+ color: var(--cnvs-sys-color-fg-muted-default);
125
125
  }
126
126
 
127
127
 
128
128
  .cnvs-text.variant-inverse {
129
- color: var(--cnvs-sys-color-text-inverse);
129
+ color: var(--cnvs-sys-color-fg-inverse);
130
130
  }
131
131
 
132
132
 
@@ -154,36 +154,36 @@
154
154
  box-sizing: border-box;
155
155
  font-family: var(--cnvs-sys-font-family-default);
156
156
  font-weight: var(--cnvs-sys-font-weight-normal);
157
- line-height: var(--cnvs-sys-line-height-subtext-large);
158
- font-size: var(--cnvs-sys-font-size-subtext-large);
159
- letter-spacing: var(--cnvs-base-letter-spacing-150);
160
- color: var(--cnvs-sys-color-text-default);
157
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
158
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
159
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
160
+ color: var(--cnvs-sys-color-fg-default);
161
161
  }
162
162
 
163
163
 
164
164
  .cnvs-label-text.disabled {
165
165
  cursor: default;
166
- color: var(--cnvs-sys-color-text-disabled);
166
+ color: var(--cnvs-sys-color-fg-disabled);
167
167
  }
168
168
 
169
169
 
170
170
  .cnvs-label-text.variant-inverse {
171
- color: var(--cnvs-sys-color-text-inverse);
171
+ color: var(--cnvs-sys-color-fg-inverse);
172
172
  }
173
173
 
174
174
 
175
175
  .cnvs-label-text.variant-error {
176
- color: var(--cnvs-sys-color-text-critical-default);
176
+ color: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
177
177
  }
178
178
 
179
179
 
180
180
  .cnvs-label-text.variant-hint {
181
- color: var(--cnvs-sys-color-text-hint);
181
+ color: var(--cnvs-sys-color-fg-muted-default);
182
182
  }
183
183
 
184
184
 
185
185
  .cnvs-label-text.variant-inverse.disabled {
186
186
  opacity: var(--cnvs-sys-opacity-disabled);
187
- color: var(--cnvs-sys-color-text-inverse);
187
+ color: var(--cnvs-sys-color-fg-inverse);
188
188
  }
189
189
 
package/toast.css CHANGED
@@ -1,3 +1,14 @@
1
+ .cnvs-toast-body {
2
+ box-sizing: border-box;
3
+ align-items: flex-start;
4
+ flex-direction: column;
5
+ justify-content: center;
6
+ padding-block: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
7
+ flex-grow: 1;
8
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
9
+ }
10
+
11
+
1
12
  .cnvs-toast-close-icon {
2
13
  box-sizing: border-box;
3
14
  position: relative;
@@ -7,27 +18,14 @@
7
18
  .cnvs-toast-icon {
8
19
  box-sizing: border-box;
9
20
  align-self: start;
10
- margin: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);
21
+ margin: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);
11
22
  }
12
23
 
13
24
 
14
25
  .cnvs-toast-message {
15
26
  box-sizing: border-box;
16
27
  word-break: break-word;
17
- margin-block-start: var(--cnvs-sys-space-zero);
18
- margin-block-end: var(--cnvs-sys-space-zero);
19
- }
20
-
21
-
22
- .cnvs-toast-body {
23
- box-sizing: border-box;
24
- align-items: flex-start;
25
- flex-direction: column;
26
- justify-content: center;
27
- padding-top: var(--cnvs-sys-space-x4);
28
- padding-bottom: var(--cnvs-sys-space-x4);
29
- flex-grow: 1;
30
- gap: var(--cnvs-sys-space-x1);
28
+ margin-block: 0;
31
29
  }
32
30
 
33
31
 
@@ -35,8 +33,9 @@
35
33
  box-sizing: border-box;
36
34
  display: flex;
37
35
  flex-direction: row;
38
- width: calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));
39
- padding: var(--cnvs-sys-space-zero);
40
- gap: var(--cnvs-sys-space-x1);
36
+ width: 22.5rem;
37
+ padding: 0;
38
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
39
+ border-radius: var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));
41
40
  }
42
41
 
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1opu9l {
1
+ @keyframes animation-2rlyb1 {
2
2
  0% {
3
3
  opacity: 0;
4
4
  transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -15,45 +15,38 @@
15
15
  box-sizing: border-box;
16
16
  font-family: var(--cnvs-sys-font-family-default);
17
17
  font-weight: var(--cnvs-sys-font-weight-normal);
18
- line-height: var(--cnvs-sys-line-height-subtext-medium);
19
- font-size: var(--cnvs-sys-font-size-subtext-medium);
20
- letter-spacing: var(--cnvs-base-letter-spacing-100);
18
+ font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
19
+ line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
20
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
21
21
  display: inline-flex;
22
22
  position: relative;
23
- padding: var(--cnvs-sys-space-x3);
24
- color: var(--cnvs-sys-color-text-inverse);
25
- animation-name: animation-1opu9l;
23
+ padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
24
+ color: var(--cnvs-sys-color-fg-inverse);
25
+ animation-name: animation-2rlyb1;
26
26
  animation-duration: 150ms;
27
27
  animation-timing-function: ease-out;
28
28
  transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);
29
29
  }
30
30
 
31
31
  .cnvs-tooltip-container a {
32
- color: var(--cnvs-sys-color-text-inverse);
32
+ color: var(--cnvs-sys-color-fg-inverse);
33
33
  text-decoration: underline;
34
34
  }
35
35
 
36
36
  .cnvs-tooltip-container:before {
37
37
  content: "";
38
- border-radius: var(--cnvs-sys-shape-x1);
38
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
39
39
  outline: 0.0625rem solid transparent;
40
40
  outline-offset: -0.0625rem;
41
41
  z-index: -1;
42
- margin: var(--cnvs-sys-space-x1);
43
- background-color: var(--cnvs-sys-color-bg-translucent);
42
+ margin: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
43
+ background-color: var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));
44
44
  position: absolute;
45
45
  top: 0;
46
46
  left: 0;
47
47
  right: 0;
48
48
  bottom: 0;
49
- }
50
-
51
- body:has(:focus-visible, .focus) .cnvs-tooltip-container {
52
- padding: calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));
53
- }
54
-
55
- body:has(:focus-visible, .focus) .cnvs-tooltip-container:before {
56
- margin: calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));
49
+ box-shadow: var(--cnvs-sys-depth-2);
57
50
  }
58
51
 
59
52
  [data-popper-reference-hidden] .cnvs-tooltip-container {
@@ -62,18 +55,27 @@ body:has(:focus-visible, .focus) .cnvs-tooltip-container:before {
62
55
  }
63
56
 
64
57
  [data-popper-placement="top-start"] .cnvs-tooltip-container, [data-popper-placement="bottom-start"] .cnvs-tooltip-container {
65
- left: calc(var(--cnvs-sys-space-x1) * -1);
58
+ left: calc(var(--cnvs-base-size-50, 0.25rem) * -1);
66
59
  }
67
60
 
68
61
  [data-popper-placement="top-end"] .cnvs-tooltip-container, [data-popper-placement="bottom-end"] .cnvs-tooltip-container {
69
- right: calc(var(--cnvs-sys-space-x1) * -1);
62
+ right: calc(var(--cnvs-base-size-50, 0.25rem) * -1);
70
63
  }
71
64
 
72
65
  [data-popper-placement="left-start"] .cnvs-tooltip-container, [data-popper-placement="right-start"] .cnvs-tooltip-container {
73
- top: calc(var(--cnvs-sys-space-x1) * -1);
66
+ top: calc(var(--cnvs-base-size-50, 0.25rem) * -1);
74
67
  }
75
68
 
76
69
  [data-popper-placement="left-end"] .cnvs-tooltip-container, [data-popper-placement="right-end"] .cnvs-tooltip-container {
77
- bottom: calc(var(--cnvs-sys-space-x1) * -1);
70
+ bottom: calc(var(--cnvs-base-size-50, 0.25rem) * -1);
71
+ }
72
+
73
+
74
+ .cnvs-tooltip-container.element-has-focus {
75
+ padding: calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));
76
+ }
77
+
78
+ .cnvs-tooltip-container.element-has-focus:before {
79
+ margin: var(--cnvs-base-size-75, 0.375rem);
78
80
  }
79
81
 
package/README.md DELETED
@@ -1,4 +0,0 @@
1
- # Canvas Kit CSS
2
-
3
- The bundle package containing all modules of the Canvas Kit CSS. The contents are auto-generated
4
- from the Canvas Kit React source code.