Skip to content

Commit 0a20351

Browse files
torleifhalsethtorleifhalseth
authored
feat(eds-tokens,eds-core-react)!: move typography css foundation and remove core style (#4173)
* feat(eds-tokens): define foundation css in eds-tokens * feat(eds-tokens): split so that variables and foundation are separate files * feat(eds-tokens, eds-core-react): add spacing utilities and demo stories for consistent spacing application
1 parent f41165d commit 0a20351

21 files changed

Lines changed: 5503 additions & 28 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ docz-fresh
2121
.idea
2222
.size-snapshot.json
2323
storybook-build
24+
review.txt

‎packages/eds-core-react/.storybook/preview.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
@import '@equinor/eds-tokens/css/variables';
2-
@import '../src/components/Typography/typography.css';
2+
@import '@equinor/eds-tokens/css/foundation';

‎packages/eds-core-react/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,21 @@ npm install typescript --save-dev
2323
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
2424
```
2525

26+
### Required Stylesheets
27+
28+
EDS Core React components require css variables and foundation styles for typography and spacing. Import both stylesheets from `@equinor/eds-tokens`:
29+
30+
```css
31+
@import '@equinor/eds-tokens/css/variables';
32+
@import '@equinor/eds-tokens/css/foundation';
33+
```
34+
35+
**Why both?**
36+
- **Variables CSS** (`/css/variables`) provides all design tokens (colors, spacing, typography variables)
37+
- **Foundation CSS** (`/css/foundation`) provides typography and spacing utility classes used in our components.
38+
39+
For more information about the typography system, see the [Typography component documentation](./src/components/Typography/README.md).
40+
2641
## Usage
2742

2843
```jsx

‎packages/eds-core-react/package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@
3030
"types": "./dist/types/index.d.ts",
3131
"import": "./dist/esm/index.js",
3232
"require": "./dist/eds-core-react.cjs"
33-
},
34-
"./style": "./dist/style.css",
35-
"./style.css": "./dist/style.css"
33+
}
3634
},
3735
"scripts": {
3836
"build": "rollup -c && tsc -p tsconfig.build.json",

‎packages/eds-core-react/rollup.config.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable import/no-default-export */
22
import resolve from '@rollup/plugin-node-resolve'
33
import postcss from 'rollup-plugin-postcss'
4-
import postcssImport from 'postcss-import'
54
import commonjs from '@rollup/plugin-commonjs'
65
import { preserveDirective } from 'rollup-preserve-directives'
76
import { babel } from '@rollup/plugin-babel'
@@ -56,18 +55,4 @@ export default [
5655
{ file: './dist/eds-core-react.cjs', format: 'cjs', interop: 'auto' },
5756
],
5857
},
59-
{
60-
input: './src/style.css',
61-
plugins: [
62-
postcss({
63-
extensions: ['.css'],
64-
extract: 'style.css',
65-
minimize: !isDevelopment,
66-
plugins: [postcssImport()],
67-
}),
68-
],
69-
output: {
70-
dir: 'dist',
71-
},
72-
},
7358
]

