@workday/canvas-kit-preview-css 13.2.2 → 13.2.3

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 (9) hide show
  1. package/divider.css +10 -0
  2. package/information-highlight.css +123 -0
  3. package/loading-sparkles.css +45 -0
  4. package/multi-select.css +107 -0
  5. package/package.json +2 -2
  6. package/pill.css +211 -0
  7. package/radio.css +203 -0
  8. package/side-panel.css +114 -0
  9. package/status-indicator.css +107 -0
package/divider.css ADDED
@@ -0,0 +1,10 @@
1
+ .cnvs-preview-divider {
2
+ --cnvs-preview-divider-space: var(--cnvs-sys-space-x4);
3
+ box-sizing: border-box;
4
+ display: block;
5
+ height: 0.0625rem;
6
+ border: none;
7
+ border-top: 1px solid var(--cnvs-sys-color-border-divider);
8
+ margin: calc(var(--cnvs-preview-divider-space) / 2) 0;
9
+ }
10
+
package/information-highlight.css ADDED
@@ -0,0 +1,123 @@
1
+ .cnvs-preview-information-highlight-heading {
2
+ box-sizing: border-box;
3
+ font-family: var(--cnvs-sys-font-family-default);
4
+ font-weight: var(--cnvs-sys-font-weight-bold);
5
+ line-height: var(--cnvs-sys-line-height-body-small);
6
+ font-size: var(--cnvs-sys-font-size-body-small);
7
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
8
+ color: var(--cnvs-sys-color-text-strong);
9
+ grid-column: 2;
10
+ margin-top: var(--cnvs-sys-space-zero);
11
+ margin-bottom: var(--cnvs-sys-space-zero);
12
+ }
13
+
14
+
15
+ .cnvs-preview-information-highlight-body {
16
+ box-sizing: border-box;
17
+ font-family: var(--cnvs-sys-font-family-default);
18
+ font-weight: var(--cnvs-sys-font-weight-normal);
19
+ line-height: var(--cnvs-sys-line-height-subtext-large);
20
+ font-size: var(--cnvs-sys-font-size-subtext-large);
21
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
22
+ color: var(--cnvs-sys-color-text-strong);
23
+ grid-column: 2;
24
+ margin-block-end: var(--cnvs-sys-space-x2);
25
+ }
26
+
27
+
28
+ .cnvs-preview-information-highlight-link {
29
+ box-sizing: border-box;
30
+ font-family: var(--cnvs-sys-font-family-default);
31
+ font-weight: var(--cnvs-sys-font-weight-bold);
32
+ line-height: var(--cnvs-sys-line-height-subtext-large);
33
+ font-size: var(--cnvs-sys-font-size-subtext-large);
34
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
35
+ grid-column: 2;
36
+ justify-self: start;
37
+ color: var(--cnvs-sys-color-text-strong);
38
+ }
39
+
40
+
41
+ .cnvs-preview-information-highlight {
42
+ box-sizing: border-box;
43
+ display: grid;
44
+ grid-template-columns: min-content;
45
+ column-gap: var(--cnvs-sys-space-x4);
46
+ row-gap: var(--cnvs-sys-space-x2);
47
+ padding: var(--cnvs-sys-space-x4);
48
+ border-radius: var(--cnvs-sys-shape-x1);
49
+ outline: 0.0625rem solid transparent;
50
+ }
51
+
52
+
53
+ .cnvs-preview-information-highlight.informational-low {
54
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);
55
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
56
+ }
57
+
58
+ .cnvs-preview-information-highlight.informational-low [data-part="information-highlight-icon"] {
59
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-bg-primary-default);
60
+ --cnvs-system-icon-color: var(--cnvs-sys-color-bg-primary-default);
61
+ --cnvs-system-icon-background-color: none;
62
+ }
63
+
64
+
65
+ .cnvs-preview-information-highlight.informational-high {
66
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);
67
+ background-color: var(--cnvs-base-palette-blueberry-100);
68
+ }
69
+
70
+ .cnvs-preview-information-highlight.informational-high [data-part="information-highlight-icon"] {
71
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
72
+ --cnvs-system-icon-color: var(--cnvs-sys-color-bg-primary-default);
73
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-bg-primary-default);
74
+ }
75
+
76
+
77
+ .cnvs-preview-information-highlight.caution-low {
78
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);
79
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
80
+ }
81
+
82
+ .cnvs-preview-information-highlight.caution-low [data-part="information-highlight-icon"] {
83
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
84
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
85
+ --cnvs-system-icon-background-color: none;
86
+ }
87
+
88
+
89
+ .cnvs-preview-information-highlight.caution-high {
90
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);
91
+ background-color: var(--cnvs-base-palette-sour-lemon-100);
92
+ }
93
+
94
+ .cnvs-preview-information-highlight.caution-high [data-part="information-highlight-icon"] {
95
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
96
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
97
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-contrast-default);
98
+ }
99
+
100
+
101
+ .cnvs-preview-information-highlight.critical-low {
102
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);
103
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
104
+ }
105
+
106
+ .cnvs-preview-information-highlight.critical-low [data-part="information-highlight-icon"] {
107
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-bg-critical-default);
108
+ --cnvs-system-icon-color: var(--cnvs-sys-color-bg-critical-default);
109
+ --cnvs-system-icon-background-color: none;
110
+ }
111
+
112
+
113
+ .cnvs-preview-information-highlight.critical-high {
114
+ border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);
115
+ background-color: var(--cnvs-base-palette-peach-100);
116
+ }
117
+
118
+ .cnvs-preview-information-highlight.critical-high [data-part="information-highlight-icon"] {
119
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
120
+ --cnvs-system-icon-color: var(--cnvs-sys-color-bg-critical-default);
121
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-bg-critical-default);
122
+ }
123
+
package/loading-sparkles.css ADDED
@@ -0,0 +1,45 @@
1
+ @keyframes animation-3t9c8y {
2
+ 0%, 79%, 100% {
3
+ opacity: 0.2;
4
+ transform: scale(0.55);
5
+ }
6
+
7
+ 27% {
8
+ opacity: 1;
9
+ transform: scale(1);
10
+ }
11
+
12
+ 53% {
13
+ opacity: 0.6;
14
+ transform: scale(0.7);
15
+ }
16
+
17
+ }
18
+
19
+ .cnvs-preview-loading-sparkles {
20
+ box-sizing: border-box;
21
+ display: inline-flex;
22
+ gap: 0.0625rem;
23
+ }
24
+
25
+ .cnvs-preview-loading-sparkles [data-part="sparkle"] {
26
+ animation-duration: 1230ms;
27
+ animation-fill-mode: both;
28
+ animation-iteration-count: infinite;
29
+ animation-name: animation-3t9c8y;
30
+ animation-timing-function: ease-in-out;
31
+ --cnvs-system-icon-color: var(--cnvs-base-extended-palette-dragon-fruit-400);
32
+ }
33
+
34
+ .cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(1) {
35
+ animation-delay: 0ms;
36
+ }
37
+
38
+ .cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(2) {
39
+ animation-delay: calc(1230ms * (1/3));
40
+ }
41
+
42
+ .cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(3) {
43
+ animation-delay: calc(1230ms * (2/3));
44
+ }
45
+
package/multi-select.css ADDED
@@ -0,0 +1,107 @@
1
+ .cnvs-preview-multi-select-input {
2
+ box-sizing: border-box;
3
+ border: 1px solid var(--cnvs-sys-color-border-input-default);
4
+ display: flex;
5
+ flex-direction: column;
6
+ background-color: var(--cnvs-sys-color-bg-default);
7
+ border-radius: var(--cnvs-sys-shape-x1);
8
+ min-height: var(--cnvs-sys-space-x10);
9
+ transition: 0.2s box-shadow,0.2s border-color;
10
+ margin: 0;
11
+ --cnvs-text-input-width: 100%;
12
+ }
13
+
14
+ .cnvs-preview-multi-select-input:hover, .cnvs-preview-multi-select-input.hover {
15
+ border-color: var(--cnvs-sys-color-border-input-strong);
16
+ }
17
+
18
+ .cnvs-preview-multi-select-input:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.focus {
19
+ border-color: var(--cnvs-sys-color-border-primary-default);
20
+ box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);
21
+ }
22
+
23
+ .cnvs-preview-multi-select-input [data-part="user-input"] {
24
+ font-family: var(--cnvs-sys-font-family-default);
25
+ font-weight: var(--cnvs-sys-font-weight-normal);
26
+ line-height: var(--cnvs-sys-line-height-subtext-large);
27
+ font-size: var(--cnvs-sys-font-size-subtext-large);
28
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
29
+ background-color: var(--cnvs-sys-color-bg-transparent);
30
+ border-radius: var(--cnvs-sys-shape-x1);
31
+ border: none!important;
32
+ box-shadow: none!important;
33
+ outline-width: 0px;
34
+ }
35
+
36
+ .cnvs-preview-multi-select-input [data-part="user-input"]:where([data-part="user-input"], [data-part="form-input"]) {
37
+ height: calc(var(--cnvs-sys-space-x10) - 0.125rem);
38
+ }
39
+
40
+ .cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete])) {
41
+ caret-color: transparent;
42
+ cursor: default;
43
+ }
44
+
45
+ .cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete]))::selection {
46
+ background-color: transparent;
47
+ }
48
+
49
+ .cnvs-preview-multi-select-input:has(:disabled, .disabled) {
50
+ border-color: var(--cnvs-sys-color-border-input-disabled);
51
+ color: var(--cnvs-sys-color-text-disabled);
52
+ }
53
+
54
+ .cnvs-preview-multi-select-input :where([data-part="form-input"]) {
55
+ position: absolute;
56
+ top: var(--cnvs-sys-space-zero);
57
+ bottom: var(--cnvs-sys-space-zero);
58
+ left: var(--cnvs-sys-space-zero);
59
+ right: var(--cnvs-sys-space-zero);
60
+ opacity: var(--cnvs-sys-opacity-zero);
61
+ cursor: default;
62
+ pointer-events: none;
63
+ }
64
+
65
+ .cnvs-preview-multi-select-input :where([data-part="separator"]) {
66
+ background-color: var(--cnvs-sys-color-border-divider);
67
+ height: 1px;
68
+ margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
69
+ }
70
+
71
+ .cnvs-preview-multi-select-input :where([data-part="list"]) {
72
+ display: flex;
73
+ gap: var(--cnvs-sys-space-x2);
74
+ padding: var(--cnvs-sys-space-x2);
75
+ flex-wrap: wrap;
76
+ }
77
+
78
+
79
+ .cnvs-preview-multi-select-input.error-error {
80
+ border-color: var(--cnvs-brand-error-base);
81
+ box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);
82
+ }
83
+
84
+ .cnvs-preview-multi-select-input.error-error:has(:hover, :disabled, :focus-visible), .cnvs-preview-multi-select-input.error-error:is(.hover, .disabled, .focus) {
85
+ border-color: var(--cnvs-brand-error-base);
86
+ }
87
+
88
+ .cnvs-preview-multi-select-input.error-error:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-error.focus {
89
+ box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
90
+ outline-offset: 0.125rem;
91
+ }
92
+
93
+
94
+ .cnvs-preview-multi-select-input.error-alert {
95
+ border-color: var(--cnvs-brand-alert-darkest);
96
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
97
+ outline-offset: 0.125rem;
98
+ }
99
+
100
+ .cnvs-preview-multi-select-input.error-alert:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])) {
101
+ border-color: var(--cnvs-brand-alert-darkest);
102
+ }
103
+
104
+ .cnvs-preview-multi-select-input.error-alert:has(:focus-visible, .focus):not(:has([disabled])) {
105
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
106
+ }
107
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "13.2.2",
3
+ "version": "13.2.3",
4
4
  "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "fdcf5da36c0f9b37d0a297d925a911515de53d1a"
