Skip to content

Commit 50016d1

Browse files
castastrophecastastrophe
committed
build: remove theme processing, site package; add reporter
1 parent 76c5007 commit 50016d1

File tree

128 files changed

+693
-799
lines changed

Some content is hidden

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

128 files changed

+693
-799
lines changed

‎.github/workflows/lint.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ jobs:
9090
filter_mode: diff_context
9191
level: error
9292
reporter: github-pr-review
93-
# stylelint_input: "components/*/index.css
93+
# stylelint_input: "components/*/index.css"
9494
stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
9595
stylelint_config: stylelint.config.js
9696

‎.storybook/guides/develop.mdx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,18 @@ Each component has the following files:
3535
- `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component.
3636
- `stories/template.js` - The template function that generates the component's mark-up based on the provided settings.
3737
- `stories/*.test.js` - The testing grid for visual regression testing in Chromatic.
38-
- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page.
3938

4039
Each component outputs the following assets to `dist`:
4140

42-
- `index.css`: This asset includes the base CSS.
41+
- `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales.
4342

4443
## Adding a new component
4544

4645
1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component.
4746
2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`.
4847
3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing.
49-
4. The `index.css` file is where all of your styles will be added.
50-
5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file.
48+
4. The `index.css` file is where all of your styles should be added.
49+
5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file.
5150
- In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction).
5251
- Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs.
5352

‎.storybook/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
},
2323
{
2424
directory: "./foundations",
25-
files: "*/*.mdx",
25+
files: "*/*.@(stories.js|mdx)",
2626
titlePrefix: "Foundations",
2727
},
2828
{

‎.storybook/manager.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import "@spectrum-css/tokens";
1+
22
import { addons } from "@storybook/manager-api";
33
import { create } from "@storybook/theming";
44

55
// Import the CSS bundle
66
import "@spectrum-css/bundle";
77

8-
import "./assets/index.css";
9-
108
import logo from "./assets/logo.svg";
119
import pkg from "./package.json";
1210

11+
import "./assets/index.css";
12+
1313
const root = document.body ?? document.documentElement;
1414
if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
1515

@@ -68,8 +68,5 @@ addons.setConfig({
6868
}),
6969
sidebar: {
7070
showRoots: false,
71-
filters: {
72-
patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)),
73-
},
7471
},
7572
});

‎.storybook/modes/index.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,12 @@
1212
*/
1313

1414
const modes = {
15-
Light: {
15+
"Light | LTR": {
1616
color: "light",
17+
textDirection: "ltr",
1718
},
18-
Dark: {
19+
"Dark | RTL": {
1920
color: "dark",
20-
},
21-
RTL: {
2221
textDirection: "rtl",
2322
},
2423
};

‎.storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
},
3030
"dependencies": {
3131
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
32-
"@adobe/spectrum-tokens": "13.0.0-beta.52",
32+
"@adobe/spectrum-tokens": "13.0.0-beta.55",
3333
"@spectrum-css/bundle": "workspace:^",
3434
"@spectrum-css/tokens": "workspace:^",
3535
"@spectrum-css/ui-icons": "workspace:^"

‎components/accordion/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,6 @@
198198
"--spectrum-neutral-content-color-key-focus",
199199
"--spectrum-sans-font-family-stack"
200200
],
201-
"system-theme": [],
202201
"passthroughs": [],
203202
"high-contrast": []
204203
}

‎components/actionbar/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@
8888
"--spectrum-spacing-75",
8989
"--spectrum-white"
9090
],
91-
"system-theme": [],
9291
"passthroughs": [],
9392
"high-contrast": ["--highcontrast-actionbar-popover-border-color"]
9493
}

‎components/actionbar/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
2525
--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
2626

27-
/* colors - applied to popover */
28-
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
29-
--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
27+
/* colors - applied to popover */
28+
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
29+
--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
3030

3131
/* spacing of action bar bottom and horizontal outer edge */
3232
--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);

‎components/actionbutton/dist/metadata.json

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
1919
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
2020
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
21+
".spectrum-ActionButton.spectrum-ActionButton--quiet",
22+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
24+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
25+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
2126
".spectrum-ActionButton::-moz-focus-inner",
2227
".spectrum-ActionButton:active",
2328
".spectrum-ActionButton:after",
@@ -92,6 +97,11 @@
9297
"--spectrum-actionbutton-background-color-down",
9398
"--spectrum-actionbutton-background-color-focus",
9499
"--spectrum-actionbutton-background-color-hover",
100+
"--spectrum-actionbutton-background-color-selected",
101+
"--spectrum-actionbutton-background-color-selected-disabled",
102+
"--spectrum-actionbutton-background-color-selected-down",
103+
"--spectrum-actionbutton-background-color-selected-focus",
104+
"--spectrum-actionbutton-background-color-selected-hover",
95105
"--spectrum-actionbutton-border-color-default",
96106
"--spectrum-actionbutton-border-color-disabled",
97107
"--spectrum-actionbutton-border-color-down",
@@ -104,6 +114,7 @@
104114
"--spectrum-actionbutton-content-color-down",
105115
"--spectrum-actionbutton-content-color-focus",
106116
"--spectrum-actionbutton-content-color-hover",
117+
"--spectrum-actionbutton-content-color-selected",
107118
"--spectrum-actionbutton-edge-to-hold-icon",
108119
"--spectrum-actionbutton-edge-to-text",
109120
"--spectrum-actionbutton-edge-to-visual",
@@ -150,6 +161,7 @@
150161
"--spectrum-corner-radius-medium-size-large",
151162
"--spectrum-corner-radius-medium-size-medium",
152163
"--spectrum-corner-radius-medium-size-small",
164+
"--spectrum-disabled-border-color",
153165
"--spectrum-focus-indicator-color",
154166
"--spectrum-focus-indicator-gap",
155167
"--spectrum-focus-indicator-thickness",
@@ -158,7 +170,13 @@
158170
"--spectrum-font-size-300",
159171
"--spectrum-font-size-50",
160172
"--spectrum-font-size-75",
173+
"--spectrum-gray-100",
174+
"--spectrum-gray-200",
161175
"--spectrum-gray-25",
176+
"--spectrum-gray-400",
177+
"--spectrum-gray-50",
178+
"--spectrum-gray-500",
179+
"--spectrum-gray-600",
162180
"--spectrum-line-height-100",
163181
"--spectrum-logical-rotation",
164182
"--spectrum-neutral-background-color-selected-default",
@@ -175,14 +193,24 @@
175193
"--spectrum-text-to-visual-300",
176194
"--spectrum-text-to-visual-50",
177195
"--spectrum-text-to-visual-75",
196+
"--spectrum-transparent-black-100",
197+
"--spectrum-transparent-black-200",
198+
"--spectrum-transparent-black-400",
199+
"--spectrum-transparent-black-500",
200+
"--spectrum-transparent-black-600",
201+
"--spectrum-transparent-black-700",
202+
"--spectrum-transparent-white-200",
203+
"--spectrum-transparent-white-400",
204+
"--spectrum-transparent-white-500",
205+
"--spectrum-transparent-white-600",
206+
"--spectrum-transparent-white-700",
178207
"--spectrum-white",
179208
"--spectrum-workflow-icon-size-100",
180209
"--spectrum-workflow-icon-size-200",
181210
"--spectrum-workflow-icon-size-300",
182211
"--spectrum-workflow-icon-size-50",
183212
"--spectrum-workflow-icon-size-75"
184213
],
185-
"system-theme": [],
186214
"passthroughs": [
187215
"--mod-button-animation-duration",
188216
"--mod-button-font-family",

0 commit comments

Comments
 (0)