‎packages/eds-core-react/src/components/Spacing/Spacing.stories.css‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
/* Demo-specific styles for Spacing stories */
2+
3+
/* Container styles */
4+
.spacing-demo-container {
5+
display: flex;
6+
flex-direction: column;
7+
gap: 2rem;
8+
}
9+
10+
.spacing-demo-row {
11+
display: flex;
12+
flex-direction: row;
13+
flex-wrap: wrap;
14+
gap: 1.5rem;
15+
}
16+
17+
.spacing-demo-item {
18+
display: flex;
19+
flex-direction: column;
20+
gap: 0.5rem;
21+
min-width: 120px;
22+
}
23+
24+
.spacing-demo-density-section {
25+
display: flex;
26+
flex-direction: column;
27+
gap: 2rem;
28+
}
29+
30+
.spacing-demo-density-container {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 1rem;
34+
}
35+
36+
.spacing-demo-flex {
37+
display: flex;
38+
flex-direction: row;
39+
}
40+
41+
/* Typography styles */
42+
.spacing-demo-heading {
43+
margin: 0 0 1rem 0;
44+
font-size: 1.5rem;
45+
font-weight: 600;
46+
}
47+
48+
.spacing-demo-subheading {
49+
margin: 0 0 0.75rem 0;
50+
font-size: 1.125rem;
51+
font-weight: 600;
52+
}
53+
54+
.spacing-demo-label {
55+
margin: 0 0 0.5rem 0;
56+
font-size: 0.875rem;
57+
color: var(--eds-color-text-neutral-subtle);
58+
}
59+
60+
.spacing-demo-text {
61+
margin: 0 0 1rem 0;
62+
font-size: 0.875rem;
63+
color: var(--eds-color-text-neutral-subtle);
64+
}
65+
66+
/* Box demo styles */
67+
.spacing-demo-box-container {
68+
display: flex;
69+
flex-direction: row;
70+
align-items: center;
71+
}
72+
73+
.spacing-demo-box-container-column {
74+
display: flex;
75+
flex-direction: column;
76+
}
77+
78+
.spacing-demo-box {
79+
width: 40px;
80+
height: 40px;
81+
background-color: var(--eds-color-bg-accent-fill-emphasis-default);
82+
border: 1px solid var(--eds-color-border-accent-strong);
83+
}
84+
85+
.spacing-demo-box-horizontal {
86+
width: 100%;
87+
height: 40px;
88+
background-color: var(--eds-color-bg-accent-fill-emphasis-default);
89+
border: 1px solid var(--eds-color-border-accent-strong);
90+
}
91+
92+
/* Inset demo styles */
93+
.spacing-demo-inset {
94+
display: inline-block;
95+
background-color: var(--eds-color-bg-neutral-fill-muted-default);
96+
border: 1px solid var(--eds-color-border-neutral-medium);
97+
color: var(--eds-color-text-neutral-strong);
98+
text-align: center;
99+
white-space: nowrap;
100+
}
101+
102+
/* Border radius demo styles */
103+
.spacing-demo-border-none,
104+
.spacing-demo-border-rounded,
105+
.spacing-demo-border-pill {
106+
display: inline-block;
107+
padding: 0.75rem 1.5rem;
108+
background-color: var(--eds-color-bg-neutral-fill-muted-default);
109+
border: 1px solid var(--eds-color-border-neutral-medium);
110+
color: var(--eds-color-text-neutral-strong);
111+
text-align: center;
112+
font-size: 0.875rem;
113+
}
114+
115+
/* Icon demo styles */
116+
.spacing-demo-icon {
117+
display: flex;
118+
flex-direction: row;
119+
align-items: center;
120+
}
121+
122+
.spacing-demo-icon-box {
123+
width: 1em;
124+
height: 1em;
125+
background-color: var(--eds-color-bg-accent-fill-emphasis-default);
126+
border: 1px solid var(--eds-color-border-accent-strong);
127+
flex-shrink: 0;
128+
}
129+
130+
.spacing-demo-icon-xs {
131+
font-size: 0.75rem;
132+
}
133+
134+
.spacing-demo-icon-sm {
135+
font-size: 0.875rem;
136+
}
137+
138+
.spacing-demo-icon-md {
139+
font-size: 1rem;
140+
}
141+
142+
.spacing-demo-icon-lg {
143+
font-size: 1.125rem;
144+
}
145+
146+
.spacing-demo-icon-xl {
147+
font-size: 1.25rem;
148+
}
149+
150+
.spacing-demo-icon-2xl {
151+
font-size: 1.5rem;
152+
}
153+
154+
/* Button demo styles */
155+
.spacing-demo-button-primary {
156+
background-color: var(--eds-color-bg-accent-fill-emphasis-default);
157+
color: var(--eds-color-text-accent-strong-on-emphasis);
158+
border: 1px solid var(--eds-color-border-accent-strong);
159+
cursor: pointer;
160+
}
161+
162+
.spacing-demo-button-secondary {
163+
background-color: var(--eds-color-bg-neutral-surface);
164+
color: var(--eds-color-text-neutral-strong);
165+
border: 1px solid var(--eds-color-border-neutral-medium);
166+
cursor: pointer;
167+
}
168+
169+
.spacing-demo-button-primary:hover,
170+
.spacing-demo-button-secondary:hover {
171+
opacity: 0.9;
172+
}
173+
174+
/* Card demo styles */
175+
.spacing-demo-card {
176+
background-color: var(--eds-color-bg-neutral-surface);
177+
border: 1px solid var(--eds-color-border-neutral-medium);
178+
max-width: 400px;
179+
}
180+
181+
.spacing-demo-card-content {
182+
display: flex;
183+
flex-direction: column;
184+
}
185+
186+
.spacing-demo-card-title {
187+
margin: 0;
188+
font-size: 1.125rem;
189+
font-weight: 600;
190+
color: var(--eds-color-text-neutral-strong);
191+
}
192+
193+
.spacing-demo-card-text {
194+
margin: 0;
195+
font-size: 0.875rem;
196+
color: var(--eds-color-text-neutral-subtle);
197+
}
198+
199+
.spacing-demo-card-actions {
200+
display: flex;
201+
flex-direction: row;
202+
}
203+
204+
/* Form demo styles */
205+
.spacing-demo-form {
206+
display: flex;
207+
flex-direction: column;
208+
max-width: 300px;
209+
}
210+
211+
.spacing-demo-form-field {
212+
display: flex;
213+
flex-direction: column;
214+
}
215+
216+
.spacing-demo-form-label {
217+
margin: 0 0 0.25rem 0;
218+
font-size: 0.875rem;
219+
font-weight: 500;
220+
color: var(--eds-color-text-neutral-strong);
221+
}
222+
223+
.spacing-demo-form-input {
224+
background-color: var(--eds-color-bg-input);
225+
border: 1px solid var(--eds-color-border-neutral-medium);
226+
color: var(--eds-color-text-neutral-strong);
227+
font-size: 0.875rem;
228+
outline: none;
229+
}
230+
231+
.spacing-demo-form-input:focus {
232+
border-color: var(--eds-color-border-focus);
233+
}
234+
235+
.spacing-demo-form-submit {
236+
background-color: var(--eds-color-bg-accent-fill-emphasis-default);
237+
color: var(--eds-color-text-accent-strong-on-emphasis);
238+
border: 1px solid var(--eds-color-border-accent-strong);
239+
cursor: pointer;
240+
}
241+
242+
.spacing-demo-form-submit:hover {
243+
opacity: 0.9;
244+
}
245+
246+
/* Navigation demo styles */
247+
.spacing-demo-nav {
248+
background-color: var(--eds-color-bg-neutral-surface);
249+
border: 1px solid var(--eds-color-border-neutral-medium);
250+
max-width: 200px;
251+
}
252+
253+
.spacing-demo-nav-list {
254+
margin: 0;
255+
padding: 0;
256+
list-style: none;
257+
display: flex;
258+
flex-direction: column;
259+
}
260+
261+
.spacing-demo-nav-item {
262+
display: block;
263+
padding: 0.5rem;
264+
color: var(--eds-color-text-link);
265+
text-decoration: none;
266+
font-size: 0.875rem;
267+
}
268+
269+
.spacing-demo-nav-item:hover {
270+
background-color: var(--eds-color-bg-neutral-fill-muted-default);
271+
}

0 commit comments

Comments
 (0)