28
+ "gitHead": "4bf7deabfbac10c4b4ff7b706c54292c4bf79e35"
29
29
  }
package/pill.css ADDED
@@ -0,0 +1,211 @@
1
+ .cnvs-preview-pill-icon {
2
+ box-sizing: border-box;
3
+ margin-inline-start: calc(var(--cnvs-sys-space-x1) * -1);
4
+ --cnvs-svg-size: 1.25rem;
5
+ flex: 0 0 auto;
6
+ }
7
+
8
+
9
+ .cnvs-preview-pill-icon-button {
10
+ box-sizing: border-box;
11
+ margin-inline-end: calc(0.4375rem * -1);
12
+ margin-inline-start: calc(0.125rem * -1);
13
+ border-radius: var(--cnvs-sys-shape-half);
14
+ height: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
15
+ width: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
16
+ padding: var(--cnvs-sys-space-zero);
17
+ overflow: visible;
18
+ flex: 0 0 auto;
19
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
20
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
21
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
22
+ --cnvs-svg-size: var(--cnvs-sys-space-x6);
23
+ }
24
+
25
+ .cnvs-preview-pill-icon-button ::after {
26
+ content: "";
27
+ height: var(--cnvs-sys-space-x8);
28
+ width: var(--cnvs-sys-space-x8);
29
+ position: absolute;
30
+ left: calc(0.4375rem * -1);
31
+ bottom: calc(0.4375rem * -1);
32
+ margin: var(--cnvs-sys-space-zero);
33
+ pointer-events: all;
34
+ }
35
+
36
+ .cnvs-preview-pill-icon-button:focus-visible, .cnvs-preview-pill-icon-button.focus {
37
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
38
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
39
+ }
40
+
41
+ .cnvs-preview-pill-icon-button:hover, .cnvs-preview-pill-icon-button.hover {
42
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
43
+ }
44
+
45
+ .cnvs-preview-pill-icon-button:disabled, .cnvs-preview-pill-icon-button.disabled {
46
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
47
+ }
48
+
49
+
50
+ .cnvs-preview-pill-count {
51
+ box-sizing: border-box;
52
+ border-start-start-radius: var(--cnvs-sys-shape-zero);
53
+ border-start-end-radius: var(--cnvs-sys-shape-x1);
54
+ border-end-start-radius: var(--cnvs-sys-shape-zero);
55
+ border-end-end-radius: var(--cnvs-sys-shape-x1);
56
+ border-width: 0.0625rem;
57
+ border-inline-start-width: var(--cnvs-sys-space-zero);
58
+ border-style: solid;
59
+ border-color: var(--cnvs-preview-pill-count-border-color, var(--cnvs-sys-color-border-transparent));
60
+ display: inline-flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ height: 1.375rem;
64
+ width: var(--cnvs-sys-space-x6);
65
+ padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
66
+ margin-inline-end: calc(var(--cnvs-sys-space-x2) * -1);
67
+ margin-inline-start: var(--cnvs-sys-space-x1);
68
+ background-color: var(--cnvs-preview-pill-count-background-color, var(--cnvs-sys-color-bg-alt-stronger));
69
+ flex: 0 0 auto;
70
+ }
71
+
72
+
73
+ .cnvs-preview-pill-avatar {
74
+ box-sizing: border-box;
75
+ cursor: pointer;
76
+ flex: 0 0 auto;
77
+ }
78
+
79
+
80
+ .cnvs-preview-pill-label {
81
+ box-sizing: border-box;
82
+ flex-shrink: 1;
83
+ white-space: nowrap;
84
+ text-overflow: ellipsis;
85
+ overflow: hidden;
86
+ }
87
+
88
+
89
+ .cnvs-preview-pill {
90
+ box-sizing: border-box;
91
+ display: initial;
92
+ flex-direction: row;
93
+ align-items: center;
94
+ border-radius: var(--cnvs-sys-shape-x1);
95
+ font-family: var(--cnvs-sys-font-family-default);
96
+ font-weight: var(--cnvs-sys-font-weight-medium);
97
+ line-height: var(--cnvs-sys-line-height-subtext-small);
98
+ font-size: var(--cnvs-sys-font-size-subtext-large);
99
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
100
+ box-shadow: none;
101
+ outline: none;
102
+ -webkit-font-smoothing: antialiased;
103
+ -moz-osx-font-smoothing: grayscale;
104
+ width: fit-content;
105
+ padding: 0.125rem var(--cnvs-sys-space-x2);
106
+ height: var(--cnvs-sys-space-x6);
107
+ position: relative;
108
+ gap: var(--cnvs-sys-space-x1);
109
+ max-width: var(--cnvs-preview-pill-max-width);
110
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
111
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
112
+ --cnvs-button-label: var(--cnvs-sys-color-text-strong);
113
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
114
+ white-space: nowrap;
115
+ text-overflow: ellipsis;
116
+ overflow: hidden;
117
+ }
118
+
119
+ .cnvs-preview-pill:has(span) {
120
+ display: flex;
121
+ line-height: var(--cnvs-sys-line-height-subtext-large);
122
+ }
123
+
124
+ .cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
125
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
126
+ --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
127
+ --cnvs-button-label: var(--cnvs-sys-color-text-strong);
128
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
129
+ border-color: var(--cnvs-sys-color-border-primary-default);
130
+ --cnvs-preview-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
131
+ box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default),0 0 0 0px var(--cnvs-sys-color-border-primary-default);
132
+ }
133
+
134
+ .cnvs-preview-pill:hover, .cnvs-preview-pill.hover {
135
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
136
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
137
+ --cnvs-button-label: var(--cnvs-sys-color-text-strong);
138
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
139
+ }
140
+
141
+ .cnvs-preview-pill:active, .cnvs-preview-pill.active {
142
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
143
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
144
+ --cnvs-button-label: var(--cnvs-sys-color-text-strong);
145
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
146
+ --cnvs-preview-pill-count-background-color: var(--cnvs-base-palette-soap-600);
147
+ --cnvs-preview-pill-count-border-color: transparent;
148
+ }
149
+
150
+ .cnvs-preview-pill:disabled, .cnvs-preview-pill.disabled {
151
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
152
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
153
+ --cnvs-button-label: var(--cnvs-sys-color-text-disabled);
154
+ --cnvs-button-opacity: 1;
155
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
156
+ --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-default);
157
+ --cnvs-preview-pill-count-border-color: transparent;
158
+ }
159
+
160
+
161
+ .cnvs-preview-removeable-pill {
162
+ box-sizing: border-box;
163
+ cursor: default;
164
+ overflow: revert;
165
+ position: relative;
166
+ }
167
+
168
+ .cnvs-preview-removeable-pill:focus-visible, .cnvs-preview-removeable-pill.focus {
169
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
170
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
171
+ --cnvs-button-label: var(--cnvs-sys-color-text-strong);
172
+ box-shadow: none;
173
+ }
174
+
175
+ .cnvs-preview-removeable-pill:hover, .cnvs-preview-removeable-pill.hover {
176
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
177
+ }
178
+
179
+ .cnvs-preview-removeable-pill:active, .cnvs-preview-removeable-pill.active {
180
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
181
+ }
182
+
183
+ .cnvs-preview-removeable-pill:disabled, .cnvs-preview-removeable-pill.disabled {
184
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
185
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
186
+ }
187
+
188
+
189
+ .cnvs-preview-ready-only-pill {
190
+ box-sizing: border-box;
191
+ border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
192
+ cursor: default;
193
+ --cnvs-button-background: transparent;
194
+ }
195
+
196
+ .cnvs-preview-ready-only-pill:hover, .cnvs-preview-ready-only-pill.hover {
197
+ --cnvs-button-background: transparent;
198
+ }
199
+
200
+ .cnvs-preview-ready-only-pill:focus-visible, .cnvs-preview-ready-only-pill.focus {
201
+ --cnvs-button-background: transparent;
202
+ }
203
+
204
+ .cnvs-preview-ready-only-pill:active, .cnvs-preview-ready-only-pill.active {
205
+ --cnvs-button-background: transparent;
206
+ }
207
+
208
+ .cnvs-preview-ready-only-pill:disabled, .cnvs-preview-ready-only-pill.disabled {
209
+ --cnvs-button-background: transparent;
210
+ }
211
+
package/radio.css ADDED
@@ -0,0 +1,203 @@
1
+ .cnvs-preview-radio-input {
2
+ box-sizing: border-box;
3
+ cursor: pointer;
4
+ height: 1.125rem;
5
+ width: 1.125rem;
6
+ border-radius: var(--cnvs-sys-shape-round);
7
+ position: absolute;
8
+ margin: var(--cnvs-sys-space-zero);
9
+ }
10
+
11
+ .cnvs-preview-radio-input:focus-visible, .cnvs-preview-radio-input.focus, .cnvs-preview-radio-input:active {
12
+ outline: transparent;
13
+ }
14
+
15
+ .cnvs-preview-radio-input:disabled, .cnvs-preview-radio-input.disabled {
16
+ cursor: auto;
17
+ }
18
+
19
+ .cnvs-preview-radio-input:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.disabled +.cnvs-radio-check {
20
+ border-color: var(--cnvs-sys-color-border-input-disabled);
21
+ background-color: var(--cnvs-sys-color-bg-alt-softer);
22
+ }
23
+
24
+ .cnvs-preview-radio-input:disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.hover+.cnvs-radio-check {
25
+ border-color: var(--cnvs-sys-color-border-input-disabled);
26
+ }
27
+
28
+ .cnvs-preview-radio-input:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.checked+.cnvs-radio-check {
29
+ background-color: var(--cnvs-brand-primary-accent);
30
+ border: 0.3125rem solid var(--cnvs-brand-primary-base);
31
+ }
32
+
33
+ .cnvs-preview-radio-input +.cnvs-radio-check {
34
+ display: flex;
35
+ flex-direction: column;
36
+ align-items: center;
37
+ background-color: var(--cnvs-sys-color-bg-default);
38
+ border-radius: var(--cnvs-sys-shape-round);
39
+ box-sizing: border-box;
40
+ border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
41
+ height: 1.125rem;
42
+ width: 1.125rem;
43
+ justify-content: center;
44
+ pointer-events: none;
45
+ position: absolute;
46
+ transition: border 200ms ease,background 200ms;
47
+ opacity: var(--cnvs-sys-opacity-full);
48
+ }
49
+
50
+ .cnvs-preview-radio-input:hover+.cnvs-radio-check, .cnvs-preview-radio-input.hover+.cnvs-radio-check {
51
+ border-color: var(--cnvs-sys-color-border-input-strong);
52
+ }
53
+
54
+ .cnvs-preview-radio-input:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.focus+.cnvs-radio-check {
55
+ border-color: var(--cnvs-sys-color-border-primary-default);
56
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 1px var(--cnvs-brand-common-focus-outline);
57
+ }
58
+
59
+ .cnvs-preview-radio-input:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover+.cnvs-radio-check {
60
+ outline: transparent;
61
+ }
62
+
63
+ .cnvs-preview-radio-input:checked+.cnvs-radio-check, .cnvs-preview-radio-input.checked+.cnvs-radio-check {
64
+ background-color: var(--cnvs-brand-primary-accent);
65
+ border: 0.3125rem solid var(--cnvs-brand-primary-base);
66
+ }
67
+
68
+ .cnvs-preview-radio-input:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover:checked+.cnvs-radio-check {
69
+ outline: transparent;
70
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
71
+ }
72
+
73
+
74
+ .cnvs-preview-radio-input.variant-inverse +.cnvs-radio-check {
75
+ background-color: var(--cnvs-sys-color-bg-alt-softer);
76
+ border-color: var(--cnvs-sys-color-border-input-inverse);
77
+ }
78
+
79
+ .cnvs-preview-radio-input.variant-inverse:disabled, .cnvs-preview-radio-input.variant-inverse.disabled {
80
+ opacity: var(--cnvs-sys-opacity-disabled);
81
+ }
82
+
83
+ .cnvs-preview-radio-input.variant-inverse:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled +.cnvs-radio-check {
84
+ background-color: var(--cnvs-sys-color-bg-alt-softer);
85
+ border-color: var(--cnvs-sys-color-border-input-disabled);
86
+ opacity: var(--cnvs-sys-opacity-disabled);
87
+ }
88
+
89
+ .cnvs-preview-radio-input.variant-inverse:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled.checked+.cnvs-radio-check {
90
+ background-color: var(--cnvs-brand-primary-base);
91
+ border-color: var(--cnvs-sys-color-border-inverse);
92
+ }
93
+
94
+ .cnvs-preview-radio-input.variant-inverse:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.hover+.cnvs-radio-check {
95
+ border-color: var(--cnvs-sys-color-border-input-inverse);
96
+ }
97
+
98
+ .cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check {
99
+ border-color: var(--cnvs-sys-color-border-input-inverse);
100
+ }
101
+
102
+ .cnvs-preview-radio-input.variant-inverse:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.checked+.cnvs-radio-check {
103
+ background-color: var(--cnvs-brand-primary-base);
104
+ border-color: var(--cnvs-sys-color-border-inverse);
105
+ }
106
+
107
+ .cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover+.cnvs-radio-check {
108
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
109
+ }
110
+
111
+ .cnvs-preview-radio-input.variant-inverse:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover:checked+.cnvs-radio-check {
112
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
113
+ }
114
+
115
+
116
+ .cnvs-preview-radio-input-wrapper-styles {
117
+ box-sizing: border-box;
118
+ height: 1.125rem;
119
+ width: 1.125rem;
120
+ flex: 0 0 auto;
121
+ }
122
+
123
+ .cnvs-preview-radio-input-wrapper-styles ::before {
124
+ content: '';
125
+ position: absolute;
126
+ border-radius: var(--cnvs-sys-shape-round);
127
+ height: 1.125rem;
128
+ transition: box-shadow 150ms ease-out;
129
+ width: 1.125rem;
130
+ pointer-events: none;
131
+ opacity: var(--cnvs-sys-opacity-full);
132
+ }
133
+
134
+ .cnvs-preview-radio-input-wrapper-styles:hover:before, .cnvs-preview-radio-input-wrapper-styles.hover:before {
135
+ box-shadow: 0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);
136
+ }
137
+
138
+
139
+ .cnvs-preview-radio-input-wrapper-styles.variant-inverse ::before {
140
+ opacity: var(--cnvs-sys-opacity-disabled);
141
+ }
142
+
143
+
144
+ .cnvs-preview-radio-input-wrapper-styles.disabled:hover:before, .cnvs-preview-radio-input-wrapper-styles.disabled.hover:before {
145
+ box-shadow: none;
146
+ cursor: auto;
147
+ }
148
+
149
+
150
+ .cnvs-preview-radio-text {
151
+ box-sizing: border-box;
152
+ cursor: pointer;
153
+ }
154
+
155
+
156
+ .cnvs-preview-radio-text.variant-inverse {
157
+ color: var(--cnvs-sys-color-text-inverse);
158
+ }
159
+
160
+
161
+ .cnvs-preview-radio-text.disabled {
162
+ cursor: default;
163
+ color: var(--cnvs-sys-color-text-disabled);
164
+ }
165
+
166
+
167
+ .cnvs-preview-radio-text.variant-inverse.disabled {
168
+ color: var(--cnvs-sys-color-text-inverse);
169
+ opacity: var(--cnvs-sys-opacity-disabled);
170
+ }
171
+
172
+
173
+ .cnvs-preview-radio-label {
174
+ box-sizing: border-box;
175
+ align-items: flex-start;
176
+ min-height: var(--cnvs-sys-space-x6);
177
+ position: relative;
178
+ gap: var(--cnvs-sys-space-x3);
179
+ }
180
+
181
+
182
+ .cnvs-preview-radio-group {
183
+ box-sizing: border-box;
184
+ display: flex;
185
+ flex-direction: column;
186
+ border-radius: var(--cnvs-sys-shape-x1);
187
+ gap: var(--cnvs-sys-space-x2);
188
+ padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
189
+ margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
190
+ transition: 100ms box-shadow;
191
+ width: fit-content;
192
+ }
193
+
194
+
195
+ .cnvs-preview-radio-group.error-error {
196
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
197
+ }
198
+
199
+
200
+ .cnvs-preview-radio-group.error-alert {
201
+ box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest),inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);
202
+ }
203
+
package/side-panel.css ADDED
@@ -0,0 +1,114 @@
1
+ .cnvs-preview-side-panel-toggle-button {
2
+ box-sizing: border-box;
3
+ position: absolute;
4
+ top: var(--cnvs-sys-space-x6);
5
+ width: var(--cnvs-sys-space-x8);
6
+ inset-inline-end: var(--cnvs-sys-space-x4);
7
+ }
8
+
9
+
10
+ .cnvs-preview-side-panel-toggle-button.state-collapsing {
11
+ margin: 0;
12
+ transform: scaleX(1);
13
+ }
14
+
15
+ .cnvs-preview-side-panel-toggle-button.state-collapsing :dir(rtl) {
16
+ transform: scaleX(-1);
17
+ }
18
+
19
+
20
+ .cnvs-preview-side-panel-toggle-button.state-collapsed {
21
+ margin: auto;
22
+ inset-inline-start: 0;
23
+ inset-inline-end: 0;
24
+ transform: scaleX(1);
25
+ }
26
+
27
+ .cnvs-preview-side-panel-toggle-button.state-collapsed :dir(rtl) {
28
+ transform: scaleX(-1);
29
+ }
30
+
31
+
32
+ .cnvs-preview-side-panel-toggle-button.state-expanded {
33
+ margin: 0;
34
+ transform: scaleX(-1);
35
+ }
36
+
37
+ .cnvs-preview-side-panel-toggle-button.state-expanded :dir(rtl) {
38
+ transform: scaleX(1);
39
+ }
40
+
41
+
42
+ .cnvs-preview-side-panel-toggle-button.state-expanding {
43
+ margin: 0;
44
+ transform: scaleX(-1);
45
+ }
46
+
47
+ .cnvs-preview-side-panel-toggle-button.state-expanding :dir(rtl) {
48
+ transform: scaleX(1);
49
+ }
50
+
51
+
52
+
53
+
54
+ .cnvs-preview-side-panel-toggle-button.state-collapsed.origin-right {
55
+ transform: scaleX(-1);
56
+ }
57
+
58
+
59
+ .cnvs-preview-side-panel-toggle-button.state-collapsing.origin-right {
60
+ transform: scaleX(-1);
61
+ inset-inline-start: var(--cnvs-sys-space-x4);
62
+ }
63
+
64
+
65
+ .cnvs-preview-side-panel-toggle-button.state-expanded.origin-right {
66
+ transform: scaleX(1);
67
+ inset-inline-start: var(--cnvs-sys-space-x4);
68
+ }
69
+
70
+
71
+ .cnvs-preview-side-panel-toggle-button.state-expanding.origin-right {
72
+ transform: scaleX(1);
73
+ inset-inline-start: var(--cnvs-sys-space-x4);
74
+ }
75
+
76
+
77
+ .cnvs-preview-panel {
78
+ box-sizing: border-box;
79
+ overflow: hidden;
80
+ position: relative;
81
+ height: 100%;
82
+ outline: 0.0625rem solid transparent;
83
+ transition: width ease-out 200ms,max-width ease-out 200ms;
84
+ }
85
+
86
+
87
+ .cnvs-preview-panel.variant-alternate {
88
+ background-color: var(--cnvs-sys-color-bg-default);
89
+ box-shadow: var(--cnvs-sys-depth-5);
90
+ }
91
+
92
+
93
+ .cnvs-preview-panel.variant-standard {
94
+ background-color: var(--cnvs-sys-color-bg-alt-softer);
95
+ }
96
+
97
+
98
+ .cnvs-preview-panel.expanded {
99
+ width: var(--cnvs-preview-panel-expanded-width);
100
+ max-width: var(--cnvs-preview-panel-expanded-width);
101
+ }
102
+
103
+
104
+ .cnvs-preview-panel.expanded-false {
105
+ width: var(--cnvs-preview-panel-collapsed-width);
106
+ max-width: var(--cnvs-preview-panel-collapsed-width);
107
+ }
108
+
109
+
110
+
111
+ .cnvs-preview-panel.touched-false {
112
+ animation: none;
113
+ }
114
+
package/status-indicator.css ADDED
@@ -0,0 +1,107 @@
1
+ .cnvs-preview-status-indicator-label {
2
+ box-sizing: border-box;
3
+ font-weight: var(--cnvs-sys-font-weight-bold);
4
+ white-space: nowrap;
5
+ overflow: hidden;
6
+ text-overflow: ellipsis;
7
+ text-transform: capitalize;
8
+ color: inherit;
9
+ }
10
+
11
+
12
+ .cnvs-preview-status-indicator {
13
+ box-sizing: border-box;
14
+ display: inline-flex;
15
+ gap: var(--cnvs-sys-space-x1);
16
+ max-width: 12.5rem;
17
+ align-items: center;
18
+ border-radius: var(--cnvs-sys-shape-half);
19
+ height: 1.25rem;
20
+ padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
21
+ outline: 0.0625rem solid transparent;
22
+ }
23
+
24
+
25
+ .cnvs-preview-status-indicator.gray-high {
26
+ color: var(--cnvs-sys-color-static-white);
27
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
28
+ background: var(--cnvs-sys-color-static-gray-default);
29
+ }
30
+
31
+
32
+ .cnvs-preview-status-indicator.gray-low {
33
+ color: var(--cnvs-sys-color-static-gray-strong);
34
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-strong);
35
+ background: var(--cnvs-sys-color-static-gray-soft);
36
+ }
37
+
38
+
39
+ .cnvs-preview-status-indicator.orange-high {
40
+ color: var(--cnvs-sys-color-static-gray-stronger);
41
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-stronger);
42
+ background: var(--cnvs-sys-color-static-orange-default);
43
+ }
44
+
45
+
46
+ .cnvs-preview-status-indicator.orange-low {
47
+ color: var(--cnvs-sys-color-static-gold-stronger);
48
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-gold-stronger);
49
+ background: var(--cnvs-sys-color-static-orange-soft);
50
+ }
51
+
52
+
53
+ .cnvs-preview-status-indicator.blue-high {
54
+ color: var(--cnvs-sys-color-static-white);
55
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
56
+ background: var(--cnvs-sys-color-static-blue-default);
57
+ }
58
+
59
+
60
+ .cnvs-preview-status-indicator.blue-low {
61
+ color: var(--cnvs-sys-color-static-blue-strong);
62
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-blue-strong);
63
+ background: var(--cnvs-sys-color-static-blue-soft);
64
+ }
65
+
66
+
67
+ .cnvs-preview-status-indicator.green-high {
68
+ color: var(--cnvs-sys-color-static-white);
69
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
70
+ background: var(--cnvs-sys-color-static-green-strong);
71
+ }
72
+
73
+
74
+ .cnvs-preview-status-indicator.green-low {
75
+ color: var(--cnvs-sys-color-static-green-strong);
76
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-green-strong);
77
+ background: var(--cnvs-sys-color-static-green-soft);
78
+ }
79
+
80
+
81
+ .cnvs-preview-status-indicator.red-high {
82
+ color: var(--cnvs-sys-color-static-white);
83
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
84
+ background: var(--cnvs-sys-color-static-red-default);
85
+ }
86
+
87
+
88
+ .cnvs-preview-status-indicator.red-low {
89
+ color: var(--cnvs-sys-color-static-red-strong);
90
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-red-strong);
91
+ background: var(--cnvs-sys-color-static-red-soft);
92
+ }
93
+
94
+
95
+ .cnvs-preview-status-indicator.transparent-high {
96
+ color: var(--cnvs-sys-color-static-white);
97
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
98
+ background: var(--cnvs-sys-color-bg-translucent);
99
+ }
100
+
101
+
102
+ .cnvs-preview-status-indicator.transparent-low {
103
+ color: var(--cnvs-sys-color-static-white);
104
+ --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
105
+ background: var(--cnvs-sys-color-bg-translucent);
106
+ }
107
+