Skip to content

Commit b7c4e85

Browse files
montezumedferber90
montezume
authored and
dferber90
committed
feat: extract css variables to js and css files (#181)
* feat: extract css variables to js and css files * feat: move internal materials internal * chore: add do not modify block to generated variables file * chore: update readme * chore: rename materials exports to imports * chore: reorganize custom-properties
1 parent 869a036 commit b7c4e85

34 files changed

+363
-80
lines changed

‎.storybook/config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import IntlDecorator from './decorators/intl';
55

66
// setAddon(infoAddon);
77

8-
import '../materials/reset.mod.css';
8+
import '../materials/internals/reset.mod.css';
99
import './main.mod.css';
1010

1111
setOptions({

‎.storybook/webpack.config.js

+2-17
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,6 @@ const postcssCustomProperties = require('postcss-custom-properties');
66
const postcssCustomMediaQueries = require('postcss-custom-media');
77
const postcssPostcssColorModFunction = require('postcss-color-mod-function');
88

9-
const materialSources = [
10-
'materials/borders.mod.css',
11-
'materials/colors/base-colors.mod.css',
12-
'materials/shadows/base-shadows.mod.css',
13-
'materials/sizes.mod.css',
14-
'materials/spacings.mod.css',
15-
// tokens
16-
'materials/tokens/backgrounds.mod.css',
17-
'materials/tokens/borders.mod.css',
18-
'materials/tokens/fonts.mod.css',
19-
'materials/tokens/shadows.mod.css',
20-
'materials/tokens/sizes.mod.css',
21-
'materials/transitions.mod.css',
22-
];
23-
249
const browserslist = {
2510
development: ['chrome', 'firefox'].map(
2611
browser => `last 2 ${browser} versions`
@@ -123,7 +108,7 @@ module.exports = (storybookBaseConfig, configType) => {
123108
}),
124109
postcssCustomProperties({
125110
preserve: false,
126-
importFrom: materialSources,
111+
importFrom: 'materials/custom-properties.css',
127112
}),
128113
postcssCustomMediaQueries(),
129114
postcssPostcssColorModFunction(),
@@ -163,7 +148,7 @@ module.exports = (storybookBaseConfig, configType) => {
163148
}),
164149
postcssCustomProperties({
165150
preserve: false,
166-
importFrom: materialSources,
151+
importFrom: 'materials/custom-properties.css',
167152
}),
168153
postcssCustomMediaQueries(),
169154
postcssPostcssColorModFunction(),

‎README.md

+18-28
Original file line numberDiff line numberDiff line change
@@ -25,46 +25,36 @@ import {
2525

2626
#### Importing CSS modules
2727

28-
When you are developing your application using the UI Kit components, chances you want to use the same design tokens as our design sytem. We provide them thorugh **CSS variables**.
29-
We expose those variables from different files (e.g. `colors.mod.css`, `spacings.mod.css`) from the `@commercetools-frontend/ui-kit/materials` folder.
28+
When you are developing your application using the UI Kit components, chances you want to use the same design tokens as our design system. We provide them through both **CSS variables** and **JavaScript variables**.
29+
30+
We expose the **CSS variables** from the `@commercetools-frontend/ui-kit/materials/custom-properties.css` file. This file can be used either like
3031

3132
```css
32-
@import '@commercetools-frontend/ui-kit/materials/spacings.mod.css';
33+
@import '@commercetools-frontend/ui-kit/materials/custom-properties.css';
3334

3435
.container {
3536
padding: var(--spacing-8);
3637
}
3738
```
3839

39-
Assuming that you are using [Webpack][webpack] to bundle your application, you might need to include the location to the `materials` folder in your [Webpack loaders](https://webpack.js.org/concepts/loaders/).
40+
or can be used in along with [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) like
4041

4142
```js
42-
// webpack.config.js
43-
{
44-
module: {
45-
rules: [
46-
{
47-
test: /\.mod\.css$/,
48-
include: [
49-
path.resolve(__dirname, 'src'),
50-
// 👇 Include the materials folder to allow `postcss` to transpile those files as well
51-
path.resolve(
52-
require.resolve('@commercetools-frontend/ui-kit'),
53-
'../../materials'
54-
),
55-
56-
// or `path.resolve(__dirname, 'node_modules/@commercetools-frontend/ui-kit/materials')`
57-
],
58-
use: [
59-
// postcss loaders
60-
],
61-
},
62-
];
63-
}
64-
}
43+
postcssCustomProperties({
44+
preserve: false,
45+
importFrom: '@commercetools-frontend/ui-kit/materials/custom-properties.css',
46+
}),
47+
```
48+
49+
You can also access the JavaScript variables like this
50+
51+
```js
52+
import { customProperties } from '@commercetools-frontend/ui-kit';
53+
54+
const green = customProperties['--color-green'];
6555
```
6656

67-
> Please look into the package itself to inspect which variables are available (_documentation will be provided in the future_).
57+
> Please look at the file itself to inspect which variables are available (_documentation will be provided in the future_).
6858
6959
#### Importing SVG images
7060

‎materials/custom-properties.css

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/*
2+
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
3+
This file is created by the 'scripts/extract-materials.js' script.
4+
The real values of the variables should be updated in 'materials/internals'
5+
*/
6+
7+
:root {
8+
--color-green: #00b39e;
9+
--color-green-25: hsl(172.9608938547486, 100%, 25%);
10+
--color-green-40: hsl(172.9608938547486, 100%, 40%);
11+
--color-green-85: hsl(172.9608938547486, 100%, 85%);
12+
--color-green-95: hsl(172.9608938547486, 100%, 95%);
13+
--color-navy: #213c45;
14+
--color-navy-30: hsl(195, 35.2941176471%, 30%);
15+
--color-navy-40: hsl(195, 35.2941176471%, 40%);
16+
--color-navy-95: hsl(195, 35.2941176471%, 95%);
17+
--color-navy-98: hsl(195, 35.2941176471%, 98%);
18+
--color-gray: #ccc;
19+
--color-gray-60: hsl(0, 0%, 60%);
20+
--color-gray-90: hsl(0, 0%, 90%);
21+
--color-gray-95: hsl(0, 0%, 95%);
22+
--color-blue: #078cdf;
23+
--color-blue-85: hsl(203.05555555555554, 93.9130434783%, 85%);
24+
--color-blue-95: hsl(203.05555555555554, 93.9130434783%, 95%);
25+
--color-orange: #f16d0e;
26+
--color-orange-95: hsl(25.110132158590307, 89.0196078431%, 95%);
27+
--color-red: #e60050;
28+
--color-red-95: hsl(339.1304347826087, 100%, 95%);
29+
--color-purple: #b866ff;
30+
--color-black: #1a1a1a;
31+
--color-white: #fff;
32+
--border-radius-1: 1px;
33+
--border-radius-2: 2px;
34+
--border-radius-4: 4px;
35+
--border-radius-6: 6px;
36+
--border-radius-20: 20px;
37+
--shadow-1-first: 0 1px 3px rgba(0, 0, 0, 0.12);
38+
--shadow-1-second: 0 1px 2px rgba(0, 0, 0, 0.24);
39+
--shadow-2-first: 0 3px 6px rgba(0, 0, 0, 0.16);
40+
--shadow-2-second: 0 3px 6px rgba(0, 0, 0, 0.23);
41+
--shadow-3-first: 0 10px 20px rgba(0, 0, 0, 0.19);
42+
--shadow-3-second: 0 6px 6px rgba(0, 0, 0, 0.23);
43+
--shadow-4-first: 0 14px 28px rgba(0, 0, 0, 0.25);
44+
--shadow-4-second: 0 10px 10px rgba(0, 0, 0, 0.22);
45+
--shadow-5-first: 0 19px 38px rgba(0, 0, 0, 0.3);
46+
--shadow-5-second: 0 15px 12px rgba(0, 0, 0, 0.22);
47+
--shadow-6-first: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
48+
--shadow-7-first: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12);
49+
--shadow-7-second: 0 1px 1px 0 rgba(0, 0, 0, 0.24);
50+
--shadow-8-first: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12);
51+
--shadow-8-second: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
52+
--shadow-9-first: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
53+
--shadow-9-second: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2);
54+
--shadow-9-third: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
55+
--shadow-10-first: 0 0 0 1px rgba(224, 230, 237, 0.5);
56+
--shadow-11-first: 0 1px 0.5px rgba(0, 0, 0, 0.24);
57+
--shadow-11-second: 0 -1px 0.75px rgba(0, 0, 0, 0.12);
58+
--shadow-12-first: 0 0 1px rgba(0, 0, 0, 0.25);
59+
--shadow-13-first: 0 0 1px rgba(0, 0, 0, 0.25);
60+
--shadow-14-first: 0 0 0.5px rgba(0, 0, 0, 0.1);
61+
--shadow-15-first: 0 2px 2px rgba(0, 0, 0, 0.24);
62+
--shadow-15-second: 0 1px 4.75px rgba(0, 0, 0, 0.12);
63+
--big-button-height: 32px;
64+
--small-button-height: 24px;
65+
--standard-input-height: 32px;
66+
--constraint-scale: 100%;
67+
--constraint-xs: 50px;
68+
--constraint-s: 132px;
69+
--constraint-m: 355px;
70+
--constraint-l: 400px;
71+
--constraint-xl: 768px;
72+
--spacing-4: 4px;
73+
--spacing-8: 8px;
74+
--spacing-16: 16px;
75+
--spacing-24: 24px;
76+
--spacing-32: 32px;
77+
--token-background-color-input-pristine: #fff;
78+
--token-background-color-input-disabled: hsl(195, 35.2941176471%, 98%);
79+
--token-background-color-input-hover: hsl(0, 0%, 90%);
80+
--token-background-color-input-selected: hsl(195, 35.2941176471%, 95%);
81+
--token-background-color-tag-pristine: hsl(0, 0%, 95%);
82+
--token-background-color-tag-warning: hsl(
83+
25.110132158590307,
84+
89.0196078431%,
85+
95%
86+
);
87+
--token-background-color-tag-disabled: hsl(0, 0%, 95%);
88+
--token-background-color-tag-normal-hover: hsl(0, 0%, 60%);
89+
--token-background-color-tag-warning-hover: #f16d0e;
90+
--token-border-color-input-pristine: hsl(0, 0%, 60%);
91+
--token-border-color-input-focus: #00b39e;
92+
--token-border-color-input-disabled: #ccc;
93+
--token-border-color-input-readonly: #ccc;
94+
--token-border-color-input-error: #e60050;
95+
--token-border-color-input-warning: #f16d0e;
96+
--token-border-radius-input: 6px;
97+
--token-border-color-tag-pristine: hsl(0, 0%, 60%);
98+
--token-border-color-tag-warning: #f16d0e;
99+
--token-border-color-tag-focus: #00b39e;
100+
--token-border-color-tag-warning-hover: #f16d0e;
101+
--token-border-radius-tag: 2px;
102+
--token-border-color-separator: #ccc;
103+
--token-font-family-default: 'Open Sans', sans-serif;
104+
--token-font-color-default: #1a1a1a;
105+
--token-font-color-disabled: hsl(0, 0%, 60%);
106+
--token-font-color-error: #e60050;
107+
--token-font-color-success: #00b39e;
108+
--token-font-color-warning: #f16d0e;
109+
--token-font-color-readonly: hsl(0, 0%, 60%);
110+
--token-font-color-placeholder: hsl(0, 0%, 60%);
111+
--token-font-size-default: 13px;
112+
--token-font-size-small: 12px;
113+
--token-shadow-box-tag-hover: 0 1px 3px rgba(0, 0, 0, 0.12),
114+
0 1px 2px rgba(0, 0, 0, 0.24);
115+
--token-size-height-input: 32px;
116+
--token-size-height-tag: 26px;
117+
--transition-linear-80ms: 80ms linear;
118+
--transition-easeinout-150ms: 150ms ease-in-out;
119+
--transition-standard: all 0.2s ease;
120+
}

‎materials/custom-properties.json

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{
2+
"--color-green": "#00b39e",
3+
"--color-green-25": "hsl(172.9608938547486, 100%, 25%)",
4+
"--color-green-40": "hsl(172.9608938547486, 100%, 40%)",
5+
"--color-green-85": "hsl(172.9608938547486, 100%, 85%)",
6+
"--color-green-95": "hsl(172.9608938547486, 100%, 95%)",
7+
"--color-navy": "#213c45",
8+
"--color-navy-30": "hsl(195, 35.2941176471%, 30%)",
9+
"--color-navy-40": "hsl(195, 35.2941176471%, 40%)",
10+
"--color-navy-95": "hsl(195, 35.2941176471%, 95%)",
11+
"--color-navy-98": "hsl(195, 35.2941176471%, 98%)",
12+
"--color-gray": "#ccc",
13+
"--color-gray-60": "hsl(0, 0%, 60%)",
14+
"--color-gray-90": "hsl(0, 0%, 90%)",
15+
"--color-gray-95": "hsl(0, 0%, 95%)",
16+
"--color-blue": "#078cdf",
17+
"--color-blue-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
18+
"--color-blue-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
19+
"--color-orange": "#f16d0e",
20+
"--color-orange-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
21+
"--color-red": "#e60050",
22+
"--color-red-95": "hsl(339.1304347826087, 100%, 95%)",
23+
"--color-purple": "#b866ff",
24+
"--color-black": "#1a1a1a",
25+
"--color-white": "#fff",
26+
"--border-radius-1": "1px",
27+
"--border-radius-2": "2px",
28+
"--border-radius-4": "4px",
29+
"--border-radius-6": "6px",
30+
"--border-radius-20": "20px",
31+
"--shadow-1-first": "0 1px 3px rgba(0, 0, 0, 0.12)",
32+
"--shadow-1-second": "0 1px 2px rgba(0, 0, 0, 0.24)",
33+
"--shadow-2-first": "0 3px 6px rgba(0, 0, 0, 0.16)",
34+
"--shadow-2-second": "0 3px 6px rgba(0, 0, 0, 0.23)",
35+
"--shadow-3-first": "0 10px 20px rgba(0, 0, 0, 0.19)",
36+
"--shadow-3-second": "0 6px 6px rgba(0, 0, 0, 0.23)",
37+
"--shadow-4-first": "0 14px 28px rgba(0, 0, 0, 0.25)",
38+
"--shadow-4-second": "0 10px 10px rgba(0, 0, 0, 0.22)",
39+
"--shadow-5-first": "0 19px 38px rgba(0, 0, 0, 0.3)",
40+
"--shadow-5-second": "0 15px 12px rgba(0, 0, 0, 0.22)",
41+
"--shadow-6-first": "0 -1px 2px 0 rgba(0, 0, 0, 0.2)",
42+
"--shadow-7-first": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12)",
43+
"--shadow-7-second": "0 1px 1px 0 rgba(0, 0, 0, 0.24)",
44+
"--shadow-8-first": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12)",
45+
"--shadow-8-second": "0 2px 4px 0 rgba(0, 0, 0, 0.24)",
46+
"--shadow-9-first": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1)",
47+
"--shadow-9-second": "inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2)",
48+
"--shadow-9-third": "inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)",
49+
"--shadow-10-first": "0 0 0 1px rgba(224, 230, 237, 0.5)",
50+
"--shadow-11-first": "0 1px 0.5px rgba(0, 0, 0, 0.24)",
51+
"--shadow-11-second": "0 -1px 0.75px rgba(0, 0, 0, 0.12)",
52+
"--shadow-12-first": "0 0 1px rgba(0, 0, 0, 0.25)",
53+
"--shadow-13-first": "0 0 1px rgba(0, 0, 0, 0.25)",
54+
"--shadow-14-first": "0 0 0.5px rgba(0, 0, 0, 0.1)",
55+
"--shadow-15-first": "0 2px 2px rgba(0, 0, 0, 0.24)",
56+
"--shadow-15-second": "0 1px 4.75px rgba(0, 0, 0, 0.12)",
57+
"--big-button-height": "32px",
58+
"--small-button-height": "24px",
59+
"--standard-input-height": "32px",
60+
"--constraint-scale": "100%",
61+
"--constraint-xs": "50px",
62+
"--constraint-s": "132px",
63+
"--constraint-m": "355px",
64+
"--constraint-l": "400px",
65+
"--constraint-xl": "768px",
66+
"--spacing-4": "4px",
67+
"--spacing-8": "8px",
68+
"--spacing-16": "16px",
69+
"--spacing-24": "24px",
70+
"--spacing-32": "32px",
71+
"--token-background-color-input-pristine": "#fff",
72+
"--token-background-color-input-disabled": "hsl(195, 35.2941176471%, 98%)",
73+
"--token-background-color-input-hover": "hsl(0, 0%, 90%)",
74+
"--token-background-color-input-selected": "hsl(195, 35.2941176471%, 95%)",
75+
"--token-background-color-tag-pristine": "hsl(0, 0%, 95%)",
76+
"--token-background-color-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
77+
"--token-background-color-tag-disabled": "hsl(0, 0%, 95%)",
78+
"--token-background-color-tag-normal-hover": "hsl(0, 0%, 60%)",
79+
"--token-background-color-tag-warning-hover": "#f16d0e",
80+
"--token-border-color-input-pristine": "hsl(0, 0%, 60%)",
81+
"--token-border-color-input-focus": "#00b39e",
82+
"--token-border-color-input-disabled": "#ccc",
83+
"--token-border-color-input-readonly": "#ccc",
84+
"--token-border-color-input-error": "#e60050",
85+
"--token-border-color-input-warning": "#f16d0e",
86+
"--token-border-radius-input": "6px",
87+
"--token-border-color-tag-pristine": "hsl(0, 0%, 60%)",
88+
"--token-border-color-tag-warning": "#f16d0e",
89+
"--token-border-color-tag-focus": "#00b39e",
90+
"--token-border-color-tag-warning-hover": "#f16d0e",
91+
"--token-border-radius-tag": "2px",
92+
"--token-border-color-separator": "#ccc",
93+
"--token-font-family-default": "'Open Sans', sans-serif",
94+
"--token-font-color-default": "#1a1a1a",
95+
"--token-font-color-disabled": "hsl(0, 0%, 60%)",
96+
"--token-font-color-error": "#e60050",
97+
"--token-font-color-success": "#00b39e",
98+
"--token-font-color-warning": "#f16d0e",
99+
"--token-font-color-readonly": "hsl(0, 0%, 60%)",
100+
"--token-font-color-placeholder": "hsl(0, 0%, 60%)",
101+
"--token-font-size-default": "13px",
102+
"--token-font-size-small": "12px",
103+
"--token-shadow-box-tag-hover": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
104+
"--token-size-height-input": "32px",
105+
"--token-size-height-tag": "26px",
106+
"--transition-linear-80ms": "80ms linear",
107+
"--transition-easeinout-150ms": "150ms ease-in-out",
108+
"--transition-standard": "all 0.2s ease"
109+
}

