Skip to content

Commit dbd613f

Browse files
castastrophecastastrophe
committed
fix: updates after feedback from design
1 parent 888d403 commit dbd613f

File tree

24 files changed

+594
-517
lines changed

24 files changed

+594
-517
lines changed

‎.github/workflows/development.yml‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,22 +105,21 @@ jobs:
105105
with:
106106
files_yaml: |
107107
styles:
108-
- components/*/index.css
108+
- 'components/*/index.css'
109109
eslint:
110-
- components/*/stories/*.js
110+
- 'components/*/stories/*.js'
111111
mdlint:
112112
- '*.md'
113-
- .storybook/*.md
114-
- .storybook/*/*.md
115-
- .storybook/*/*.mdx
116-
- components/*/*.md
117-
- components/*/stories/*.mdx
118-
- plugins/*/*.md
119-
- tokens/*.md
120-
- tools/*/*.md
121-
- ui-icons/*.md
113+
- '.storybook/*.md'
114+
- '.storybook/*/*.md'
115+
- 'components/*/*.md'
116+
- 'plugins/*/*.md'
117+
- 'tokens/*.md'
118+
- 'tools/*/*.md'
119+
- 'ui-icons/*.md'
120+
- '!yarn.lock'
122121
plugins:
123-
- plugins/**/*
122+
- 'plugins/**/*'
124123
125124
# -------------------------------------------------------------
126125
# Lint pre-compiled assets for consistency

‎.github/workflows/lint.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ jobs:
120120

121121
- name: Run markdownlint on documentation
122122
uses: reviewdog/[email protected]
123+
if: ${{ inputs.mdlint_added_files != '' || inputs.mdlint_modified_files != '' }}
123124
with:
124125
reporter: github-pr-review
125126
filter_mode: diff_context

‎.storybook/assets/base.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
2-
31
/*!
42
* Copyright 2024 Adobe. All rights reserved.
53
*
@@ -31,7 +29,7 @@ body {
3129
.spectrum {
3230
color: var(--spectrum-neutral-content-color-default);
3331
background-color: var(--spectrum-background-base-color);
34-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
32+
-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
3533
}
3634

3735
.spectrum .spectrum-examples-static-black {
@@ -61,7 +59,7 @@ svg:has(symbol):not(:has(use)) {
6159
line-height: normal;
6260
letter-spacing: normal;
6361
text-transform: none;
64-
border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
62+
border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
6563
}
6664

6765
/* Force the modal wrapper to be contained by the frame not the viewport */
@@ -76,5 +74,3 @@ svg:has(symbol):not(:has(use)) {
7674
story view), due to Storybook's inline style that sets overflow: auto */
7775
overflow: visible !important;
7876
}
79-
80-
/* stylelint-enable selector-class-pattern */

‎.storybook/foundations/drop-shadow/index.css‎

Lines changed: 27 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,106 +10,77 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
/* stylelint-disable spectrum-tools/no-unknown-custom-properties */
14-
1513
.spectrum-Foundations-Example-DropShadow-swatch {
16-
block-size: 150px;
17-
inline-size: 150px;
18-
background-color: var(--spectrum-gray-25);
19-
border-radius: var(--spectrum-corner-radius-large-default);
20-
border: transparent;
14+
block-size: 150px;
15+
inline-size: 150px;
16+
background-color: var(--spectrum-gray-25);
17+
border-radius: var(--spectrum-corner-radius-large-default);
18+
border: transparent;
2119
}
2220

2321
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch {
24-
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
22+
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
2523
}
2624

2725
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow {
28-
box-shadow:
29-
var(--spectrum-drop-shadow-emphasized-default-x)
30-
var(--spectrum-drop-shadow-emphasized-default-y)
31-
var(--spectrum-drop-shadow-emphasized-default-blur)
32-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
26+
box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
3327
}
3428

