Skip to content

Commit 5a07658

Browse files
aramos-adobearamos-adobe
committed
Merge branch 'aramos-adobe/css763-progress-circle-s2-tokens' of https://github.com/adobe/spectrum-css into aramos-adobe/css763-progress-circle-s2-tokens
2 parents 2900398 + 0d547ff commit 5a07658

File tree

5 files changed

+56
-123
lines changed

5 files changed

+56
-123
lines changed

‎components/progressbar/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,14 @@
133133
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
134134
border-radius: var(--spectrum-progressbar-corner-radius);
135135

136-
background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
136+
background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
137137
}
138138

139139
.spectrum-ProgressBar-fill {
140140
border: none;
141141
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
142142
transition: width 1s;
143-
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
143+
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
144144
}
145145
}
146146

@@ -192,7 +192,7 @@
192192
}
193193

194194
.spectrum-ProgressBar-track {
195-
background-color: var(--spectrum-progressbar-track-color-white);
195+
background: var(--spectrum-progressbar-track-color-white);
196196
}
197197
}
198198

‎components/progresscircle/dist/metadata.json

Lines changed: 17 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,30 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4+
".spectrum-Circle",
45
".spectrum-ProgressCircle",
5-
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1",
6-
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
7-
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
8-
".spectrum-ProgressCircle--indeterminate-fill-submask-2",
6+
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill",
7+
".spectrum-ProgressCircle--sizeL",
8+
".spectrum-ProgressCircle--sizeS",
99
".spectrum-ProgressCircle-fill",
10-
".spectrum-ProgressCircle-fillMask1",
11-
".spectrum-ProgressCircle-fillMask2",
12-
".spectrum-ProgressCircle-fillSubMask1",
13-
".spectrum-ProgressCircle-fillSubMask2",
14-
".spectrum-ProgressCircle-fills",
1510
".spectrum-ProgressCircle-track",
16-
".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
17-
".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
18-
".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
19-
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill",
20-
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track",
11+
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
12+
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
13+
".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
14+
".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle",
2115
"0%",
22-
"1.69%",
23-
"10.17%",
24-
"11.86%",
25-
"13.56%",
26-
"15.25%",
27-
"16.95%",
28-
"18.64%",
29-
"20.34%",
30-
"22.03%",
31-
"23.73%",
32-
"25.42%",
33-
"27.12%",
34-
"28.81%",
35-
"3.39%",
36-
"30.51%",
37-
"32.2%",
38-
"33.9%",
39-
"35.59%",
40-
"37.29%",
41-
"38.98%",
42-
"40.68%",
43-
"42.37%",
44-
"44.07%",
45-
"45.76%",
46-
"47.46%",
47-
"49.15%",
48-
"5.08%",
49-
"50.85%",
50-
"52.54%",
51-
"54.24%",
52-
"55.93%",
53-
"57.63%",
54-
"59.32%",
55-
"6.78%",
56-
"61.02%",
57-
"62.71%",
58-
"64.41%",
59-
"66.1%",
60-
"67.8%",
61-
"69.49%",
62-
"71.19%",
63-
"72.88%",
64-
"74.58%",
65-
"76.27%",
66-
"77.97%",
67-
"79.66%",
68-
"8.47%",
69-
"81.36%",
70-
"83.05%",
71-
"84.75%",
72-
"86.44%",
73-
"88.14%",
74-
"89.83%",
75-
"91.53%",
76-
"93.22%",
77-
"94.92%",
78-
"96.61%",
79-
"98.31%",
16+
"30%",
8017
"to"
8118
],
8219
"modifiers": [
8320
"--mod-progress-circle-fill-border-color",
84-
"--mod-progress-circle-fill-border-color-over-background",
8521
"--mod-progress-circle-position",
8622
"--mod-progress-circle-size",
8723
"--mod-progress-circle-thickness",
88-
"--mod-progress-circle-track-border-color",
89-
"--mod-progress-circle-track-border-color-over-background",
90-
"--mod-progress-circle-track-border-style"
24+
"--mod-progress-circle-track-border-color"
9125
],
9226
"component": [
9327
"--spectrum-progress-circle-fill-border-color",
94-
"--spectrum-progress-circle-fill-border-color-over-background",
9528
"--spectrum-progress-circle-size",
9629
"--spectrum-progress-circle-size-large",
9730
"--spectrum-progress-circle-size-medium",
@@ -100,19 +33,19 @@
10033
"--spectrum-progress-circle-thickness-large",
10134
"--spectrum-progress-circle-thickness-medium",
10235
"--spectrum-progress-circle-thickness-small",
103-
"--spectrum-progress-circle-track-border-color",
104-
"--spectrum-progress-circle-track-border-color-over-background",
105-
"--spectrum-progress-circle-track-border-style"
36+
"--spectrum-progress-circle-track-border-color"
10637
],
10738
"global": [
10839
"--spectrum-accent-content-color-default",
109-
"--spectrum-gray-200",
110-
"--spectrum-transparent-white-300",
111-
"--spectrum-transparent-white-900"
40+
"--spectrum-static-black-track-color",
41+
"--spectrum-static-black-track-indicator-color",
42+
"--spectrum-static-white-track-color",
43+
"--spectrum-static-white-track-indicator-color",
44+
"--spectrum-track-color"
11245
],
11346
"passthroughs": [],
11447
"high-contrast": [
11548
"--highcontrast-progress-circle-fill-border-color",
116-
"--highcontrast-progress-circle-fill-border-color-over-background"
49+
"--highcontrast-progressbar-track-color"
11750
]
11851
}

