@workday/canvas-kit-preview-css 14.0.0-alpha.1123-next.0 → 14.0.0-alpha.1126-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/segmented-control.css +153 -0
package/loading-sparkles.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-tsyk3 {
1
+ @keyframes animation-zeju3 {
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-tsyk3;
29
+ animation-name: animation-zeju3;
30
30
  animation-timing-function: ease-in-out;
31
31
  --cnvs-system-icon-color: var(--cnvs-base-extended-palette-dragon-fruit-400);
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "14.0.0-alpha.1123-next.0",
3
+ "version": "14.0.0-alpha.1126-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": "3601377207d7646ceeffe3a2161b671ccd8e8eab"
28
+ "gitHead": "5420bd738ba9800e4443d4ec6103df51634529e9"
29
29
  }
package/segmented-control.css ADDED
@@ -0,0 +1,153 @@
1
+ .cnvs-preview-segmented-control-list {
2
+ box-sizing: border-box;
3
+ display: inline-grid;
4
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
5
+ border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
6
+ border-radius: var(--cnvs-sys-shape-x2);
7
+ padding: 0.1875rem;
8
+ grid-gap: var(--cnvs-sys-space-x2);
9
+ }
10
+
11
+
12
+ .cnvs-preview-segmented-control-list.disabled {
13
+ opacity: var(--cnvs-sys-opacity-disabled);
14
+ }
15
+
16
+
17
+ .cnvs-preview-segmented-control-list.orientation-vertical {
18
+ grid-template-rows: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
19
+ }
20
+
21
+
22
+ .cnvs-preview-segmented-control-list.orientation-horizontal {
23
+ grid-template-columns: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
24
+ }
25
+
26
+
27
+ .cnvs-preview-segmented-control-item {
28
+ box-sizing: border-box;
29
+ font-family: var(--cnvs-sys-font-family-default);
30
+ font-weight: var(--cnvs-sys-font-weight-bold);
31
+ line-height: var(--cnvs-sys-line-height-subtext-large);
32
+ font-size: var(--cnvs-sys-font-size-subtext-large);
33
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
34
+ text-align: start;
35
+ padding-inline: var(--cnvs-sys-space-zero);
36
+ gap: var(--cnvs-sys-space-x1);
37
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
38
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
39
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
40
+ }
41
+
42
+ .cnvs-preview-segmented-control-item:hover, .cnvs-preview-segmented-control-item.hover {
43
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
44
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
45
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
46
+ }
47
+
48
+ .cnvs-preview-segmented-control-item:active, .cnvs-preview-segmented-control-item.active {
49
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
50
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
51
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
52
+ }
53
+
54
+ .cnvs-preview-segmented-control-item:focus-visible, .cnvs-preview-segmented-control-item.focus {
55
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
56
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
57
+ }
58
+
59
+ .cnvs-preview-segmented-control-item:disabled, .cnvs-preview-segmented-control-item.disabled {
60
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
61
+ }
62
+
63
+ .cnvs-preview-segmented-control-item[aria-pressed='true'] {
64
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
65
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
66
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
67
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
68
+ }
69
+
70
+ .cnvs-preview-segmented-control-item[aria-pressed='true']:hover, .cnvs-preview-segmented-control-item[aria-pressed='true'].hover {
71
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
72
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
73
+ }
74
+
75
+ .cnvs-preview-segmented-control-item[aria-pressed='true']:disabled, .cnvs-preview-segmented-control-item[aria-pressed='true'].disabled {
76
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
77
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
78
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
79
+ }
80
+
81
+ .cnvs-preview-segmented-control-item :dir(rtl) svg {
82
+ transform: scaleX(-1);
83
+ }
84
+
85
+
86
+ .cnvs-preview-segmented-control-item.size-large {
87
+ height: var(--cnvs-sys-space-x10);
88
+ gap: var(--cnvs-sys-space-x2);
89
+ }
90
+
91
+
92
+ .cnvs-preview-segmented-control-item.size-medium {
93
+ height: var(--cnvs-sys-space-x8);
94
+ }
95
+
96
+
97
+ .cnvs-preview-segmented-control-item.size-small {
98
+ font-family: var(--cnvs-sys-font-family-default);
99
+ font-weight: var(--cnvs-sys-font-weight-bold);
100
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
101
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
102
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
103
+ height: var(--cnvs-sys-space-x6);
104
+ }
105
+
106
+
107
+
108
+
109
+
110
+ .cnvs-preview-segmented-control-item.size-large.variant-iconOnly {
111
+ min-width: var(--cnvs-sys-space-x10);
112
+ }
113
+
114
+
115
+ .cnvs-preview-segmented-control-item.size-large.variant-iconWithText {
116
+ padding-inline: 1.25rem var(--cnvs-sys-space-x6);
117
+ }
118
+
119
+
120
+ .cnvs-preview-segmented-control-item.size-large.variant-textOnly {
121
+ padding-inline: var(--cnvs-sys-space-x6);
122
+ }
123
+
124
+
125
+ .cnvs-preview-segmented-control-item.size-medium.variant-iconOnly {
126
+ min-width: var(--cnvs-sys-space-x8);
127
+ }
128
+
129
+
130
+ .cnvs-preview-segmented-control-item.size-medium.variant-iconWithText {
131
+ padding-inline: var(--cnvs-sys-space-x4) 1.25rem;
132
+ }
133
+
134
+
135
+ .cnvs-preview-segmented-control-item.size-medium.variant-textOnly {
136
+ padding-inline: 1.25rem;
137
+ }
138
+
139
+
140
+ .cnvs-preview-segmented-control-item.size-small.variant-iconOnly {
141
+ min-width: var(--cnvs-sys-space-x6);
142
+ }
143
+
144
+
145
+ .cnvs-preview-segmented-control-item.size-small.variant-iconWithText {
146
+ padding-inline: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);
147
+ }
148
+
149
+
150
+ .cnvs-preview-segmented-control-item.size-small.variant-textOnly {
151
+ padding-inline: var(--cnvs-sys-space-x3);
152
+ }
153
+