3529
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
36-
filter: drop-shadow(
37-
var(--spectrum-drop-shadow-emphasized-default-x)
38-
var(--spectrum-drop-shadow-emphasized-default-y)
39-
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
40-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
41-
);
30+
filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)));
4231
}
4332

4433
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
4534
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
4635
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
4736
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
48-
/* adjustment because color tokens do not work properly on foundations pages */
49-
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
37+
/* adjustment because color tokens do not work properly on foundations pages */
38+
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
5039
}
5140

5241
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
53-
box-shadow:
54-
var(--spectrum-drop-shadow-emphasized-hover-x)
55-
var(--spectrum-drop-shadow-emphasized-hover-y)
56-
var(--spectrum-drop-shadow-emphasized-hover-blur)
57-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
42+
box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
5843
}
5944

6045
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
61-
filter: drop-shadow(
62-
var(--spectrum-drop-shadow-emphasized-hover-x)
63-
var(--spectrum-drop-shadow-emphasized-hover-y)
64-
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
65-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
66-
);
46+
filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)));
6747
}
6848

6949
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
7050
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
7151
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
7252
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
73-
/* adjustment because color tokens do not work properly on foundations pages */
74-
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
53+
/* adjustment because color tokens do not work properly on foundations pages */
54+
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
7555
}
7656

7757
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
78-
box-shadow:
79-
var(--spectrum-drop-shadow-elevated-x)
80-
var(--spectrum-drop-shadow-elevated-y)
81-
var(--spectrum-drop-shadow-elevated-blur)
82-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
58+
box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
8359
}
8460

8561
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
86-
filter: drop-shadow(
87-
var(--spectrum-drop-shadow-elevated-x)
88-
var(--spectrum-drop-shadow-elevated-y)
89-
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
90-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
91-
);
62+
filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)));
9263
}
9364

9465
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
9566
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
9667
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
9768
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
98-
/* adjustment because color tokens do not work properly on foundations pages */
99-
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
69+
/* adjustment because color tokens do not work properly on foundations pages */
70+
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
10071
}
10172

10273
.spectrum-Foundations-Example-swatch-container {
103-
background-color: var(--spectrum-gray-25);
104-
block-size: 200px;
105-
inline-size: 300px;
106-
display: flex;
107-
align-items: center;
108-
justify-content: center;
74+
background-color: var(--spectrum-gray-25);
75+
block-size: 200px;
76+
inline-size: 300px;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
10980
}
11081

11182
.spectrum-Foundations-Example-variant-container {
112-
background-color: var(--spectrum-gray-25);
113-
display: flex;
114-
flex-direction: row;
83+
background-color: var(--spectrum-gray-25);
84+
display: flex;
85+
flex-direction: row;
11586
}

‎components/actionbutton/dist/metadata.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
".spectrum-ActionButton-label",
1515
".spectrum-ActionButton-label:empty",
1616
".spectrum-ActionButton.is-disabled",
17-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:has([aria-pressed=\"true\"])",
17+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"])",
1818
".spectrum-ActionButton.spectrum-ActionButton--quiet",
19-
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:has([aria-pressed=\"true\"]))",
20-
".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
19+
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:is([aria-pressed=\"true\"]))",
20+
".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"])",
2121
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2222
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23-
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"])",
2424
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2525
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26-
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"])",
2727
".spectrum-ActionButton::-moz-focus-inner",
2828
".spectrum-ActionButton:active",
2929
".spectrum-ActionButton:after",
@@ -33,8 +33,8 @@
3333
".spectrum-ActionButton:focus-visible",
3434
".spectrum-ActionButton:focus-visible:after",
3535
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
36-
".spectrum-ActionButton:has([aria-pressed=\"true\"])",
3736
".spectrum-ActionButton:hover",
37+
".spectrum-ActionButton:is([aria-pressed=\"true\"])",
3838
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
3939
"a.spectrum-ActionButton"
4040
],

0 commit comments

Comments
 (0)