‎materials/borders.mod.css ‎materials/internals/borders.mod.css

File renamed without changes.

‎materials/colors/base-colors.mod.css ‎materials/internals/colors/base-colors.mod.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
44
This file is created by 'scripts/generate-base-color.js' script. The real
5-
colors's values should be updated in '../materials/colors/decisions/base-colors.json';
5+
colors's values should be updated in '../materials/internals/colors/decisions/base-colors.json';
66
Also, This file is transformed to JSON version in order to list the colors
77
in the UIKit. Color groups are indicated by a comment preceeding the group
88
of colors. */

‎materials/colors/colors-for-story.mod.css ‎materials/internals/colors/colors-for-story.mod.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
22
This file is created by 'scripts/generate-colors-for-story.js' script. The real
3-
colors's values should be updated in 'materials/colors/decisions/base-colors.json';
3+
colors's values should be updated in 'materials/internals/colors/decisions/base-colors.json';
44
This file is used to list the colors in the UIKit Color's story purposes only. */
55

66
:root {

‎materials/colors/colors.story.js ‎materials/internals/colors/colors.story.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { storiesOf } from '@storybook/react';
33
import styled from 'react-emotion';
4-
import { Text } from '../../src';
5-
import isVariation from '../../src/utils/is-variation';
4+
import { Text } from '../../../src';
5+
import isVariation from '../../../src/utils/is-variation';
66
import colorGroups from './decisions/base-colors.json';
77
import styles from './colors-for-story.mod.css';
88

‎materials/colors/decisions/base-colors.json ‎materials/internals/colors/decisions/base-colors.json

File renamed without changes.

‎materials/grid.mod.css ‎materials/internals/grid.mod.css

File renamed without changes.

‎materials/internals/index.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import './colors/base-colors.mod.css';
2+
@import './borders.mod.css';
3+
@import './shadows/base-shadows.mod.css';
4+
@import './sizes.mod.css';
5+
@import './spacings.mod.css';
6+
@import './tokens/tokens.mod.css';
7+
@import './transitions.mod.css';

‎materials/reset.mod.css ‎materials/internals/reset.mod.css

File renamed without changes.

‎materials/shadows/base-shadows.mod.css ‎materials/internals/shadows/base-shadows.mod.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
44
This file is created by 'scripts/generate-base-shadows.js' script. The real
5-
shadows's values should be updated in '../materials/shadows/decisions/base-shadows.json';
5+
shadows's values should be updated in '../materials/internals/shadows/decisions/base-shadows.json';
66
Also, This file is transformed to JSON version in order to list the shadows
77
in the UIKit. */
88

‎materials/shadows/decisions/base-shadows.json ‎materials/internals/shadows/decisions/base-shadows.json

File renamed without changes.

‎materials/shadows/shadows.story.js ‎materials/internals/shadows/shadows.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { storiesOf } from '@storybook/react';
33
import styled from 'react-emotion';
44
import { flatMap } from 'lodash';
5-
import { Text } from '../../src';
5+
import { Text } from '../../../src';
66
import shadowGroups from './decisions/base-shadows.json';
77

88
const Background = styled.div`

‎materials/sizes.mod.css ‎materials/internals/sizes.mod.css

File renamed without changes.

‎materials/spacings.mod.css ‎materials/internals/spacings.mod.css

File renamed without changes.

‎materials/tokens/README.md ‎materials/internals/tokens/README.md

File renamed without changes.

‎materials/tokens/backgrounds.mod.css ‎materials/internals/tokens/backgrounds.mod.css

File renamed without changes.

‎materials/tokens/borders.mod.css ‎materials/internals/tokens/borders.mod.css

File renamed without changes.

‎materials/tokens/fonts.mod.css ‎materials/internals/tokens/fonts.mod.css

File renamed without changes.

‎materials/tokens/shadows.mod.css ‎materials/internals/tokens/shadows.mod.css

File renamed without changes.

‎materials/tokens/sizes.mod.css ‎materials/internals/tokens/sizes.mod.css

File renamed without changes.

‎materials/tokens/tokens.mod.css ‎materials/internals/tokens/tokens.mod.css

File renamed without changes.

‎materials/transitions.mod.css ‎materials/internals/transitions.mod.css

File renamed without changes.

0 commit comments

Comments
 (0)