Skip to content

Commit c587d60

Browse files
blunteshwarcastastrophe
blunteshwar
authored and
castastrophe
committed
chore(picker): updated border-color for open not hover state of picker (#3607)
Updated border-color for is-open state from `--spectrum-gray-900` to `--spectrum-gray-800`.
1 parent f56399f commit c587d60

File tree

402 files changed

+10377
-13300
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

402 files changed

+10377
-13300
lines changed

‎.changeset/pre.json

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"mode": "pre",
3+
"tag": "next",
4+
"initialVersions": {
5+
"@spectrum-tools/gh-action-file-diff": "2.2.0",
6+
"@spectrum-css/preview": "12.0.3",
7+
"@spectrum-css/accordion": "7.1.0",
8+
"@spectrum-css/actionbar": "10.1.1",
9+
"@spectrum-css/actionbutton": "7.1.1",
10+
"@spectrum-css/actiongroup": "6.1.0",
11+
"@spectrum-css/actionmenu": "7.1.1",
12+
"@spectrum-css/alertbanner": "3.1.0",
13+
"@spectrum-css/alertdialog": "4.1.0",
14+
"@spectrum-css/asset": "7.1.0",
15+
"@spectrum-css/assetcard": "5.1.0",
16+
"@spectrum-css/assetlist": "8.1.0",
17+
"@spectrum-css/avatar": "9.1.0",
18+
"@spectrum-css/badge": "6.1.0",
19+
"@spectrum-css/breadcrumb": "11.1.0",
20+
"@spectrum-css/button": "14.1.1",
21+
"@spectrum-css/buttongroup": "9.1.0",
22+
"@spectrum-css/calendar": "7.1.0",
23+
"@spectrum-css/card": "11.1.0",
24+
"@spectrum-css/checkbox": "10.1.0",
25+
"@spectrum-css/clearbutton": "7.1.0",
26+
"@spectrum-css/closebutton": "6.1.0",
27+
"@spectrum-css/coachindicator": "4.1.0",
28+
"@spectrum-css/coachmark": "9.1.1",
29+
"@spectrum-css/colorarea": "7.1.0",
30+
"@spectrum-css/colorhandle": "10.1.0",
31+
"@spectrum-css/colorloupe": "7.1.0",
32+
"@spectrum-css/colorslider": "8.1.0",
33+
"@spectrum-css/colorwheel": "6.1.0",
34+
"@spectrum-css/combobox": "4.1.1",
35+
"@spectrum-css/commons": "11.0.0",
36+
"@spectrum-css/contextualhelp": "5.1.2",
37+
"@spectrum-css/datepicker": "4.1.1",
38+
"@spectrum-css/dial": "5.1.0",
39+
"@spectrum-css/dialog": "12.1.0",
40+
"@spectrum-css/divider": "5.1.0",
41+
"@spectrum-css/dropindicator": "7.1.0",
42+
"@spectrum-css/dropzone": "8.1.0",
43+
"@spectrum-css/fieldgroup": "7.1.0",
44+
"@spectrum-css/fieldlabel": "10.1.0",
45+
"@spectrum-css/floatingactionbutton": "4.1.0",
46+
"@spectrum-css/form": "1.1.0",
47+
"@spectrum-css/helptext": "7.1.0",
48+
"@spectrum-css/icon": "9.1.0",
49+
"@spectrum-css/illustratedmessage": "9.1.0",
50+
"@spectrum-css/infieldbutton": "6.1.1",
51+
"@spectrum-css/inlinealert": "10.1.0",
52+
"@spectrum-css/link": "7.1.0",
53+
"@spectrum-css/logicbutton": "6.1.0",
54+
"@spectrum-css/menu": "9.1.0",
55+
"@spectrum-css/meter": "1.1.0",
56+
"@spectrum-css/miller": "8.1.0",
57+
"@spectrum-css/modal": "7.1.0",
58+
"@spectrum-css/opacitycheckerboard": "4.1.0",
59+
"@spectrum-css/page": "9.1.0",
60+
"@spectrum-css/pagination": "10.1.0",
61+
"@spectrum-css/picker": "9.1.2",
62+
"@spectrum-css/pickerbutton": "6.1.1",
63+
"@spectrum-css/popover": "8.2.0",
64+
"@spectrum-css/progressbar": "6.1.0",
65+
"@spectrum-css/progresscircle": "5.1.0",
66+
"@spectrum-css/radio": "10.1.0",
67+
"@spectrum-css/rating": "6.1.0",
68+
"@spectrum-css/search": "8.1.0",
69+
"@spectrum-css/sidenav": "7.1.0",
70+
"@spectrum-css/slider": "6.1.0",
71+
"@spectrum-css/splitview": "7.1.0",
72+
"@spectrum-css/statuslight": "9.1.0",
73+
"@spectrum-css/steplist": "7.1.0",
74+
"@spectrum-css/stepper": "7.1.1",
75+
"@spectrum-css/swatch": "8.1.1",
76+
"@spectrum-css/swatchgroup": "5.1.0",
77+
"@spectrum-css/switch": "6.1.0",
78+
"@spectrum-css/table": "8.1.0",
79+
"@spectrum-css/tabs": "6.1.1",
80+
"@spectrum-css/tag": "10.1.0",
81+
"@spectrum-css/taggroup": "7.1.0",
82+
"@spectrum-css/textfield": "8.1.0",
83+
"@spectrum-css/thumbnail": "8.1.0",
84+
"@spectrum-css/toast": "11.1.0",
85+
"@spectrum-css/tooltip": "7.1.0",
86+
"@spectrum-css/tray": "5.1.0",
87+
"@spectrum-css/treeview": "12.1.0",
88+
"@spectrum-css/typography": "8.1.0",
89+
"@spectrum-css/underlay": "6.1.0",
90+
"@spectrum-css/well": "7.1.0",
91+
"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
92+
"@spectrum-tools/stylelint-no-missing-var": "2.0.1",
93+
"@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2",
94+
"@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.4",
95+
"@spectrum-css/tokens": "16.0.1",
96+
"@spectrum-css/bundle": "1.0.0",
97+
"@spectrum-css/generator": "4.1.0",
98+
"@spectrum-css/ui-icons": "1.1.2"
99+
},
100+
"changesets": []
101+
}

