@workday/canvas-kit-preview-css 16.0.0-alpha.0470-next.0 → 16.0.0-alpha.0475-next.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 (3) hide show
  1. package/loading-sparkles.css +2 -2
  2. package/package.json +2 -2
  3. package/tabs.css +176 -0
package/loading-sparkles.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2slgnw {
1
+ @keyframes animation-fq1e3 {
2
2
  0%, 79%, 100% {
3
3
  opacity: 0.2;
4
4
  transform: scale(0.55);
@@ -26,7 +26,7 @@
26
26
  animation-duration: 1230ms;
27
27
  animation-fill-mode: both;
28
28
  animation-iteration-count: infinite;
29
- animation-name: animation-2slgnw;
29
+ animation-name: animation-fq1e3;
30
30
  animation-timing-function: ease-in-out;
31
31
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-ai);
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "16.0.0-alpha.0470-next.0",
3
+ "version": "16.0.0-alpha.0475-next.0",
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": "015bc0395248b6243fe302947a22b4e92b5d1876"
28
+ "gitHead": "82422d46f689844113866ba99ffad38956bde57c"
29
29
  }
package/tabs.css ADDED
@@ -0,0 +1,176 @@
1
+ .cnvs-preview-tab-item {
2
+ box-sizing: border-box;
3
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
4
+ font-family: var(--cnvs-sys-font-family-default, "Roboto");
5
+ font-weight: var(--cnvs-sys-font-weight-medium);
6
+ line-height: var(--cnvs-sys-line-height-subtext-lg, 1.25rem);
7
+ font-size: var(--cnvs-sys-font-size-subtext-lg, 0.875rem);
8
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);
9
+ background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
10
+ flex: 0 0 auto;
11
+ min-width: 0;
12
+ align-items: center;
13
+ padding: 0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
14
+ height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
15
+ cursor: pointer;
16
+ color: var(--cnvs-sys-color-fg-default);
17
+ position: relative;
18
+ transition: background 150ms ease,color 150ms ease;
19
+ white-space: nowrap;
20
+ text-overflow: ellipsis;
21
+ overflow: hidden;
22
+ --cnvs-system-icon-color: currentColor;
23
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
24
+ }
25
+
26
+ .cnvs-preview-tab-item:has(span) {
27
+ display: flex;
28
+ gap: var(--cnvs-base-size-75, 0.375rem);
29
+ }
30
+
31
+ .cnvs-preview-tab-item:hover, .cnvs-preview-tab-item.hover {
32
+ color: var(--cnvs-sys-color-fg-strong);
33
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
34
+ }
35
+
36
+ .cnvs-preview-tab-item:focus-visible, .cnvs-preview-tab-item.focus {
37
+ outline: 0.125rem solid transparent;
38
+ background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
39
+ color: var(--cnvs-sys-color-fg-strong);
40
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
41
+ }
42
+
43
+ .cnvs-preview-tab-item:disabled, .cnvs-preview-tab-item.disabled, .cnvs-preview-tab-item[aria-disabled] {
44
+ opacity: var(--cnvs-sys-opacity-disabled);
45
+ }
46
+
47
+ .cnvs-preview-tab-item:disabled:hover, .cnvs-preview-tab-item.disabled:hover, .cnvs-preview-tab-item[aria-disabled]:hover {
48
+ cursor: auto;
49
+ background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
50
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
51
+ }
52
+
53
+ .cnvs-preview-tab-item[aria-selected=true] {
54
+ color: var(--cnvs-sys-color-fg-default);
55
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
56
+ }
57
+
58
+ .cnvs-preview-tab-item[aria-selected=true]:hover, .cnvs-preview-tab-item[aria-selected=true].hover, .cnvs-preview-tab-item[aria-selected=true]:focus-visible, .cnvs-preview-tab-item[aria-selected=true].focus {
59
+ color: var(--cnvs-sys-color-fg-default);
60
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
61
+ }
62
+
63
+
64
+ .cnvs-preview-tab-item.variant-filled {
65
+ border: 0.0625rem solid transparent;
66
+ }
67
+
68
+ .cnvs-preview-tab-item.variant-filled:hover, .cnvs-preview-tab-item.variant-filled.hover {
69
+ background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
70
+ }
71
+
72
+ .cnvs-preview-tab-item.variant-filled:focus-visible, .cnvs-preview-tab-item.variant-filled.focus {
73
+ box-shadow: 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-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
74
+ }
75
+
76
+ .cnvs-preview-tab-item.variant-filled[aria-selected=true] {
77
+ background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
78
+ border-color: var(--cnvs-sys-color-border-input-default);
79
+ }
80
+
81
+ .cnvs-preview-tab-item.variant-filled[aria-selected=true]:hover, .cnvs-preview-tab-item.variant-filled[aria-selected=true].hover, .cnvs-preview-tab-item.variant-filled[aria-selected=true]:focus-visible, .cnvs-preview-tab-item.variant-filled[aria-selected=true].focus {
82
+ background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
83
+ }
84
+
85
+ .cnvs-preview-tab-item.variant-filled[aria-selected=true]:focus-visible, .cnvs-preview-tab-item.variant-filled[aria-selected=true].focus {
86
+ border-width: 0.125rem;
87
+ margin-inline: -0.0625rem;
88
+ }
89
+
90
+ @media (forced-colors: active) {
91
+ .cnvs-preview-tab-item.variant-filled[aria-selected=true] {
92
+ outline: 0.125rem solid ButtonBorder;
93
+ }
94
+
95
+
96
+ }
97
+
98
+
99
+ .cnvs-preview-tab-item.variant-outlined {
100
+ border: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
101
+ margin-inline: 0.0625rem;
102
+ }
103
+
104
+ .cnvs-preview-tab-item.variant-outlined:hover, .cnvs-preview-tab-item.variant-outlined.hover {
105
+ border-color: var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));
106
+ }
107
+
108
+ .cnvs-preview-tab-item.variant-outlined:focus-visible, .cnvs-preview-tab-item.variant-outlined.focus {
109
+ margin-inline: 0rem;
110
+ border: 0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
111
+ }
112
+
113
+ .cnvs-preview-tab-item.variant-outlined[aria-selected=true] {
114
+ margin-inline: 0rem;
115
+ border: 0.125rem solid var(--cnvs-sys-color-border-contrast-default);
116
+ }
117
+
118
+ .cnvs-preview-tab-item.variant-outlined[aria-selected=true]:hover, .cnvs-preview-tab-item.variant-outlined[aria-selected=true].hover, .cnvs-preview-tab-item.variant-outlined[aria-selected=true]:focus-visible, .cnvs-preview-tab-item.variant-outlined[aria-selected=true].focus {
119
+ border: 0.125rem solid var(--cnvs-sys-color-border-contrast-default);
120
+ }
121
+
122
+ .cnvs-preview-tab-item.variant-outlined[aria-selected=true]:focus-visible, .cnvs-preview-tab-item.variant-outlined[aria-selected=true].focus {
123
+ box-shadow: 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-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
124
+ }
125
+
126
+
127
+ .cnvs-preview-tabs-list {
128
+ box-sizing: border-box;
129
+ display: flex;
130
+ position: relative;
131
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
132
+ }
133
+
134
+ @media screen and (max-width: 768px) {
135
+ .cnvs-preview-tabs-list {
136
+ padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
137
+ }
138
+
139
+
140
+ }
141
+
142
+
143
+ .cnvs-preview-tabs-list.modality-touch {
144
+ overflow-x: auto;
145
+ padding-inline: 0;
146
+ }
147
+
148
+ .cnvs-preview-tabs-list.modality-touch[data-scroll-position="start"] {
149
+ mask-image: linear-gradient(to right, white 80%, transparent);
150
+ }
151
+
152
+ .cnvs-preview-tabs-list.modality-touch[data-scroll-position="middle"] {
153
+ mask-image: linear-gradient(to left, white 80%, transparent),linear-gradient(to right, white 80%, transparent);
154
+ mask-composite: intersect;
155
+ }
156
+
157
+ .cnvs-preview-tabs-list.modality-touch[data-scroll-position="end"] {
158
+ mask-image: linear-gradient(to left, white 80%, transparent);
159
+ }
160
+
161
+
162
+
163
+
164
+
165
+
166
+
167
+
168
+ .cnvs-preview-tabs-overflow-button {
169
+ box-sizing: border-box;
170
+ }
171
+
172
+ .cnvs-preview-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
173
+ display: flex;
174
+ gap: 0;
175
+ }
176
+