‎plugins/postcss-add-theming-layer/README.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ Use the plugin in your PostCSS configuration:
2020

2121
```js
2222
module.exports = {
23-
plugins: {
24-
"postcss-add-theming-layer": {},
25-
},
23+
plugins: {
24+
"postcss-add-theming-layer": {},
25+
},
2626
};
2727
```
2828

@@ -64,49 +64,49 @@ This plugin turns this:
6464

6565
```css
6666
@container style(--system: legacy) {
67-
.component {
68-
--background-color: blue;
69-
}
70-
.component.is-selected {
71-
--background-color: darkblue;
72-
}
73-
.component .icon {
74-
--color: gray;
75-
}
67+
.component {
68+
--background-color: blue;
69+
}
70+
.component.is-selected {
71+
--background-color: darkblue;
72+
}
73+
.component .icon {
74+
--color: gray;
75+
}
7676
}
7777

7878
@container style(--system: modern) {
79-
.component {
80-
--background-color: purple;
81-
}
82-
.component.is-selected {
83-
--background-color: darkpurple;
84-
}
85-
.component .icon {
86-
--color: white;
87-
}
79+
.component {
80+
--background-color: purple;
81+
}
82+
.component.is-selected {
83+
--background-color: darkpurple;
84+
}
85+
.component .icon {
86+
--color: white;
87+
}
8888
}
8989
```
9090

9191
Into this:
9292

9393
```css
9494
.legacy {
95-
--system-component-background-color: blue;
96-
--system-component-selected-background-color: darkblue;
95+
--system-component-background-color: blue;
96+
--system-component-selected-background-color: darkblue;
9797
}
9898

9999
.modern {
100-
--system-component-background-color: purple;
101-
--system-component-selected-background-color: darkpurple;
100+
--system-component-background-color: purple;
101+
--system-component-selected-background-color: darkpurple;
102102
}
103103

104104
.component {
105-
--background-color: var(--system-component-background-color);
105+
--background-color: var(--system-component-background-color);
106106
}
107107

108108
.component.is-selected {
109-
--background-color: var(--system-component-selected-background-color);
109+
--background-color: var(--system-component-selected-background-color);
110110
}
111111
```
112112

‎plugins/postcss-property-rollup/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,31 @@ or in the PostCSS configuration:
2020

2121
```js
2222
module.exports = {
23-
plugins: {
24-
"postcss-property-rollup": {},
25-
},
23+
plugins: {
24+
"postcss-property-rollup": {},
25+
},
2626
};
2727
```
2828

2929
This plugin turns this:
3030

3131
```css
3232
.lorem {
33-
--spectrum-actionbutton-background-color: blue;
34-
--spectrum-actionbutton-border-color: transparent;
33+
--spectrum-actionbutton-background-color: blue;
34+
--spectrum-actionbutton-border-color: transparent;
3535
}
3636

3737
.ipsum {
38-
--spectrum-actionbutton-background-color: purple;
38+
--spectrum-actionbutton-background-color: purple;
3939
}
4040
```
4141

4242
Into this:
4343

4444
```css
4545
.ipsum {
46-
--spectrum-actionbutton-border-color: transparent;
47-
--spectrum-actionbutton-background-color: purple;
46+
--spectrum-actionbutton-border-color: transparent;
47+
--spectrum-actionbutton-background-color: purple;
4848
}
4949
```
5050

‎tokens/custom/large-vars.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
--spectrum-slider-tick-mark-height: 13px;
106106
--spectrum-slider-ramp-track-height: 20px;
107107

108-
--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
108+
--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
109109

110110
--spectrum-treeview-item-indentation-medium: 20px;
111111
--spectrum-treeview-item-indentation-small: 15px;

0 commit comments

Comments
 (0)