‎.github/QUICK-START.md

+35-18
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
44

55
## Install using Node/yarn
6+
67
Install the components you want along with their dependencies. Here's an example:
78

89
```shell
@@ -12,45 +13,61 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
1213
Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
1314

1415
```html
15-
<html class="spectrum spectrum--medium spectrum--light">
16+
<html class="spectrum spectrum--medium spectrum--light"></html>
1617
```
1718

18-
Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
19+
Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
1920

2021
```html
2122
<head>
22-
<!-- Include global tokens depedency first -->
23-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
23+
<!-- Include global tokens depedency first -->
24+
<link
25+
rel="stylesheet"
26+
href="node_modules/@spectrum-css/tokens/dist/index.css"
27+
/>
2428

25-
<!-- Include index.css for the components you're using -->
26-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
29+
<!-- Include index.css for the components you're using -->
30+
<link
31+
rel="stylesheet"
32+
href="node_modules/@spectrum-css/button/dist/index.css"
33+
/>
2734
</head>
2835
```
2936

3037
Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
3138

3239
```html
33-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
34-
<span class="spectrum-Button-label">Button</span>
40+
<button
41+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
42+
>
43+
<span class="spectrum-Button-label">Button</span>
3544
</button>
3645
```
3746

3847
To put it all together, your final html file will look like this:
3948

4049
```html
4150
<html class="spectrum spectrum--light spectrum--medium">
42-
<head>
43-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
44-
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
45-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
46-
</head>
47-
<body>
48-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
49-
<span class="spectrum-Button-label">Button</span>
50-
</button>
51-
</body>
51+
<head>
52+
<link
53+
rel="stylesheet"
54+
href="node_modules/@spectrum-css/tokens/dist/index.css"
55+
/>
56+
<link
57+
rel="stylesheet"
58+
href="node_modules/@spectrum-css/button/dist/index.css"
59+
/>
60+
</head>
61+
<body>
62+
<button
63+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64+
>
65+
<span class="spectrum-Button-label">Button</span>
66+
</button>
67+
</body>
5268
</html>
5369
```
5470

5571
## Include files from a CDN
72+
5673
Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.

‎.github/actions/file-diff/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"package.json"
2323
],
2424
"dependencies": {
25-
"@actions/artifact": "^2.2.1",
25+
"@actions/artifact": "^2.3.1",
2626
"@actions/core": "^1.11.1",
2727
"@actions/github": "^6.0.0",
2828
"@actions/glob": "^0.5.0",

‎.github/workflows/development.yml

+2-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ on:
1313
pull_request:
1414
branches:
1515
- main
16-
- spectrum-two
16+
- spectrum-2
1717
# Allow us to run tests for PRs updating github actions
1818
- chore-*ci*
1919
- chore-*github-actions*
@@ -100,8 +100,6 @@ jobs:
100100
files_yaml: |
101101
styles:
102102
- components/*/index.css
103-
- components/*/themes/spectrum.css
104-
- components/*/themes/express.css
105103
eslint:
106104
- components/*/stories/*.js
107105
mdlint:
@@ -193,7 +191,7 @@ jobs:
193191
if: contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true)
194192
uses: ./.github/workflows/vrt.yml
195193
with:
196-
skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
194+
skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
197195
secrets: inherit
198196

199197
# -------------------------------------------------------------

‎.github/workflows/lint.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ jobs:
102102
filter_mode: diff_context
103103
level: error
104104
reporter: github-pr-review
105-
# stylelint_input: "components/*/index.css components/*/themes/*.css"
105+
# stylelint_input: "components/*/index.css"
106106
stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
107107
stylelint_config: "${{ github.workspace }}/stylelint.config.js"
108108

‎.github/workflows/production.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ name: Build and verify production
99

1010
on:
1111
push:
12-
branches: [main, spectrum-two]
12+
branches: [main, spectrum-2]
1313

1414
permissions:
1515
contents: read

‎.github/workflows/release.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ on:
44
push:
55
branches:
66
- main
7-
- spectrum-two
7+
- spectrum-2
88

99
concurrency: ${{ github.workflow }}-${{ github.ref }}
1010

‎.github/workflows/vrt.yml

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ on:
44
push:
55
branches:
66
- main
7+
- spectrum-2
78
- "!changeset-release/**"
89
- "!dependabot/**"
910
workflow_dispatch:

‎.storybook/assets/base.css

+6-3
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,12 @@ body {
3434
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
3535
}
3636

37-
.spectrum.spectrum--legacy {
38-
color: var(--spectrum-neutral-content-color-default);
39-
background-color: var(--spectrum-background-layer-1-color);
37+
.spectrum .spectrum-examples-static-black {
38+
background: var(--spectrum-examples-gradient-static-black);
39+
}
40+
41+
.spectrum .spectrum-examples-static-white {
42+
background: var(--spectrum-examples-gradient-static-white);
4043
}
4144

4245
/* Hide the SVG elements that only include references */

‎.storybook/assets/index.css

+7
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,11 @@ select:focus,
119119
border-color: rgb(2, 101, 220) !important;
120120
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
121121
}
122+
123+
nav.sidebar-container,
124+
div.sb-bar {
125+
color: var(--spectrum-neutral-content-color-default) !important;
126+
background-color: var(--spectrum-background-layer-2-color) !important;
127+
}
128+
122129
/* stylelint-enable selector-class-pattern */

‎.storybook/blocks/utilities.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json";
21
import spectrum from "@spectrum-css/tokens/dist/json/tokens.json";
32

43
import { useTheme } from "@storybook/theming";
@@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) {
7069

7170
// Create a platform context based on the scale (platform used in the token data)
7271
const platform = scale === "medium" ? "desktop" : "mobile";
73-
const tokens = context === "spectrum" ? spectrum : legacy;
7472

75-
return { color, scale, context, platform, tokens };
73+
return { color, scale, context, platform, tokens: spectrum };
7674
}
7775

7876
/**

0 commit comments

Comments
 (0)