Skip to content

Commit a8d29bd

Browse files
castastrophecastastrophe
committed
feat(commons): remove need for commons package
1 parent 2163ef2 commit a8d29bd

File tree

85 files changed

+793
-1180
lines changed

Some content is hidden

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

85 files changed

+793
-1180
lines changed

‎.storybook/blocks/PropertiesTable.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,18 @@ export const PropertiesTable = () => {
2626

2727
return (
2828
<ThemeContainer color="light" display="contents">
29-
<LinkableHeading id="modifiable-properties" size="m">
29+
<LinkableHeading id="custom-properties" size="m">
3030
<a
3131
aria-hidden="true"
32-
href="#modifiable-properties"
32+
href="#custom-properties"
3333
tabIndex="-1"
3434
target="_self"
3535
onClick={() => {
36-
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
36+
context.channel.emit(NAVIGATE_URL, "#custom-properties");
3737
}}
3838
></a>
39-
Modifiable custom properties
39+
Custom properties
4040
</LinkableHeading>
41-
<Body>
42-
These are empty CSS custom property hooks available in this component
43-
that enable one-off customizations specific to a product implementation.
44-
</Body>
4541
<Table
4642
headers={["Property"]}
4743
rows={metadata?.component.map((propertyName) => [

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ 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 {
1614
block-size: 150px;
1715
inline-size: 150px;

‎.storybook/guides/releasing.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks";
88

99
This project versions components independently, meaning each component has its own version number, updated independently of other components. We follow [semantic versioning](https://semver.org/) and as such, each release is versioned according to the following rules:
1010

11-
- **Major**: Breaking changes such as API changes, the removal of features, or changes to custom properties
11+
- **Major**: Breaking changes such as API changes or the removal of features
1212
- **Minor**: New features or enhancements
1313
- **Patch**: Bug fixes or minor improvements
1414

‎README.md‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<h1 align="center">Spectrum CSS</h1>
88
<h3 align="center">A CSS-implementation of the Spectrum design language</h3>
99

10-
<img src=".storybook/assets/images/spectrum-css_illustration_desktop.png">
10+
<img src=".storybook/assets/images/spectrum-css_illustration_desktop.png" alt="Spectrum CSS illustration" />
1111

1212
## Features
1313

@@ -16,7 +16,7 @@
1616
- 🧪 **Rigorously tested**: These individually-versioned components have been vetted to be accessible and inclusive of global audiences.
1717
- 📱 **Multi-platform support**: We support [evergreen browsers](https://github.com/adobe/spectrum-css?tab=readme-ov-file#browser-support) for scalability and flexibility.
1818

19-
&nbsp;&nbsp;&nbsp;&nbsp; [<img src="https://img.shields.io/badge/Get%20started-F0F0F0?style=for-the-badge&logo=adobe&logoColor=%23FF0000"/>](https://opensource.adobe.com/spectrum-css/get-started.html) &nbsp; [<img src="https://img.shields.io/badge/Storybook-F0F0F0?style=for-the-badge&logo=storybook&logoColor=%23FF4785"/>](https://opensource.adobe.com/spectrum-css/)
19+
&nbsp;&nbsp;&nbsp;&nbsp; [<img src="https://img.shields.io/badge/Get%20started-F0F0F0?style=for-the-badge&logo=adobe&logoColor=%23FF0000" alt="Get started" />](https://opensource.adobe.com/spectrum-css/get-started.html) &nbsp; [<img src="https://img.shields.io/badge/Storybook-F0F0F0?style=for-the-badge&logo=storybook&logoColor=%23FF4785" alt="Storybook" />](https://opensource.adobe.com/spectrum-css/)
2020

2121
## Using Spectrum CSS
2222

@@ -44,13 +44,13 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
4444

4545
Installed components will be available in the `node_modules/@spectrum-css/` folder of your project.
4646

47-
All components in this library have a peer dependency on [`@spectrum-css/tokens`](tokens), which is a local package that serves up the [Spectrum design tokens](https://github.com/adobe/spectrum-tokens) as CSS custom properties (via [Style dictionary](https://amzn.github.io/style-dictionary/#/)). These custom properties are leveraged in all components to create a cohesive visual language and to allow for easy theming. If you choose not to use the provided `@spectrum-css/tokens` package, you must define your own custom properties or your components will render with a significant number of missing styles. When overriding certain styles is necessary, modifying styles is supported through the use of component-specific `--mod` prefixed properties. [More on this below](https://github.com/adobe/spectrum-css?tab=readme-ov-file#modifying-components).
47+
All components in this library have a peer dependency on [`@spectrum-css/tokens`](tokens), which is a local package that serves up the [Spectrum design tokens](https://github.com/adobe/spectrum-tokens) as CSS custom properties (via [Style dictionary](https://amzn.github.io/style-dictionary/#/)). These custom properties are leveraged in all components to create a cohesive visual language and to allow for easy theming. If you choose not to use the provided `@spectrum-css/tokens` package, you must define your own custom properties or your components will render with a significant number of missing styles.
4848

4949
### Using components in your project
5050

5151
Spectrum CSS components have build output that is designed to be used in a variety of ways:
5252

53-
- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
53+
- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, component-specific custom properties<sup>[1](#token-footnote)</sup> are mapped to variables sourced from the design tokens.
5454

5555
<sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties.
5656

@@ -104,10 +104,6 @@ Put together, we would define the context for our application in the following w
104104

105105
Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context.
106106

107-
### Modifying components
108-
109-
You can override variables and modify Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [Action Button for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#custompropertiesapi).
110-
111107
### Importing UI icons
112108

113109
Some components require certain "UI icons" to render. These icons are released within the [`@spectrum-css/ui-icons`](https://www.npmjs.com/package/@spectrum-css/ui-icons) package and are used by components like `@spectrum-css/icon` and `@spectrum-css/actionbutton`.

‎components/accordion/dist/metadata.json‎

Lines changed: 26 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,48 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Accordion",
5-
".spectrum-Accordion--compact",
6-
".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
7-
".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
8-
".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
9-
".spectrum-Accordion--quiet",
10-
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active",
11-
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover",
12-
".spectrum-Accordion--sizeL",
13-
".spectrum-Accordion--sizeS",
14-
".spectrum-Accordion--sizeXL",
15-
".spectrum-Accordion--spacious",
16-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
17-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
18-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
5+
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:is(:hover, :active)",
196
".spectrum-Accordion-item",
20-
".spectrum-Accordion-item.is-disabled",
7+
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
8+
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent:is(:hover, :active, :focus-visible)",
9+
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
10+
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:is(:hover, :active, :focus-visible)",
2111
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
2212
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
2313
".spectrum-Accordion-item:first-child",
2414
".spectrum-Accordion-itemContent",
2515
".spectrum-Accordion-itemDirectActions",
2616
".spectrum-Accordion-itemHeader",
27-
".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
17+
".spectrum-Accordion-itemHeader:active",
2818
".spectrum-Accordion-itemHeader:focus-visible",
2919
".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)",
3020
".spectrum-Accordion-itemHeader:hover",
3121
".spectrum-Accordion-itemHeading",
3222
".spectrum-Accordion-itemIndicator",
3323
".spectrum-Accordion-itemTitle",
24+
".spectrum-Accordion.is-open:dir(rtl) > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
25+
".spectrum-Accordion.spectrum-Accordion--compact",
26+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeL",
27+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeS",
28+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
3429
".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
35-
".spectrum-Accordion:dir(rtl)",
36-
".spectrum-Accordion:lang(ja)",
37-
".spectrum-Accordion:lang(ko)",
38-
".spectrum-Accordion:lang(zh)"
30+
".spectrum-Accordion.spectrum-Accordion--quiet",
31+
".spectrum-Accordion.spectrum-Accordion--sizeL",
32+
".spectrum-Accordion.spectrum-Accordion--sizeS",
33+
".spectrum-Accordion.spectrum-Accordion--sizeXL",
34+
".spectrum-Accordion.spectrum-Accordion--spacious",
35+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
36+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
37+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
38+
".spectrum-Accordion:dir(rtl) .spectrum-Accordion-itemIndicator",
39+
".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemContent",
40+
".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemHeader",
41+
".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemContent",
42+
".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemHeader",
43+
".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemContent",
44+
".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemHeader"
3945
],
4046
"component": [
41-
"--spectrum-accordion-animation-duration",
42-
"--spectrum-accordion-background-color-default",
43-
"--spectrum-accordion-background-color-down",
44-
"--spectrum-accordion-background-color-hover",
45-
"--spectrum-accordion-background-color-key-focus",
4647
"--spectrum-accordion-bottom-to-text-compact-extra-large",
4748
"--spectrum-accordion-bottom-to-text-compact-large",
4849
"--spectrum-accordion-bottom-to-text-compact-medium",
@@ -69,7 +70,6 @@
6970
"--spectrum-accordion-disclosure-indicator-to-text-medium",
7071
"--spectrum-accordion-disclosure-indicator-to-text-small",
7172
"--spectrum-accordion-disclosure-indicator-to-text-space",
72-
"--spectrum-accordion-divider-color",
7373
"--spectrum-accordion-divider-thickness",
7474
"--spectrum-accordion-edge-to-content-area",
7575
"--spectrum-accordion-edge-to-content-area-extra-large",
@@ -78,37 +78,12 @@
7878
"--spectrum-accordion-edge-to-content-area-small",
7979
"--spectrum-accordion-edge-to-disclosure-indicator-space",
8080
"--spectrum-accordion-edge-to-text",
81-
"--spectrum-accordion-edge-to-text-space",
82-
"--spectrum-accordion-item-content-area-bottom-to-content",
83-
"--spectrum-accordion-item-content-area-top-to-content",
84-
"--spectrum-accordion-item-content-color",
85-
"--spectrum-accordion-item-content-font",
8681
"--spectrum-accordion-item-content-font-size",
87-
"--spectrum-accordion-item-content-font-style",
88-
"--spectrum-accordion-item-content-font-weight",
89-
"--spectrum-accordion-item-content-line-height",
9082
"--spectrum-accordion-item-direct-actions-height",
91-
"--spectrum-accordion-item-direct-actions-spacing",
92-
"--spectrum-accordion-item-direct-actions-vertical-spacing",
93-
"--spectrum-accordion-item-focus-indicator-color",
94-
"--spectrum-accordion-item-focus-indicator-gap",
95-
"--spectrum-accordion-item-focus-indicator-thickness",
9683
"--spectrum-accordion-item-header-bottom-to-text-space",
97-
"--spectrum-accordion-item-header-color-default",
98-
"--spectrum-accordion-item-header-color-down",
99-
"--spectrum-accordion-item-header-color-hover",
100-
"--spectrum-accordion-item-header-color-key-focus",
101-
"--spectrum-accordion-item-header-cursor",
102-
"--spectrum-accordion-item-header-font",
10384
"--spectrum-accordion-item-header-font-size",
104-
"--spectrum-accordion-item-header-font-style",
105-
"--spectrum-accordion-item-header-font-weight",
106-
"--spectrum-accordion-item-header-line-height",
107-
"--spectrum-accordion-item-header-to-direct-actions-space",
10885
"--spectrum-accordion-item-header-top-to-text-space",
109-
"--spectrum-accordion-item-min-block-size",
11086
"--spectrum-accordion-item-minimum-height",
111-
"--spectrum-accordion-item-minimum-width",
11287
"--spectrum-accordion-item-width",
11388
"--spectrum-accordion-minimum-width",
11489
"--spectrum-accordion-top-to-disclosure-indicator",
@@ -181,7 +156,6 @@
181156
"--spectrum-font-size-400",
182157
"--spectrum-gray-200",
183158
"--spectrum-line-height-100",
184-
"--spectrum-logical-rotation",
185159
"--spectrum-neutral-content-color-default",
186160
"--spectrum-neutral-content-color-down",
187161
"--spectrum-neutral-content-color-hover",

0 commit comments

Comments
 (0)