Skip to content

Commit 8e6eb82

Browse files
castastrophecastastrophe
committed
build: remove theme processing, site package; add reporter
1 parent 907a193 commit 8e6eb82

File tree

115 files changed

+358
-746
lines changed

Some content is hidden

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

115 files changed

+358
-746
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: "${{ github.workspace }}/stylelint.config.js"
9696
packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical'

‎.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 & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import "@spectrum-css/tokens";
1+
22
import { addons } from "@storybook/manager-api";
33
import { create } from "@storybook/theming";
44

5-
import "./assets/index.css";
65

76
import logo from "./assets/logo.svg";
87
import pkg from "./package.json";
98

9+
import "./assets/index.css";
10+
1011
const root = document.body ?? document.documentElement;
1112
if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
1213

@@ -65,8 +66,5 @@ addons.setConfig({
6566
}),
6667
sidebar: {
6768
showRoots: false,
68-
filters: {
69-
patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)),
70-
},
7169
},
7270
});

‎.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
};

‎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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
2828
--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
2929

30+
/* colors - applied to popover */
31+
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
32+
--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
33+
3034
/* spacing of action bar bottom and horizontal outer edge */
3135
--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
3236

‎components/actionbutton/dist/metadata.json

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@
1717
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
1818
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
1919
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
20+
<<<<<<< HEAD
2021
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
22+
=======
23+
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
24+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
2125
".spectrum-ActionButton.spectrum-ActionButton--quiet",
2226
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2327
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
@@ -103,15 +107,26 @@
103107
"--spectrum-actionbutton-background-color-selected-down",
104108
"--spectrum-actionbutton-background-color-selected-focus",
105109
"--spectrum-actionbutton-background-color-selected-hover",
110+
<<<<<<< HEAD
106111
"--spectrum-actionbutton-border-color",
112+
=======
113+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
107114
"--spectrum-actionbutton-border-color-default",
108115
"--spectrum-actionbutton-border-color-disabled",
109116
"--spectrum-actionbutton-border-color-down",
110117
"--spectrum-actionbutton-border-color-focus",
111118
"--spectrum-actionbutton-border-color-hover",
112119
"--spectrum-actionbutton-border-radius",
113120
"--spectrum-actionbutton-border-width",
121+
<<<<<<< HEAD
114122
"--spectrum-actionbutton-content-color",
123+
=======
124+
"--spectrum-actionbutton-content-color-default",
125+
"--spectrum-actionbutton-content-color-disabled",
126+
"--spectrum-actionbutton-content-color-down",
127+
"--spectrum-actionbutton-content-color-focus",
128+
"--spectrum-actionbutton-content-color-hover",
129+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
115130
"--spectrum-actionbutton-content-color-selected",
116131
"--spectrum-actionbutton-edge-to-hold-icon",
117132
"--spectrum-actionbutton-edge-to-text",
@@ -161,13 +176,22 @@
161176
"--spectrum-component-height-300",
162177
"--spectrum-component-height-50",
163178
"--spectrum-component-height-75",
179+
<<<<<<< HEAD
164180
"--spectrum-corner-radius-100",
165181
"--spectrum-disabled-border-color",
166182
"--spectrum-disabled-content-color",
167183
"--spectrum-disabled-static-black-border-color",
168184
"--spectrum-disabled-static-black-content-color",
169185
"--spectrum-disabled-static-white-border-color",
170186
"--spectrum-disabled-static-white-content-color",
187+
=======
188+
"--spectrum-corner-radius-medium-size-extra-large",
189+
"--spectrum-corner-radius-medium-size-extra-small",
190+
"--spectrum-corner-radius-medium-size-large",
191+
"--spectrum-corner-radius-medium-size-medium",
192+
"--spectrum-corner-radius-medium-size-small",
193+
"--spectrum-disabled-border-color",
194+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
171195
"--spectrum-focus-indicator-color",
172196
"--spectrum-focus-indicator-gap",
173197
"--spectrum-focus-indicator-thickness",
@@ -178,6 +202,10 @@
178202
"--spectrum-font-size-75",
179203
"--spectrum-gray-100",
180204
"--spectrum-gray-200",
205+
<<<<<<< HEAD
206+
=======
207+
"--spectrum-gray-25",
208+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
181209
"--spectrum-gray-400",
182210
"--spectrum-gray-50",
183211
"--spectrum-gray-500",
@@ -206,23 +234,28 @@
206234
"--spectrum-transparent-black-500",
207235
"--spectrum-transparent-black-600",
208236
"--spectrum-transparent-black-700",
237+
<<<<<<< HEAD
209238
"--spectrum-transparent-black-800",
210239
"--spectrum-transparent-black-900",
240+
=======
241+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
211242
"--spectrum-transparent-white-200",
212243
"--spectrum-transparent-white-400",
213244
"--spectrum-transparent-white-500",
214245
"--spectrum-transparent-white-600",
215246
"--spectrum-transparent-white-700",
247+
<<<<<<< HEAD
216248
"--spectrum-transparent-white-800",
217249
"--spectrum-transparent-white-900",
250+
=======
251+
>>>>>>> babe32fd6 (build: remove theme processing, site package; add reporter)
218252
"--spectrum-white",
219253
"--spectrum-workflow-icon-size-100",
220254
"--spectrum-workflow-icon-size-200",
221255
"--spectrum-workflow-icon-size-300",
222256
"--spectrum-workflow-icon-size-50",
223257
"--spectrum-workflow-icon-size-75"
224258
],
225-
"system-theme": [],
226259
"passthroughs": [
227260
"--mod-button-animation-duration",
228261
"--mod-button-font-family",

0 commit comments

Comments
 (0)