@volue/design-elevation 0.2.0-next.8 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/index.common.d.ts +9 -4
- package/dist/index.common.js +9 -4
- package/dist/index.cssmodules.css +4 -5
- package/dist/index.custom-properties.css +8 -4
- package/dist/index.json +4 -4
- package/dist/index.map.scss +6 -0
- package/dist/index.module.d.ts +9 -4
- package/dist/index.module.js +9 -4
- package/dist/index.scss +7 -4
- package/package.json +11 -13
- package/src/tokens.json +39 -0
- package/dist/elevation.map.scss +0 -7
- package/dist/index.html +0 -204
- package/src/_aliases.yml +0 -17
- package/src/elevation.yml +0 -14
- package/src/index.yml +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,3 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit guidelines.
|
|
4
4
|
|
|
5
5
|
<!-- MONODEPLOY:BELOW -->
|
|
6
|
+
|
|
7
|
+
## [0.2.0](https://github.com/Volue/wave/compare/@volue/design-elevation@0.1.0...@volue/design-elevation@0.2.0) "@volue/design-elevation" (2023-03-01)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* **tokens:** manage tokens with `style-dictionary` ([f5feb97](https://github.com/Volue/wave/commit/f5feb97602f04e96464b5ebba2155bb01a37b276))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.1.0](https://github.com/Volue/wave/compare/@volue/design-elevation@0.1.0-next.1...@volue/design-elevation@0.1.0) "@volue/design-elevation" (2022-09-22)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* add elevation tokens ([b2e55dd](https://github.com/Volue/wave/commit/b2e55dd97c0f022f2a73099f3d90a8cae1e1ad85))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Bug Fixes
|
|
26
|
+
|
|
27
|
+
* **styles:** adjust elevation tokens ([dd65d6b](https://github.com/Volue/wave/commit/dd65d6b8de916f9a8123c34dc826a363733734e5))
|
|
28
|
+
* **styles:** box-shadow tweaks ([1253f84](https://github.com/Volue/wave/commit/1253f842d519e8c3b8e568aea46cc17cf5945b7c))
|
|
29
|
+
* **styles:** tweak elevation tokens ([2881a15](https://github.com/Volue/wave/commit/2881a15ebcbea56985ba9af74dae04ab775678a3))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
package/dist/index.common.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const elevationXs : "0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)";
|
|
7
|
+
export const elevationS : "0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)";
|
|
8
|
+
export const elevationM : "0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)";
|
|
9
|
+
export const elevationL : "0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)";
|
package/dist/index.common.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
1
6
|
module.exports = {
|
|
2
|
-
elevationXs: "0.5px
|
|
3
|
-
elevationS: "
|
|
4
|
-
elevationM: "
|
|
5
|
-
elevationL: "
|
|
7
|
+
"elevationXs": "0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)",
|
|
8
|
+
"elevationS": "0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)",
|
|
9
|
+
"elevationM": "0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)",
|
|
10
|
+
"elevationL": "0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)"
|
|
6
11
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
@value elevation-
|
|
3
|
-
@value elevation-
|
|
4
|
-
@value elevation-
|
|
5
|
-
@value elevation-l: 1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.04), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.05), 4px 8px 8px hsla(var(--shadow-color, 0, 0%, 50%), 0.064), 8px 16px 16px hsla(var(--shadow-color, 0, 0%, 50%), 0.077), 16px 32px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.09);
|
|
1
|
+
@value elevation-xs: 0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048);
|
|
2
|
+
@value elevation-s: 0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06);
|
|
3
|
+
@value elevation-m: 0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07);
|
|
4
|
+
@value elevation-l: 0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08);
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
*/
|
|
1
5
|
|
|
2
6
|
:root {
|
|
3
|
-
--elevation-xs: 0.5px
|
|
4
|
-
--elevation-s:
|
|
5
|
-
--elevation-m:
|
|
6
|
-
--elevation-l:
|
|
7
|
+
--elevation-xs: 0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048);
|
|
8
|
+
--elevation-s: 0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06);
|
|
9
|
+
--elevation-m: 0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07);
|
|
10
|
+
--elevation-l: 0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08);
|
|
7
11
|
}
|
package/dist/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"ELEVATION_XS": "0.5px
|
|
3
|
-
"ELEVATION_S": "
|
|
4
|
-
"ELEVATION_M": "
|
|
5
|
-
"ELEVATION_L": "
|
|
2
|
+
"ELEVATION_XS": "0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)",
|
|
3
|
+
"ELEVATION_S": "0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)",
|
|
4
|
+
"ELEVATION_M": "0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)",
|
|
5
|
+
"ELEVATION_L": "0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)"
|
|
6
6
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
$elevation-map: (
|
|
2
|
+
'elevation-xs': (0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)),
|
|
3
|
+
'elevation-s': (0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)),
|
|
4
|
+
'elevation-m': (0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)),
|
|
5
|
+
'elevation-l': (0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)),
|
|
6
|
+
);
|
package/dist/index.module.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const elevationXs : "0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)";
|
|
7
|
+
export const elevationS : "0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)";
|
|
8
|
+
export const elevationM : "0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)";
|
|
9
|
+
export const elevationL : "0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)";
|
package/dist/index.module.js
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const elevationXs = "0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048)";
|
|
7
|
+
export const elevationS = "0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06)";
|
|
8
|
+
export const elevationM = "0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07)";
|
|
9
|
+
export const elevationL = "0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08)";
|
package/dist/index.scss
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$elevation-
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Wed, 01 Mar 2023 08:39:31 GMT
|
|
4
|
+
|
|
5
|
+
$elevation-xs: 0 1px 2.5px hsla(var(--shadow-color, 0, 0%, 0%), 0.08), 0 3px 9px hsla(var(--shadow-color, 0, 0%, 0%), 0.048);
|
|
6
|
+
$elevation-s: 0 0.4px 2.2px hsla(var(--shadow-color, 0, 0%, 0%), 0.022), 0 1.4px 5px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 5px 14px hsla(var(--shadow-color, 0, 0%, 0%), 0.06);
|
|
7
|
+
$elevation-m: 0 0.3px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.5px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 4px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.04), 0 8px 24px hsla(var(--shadow-color, 0, 0%, 0%), 0.07);
|
|
8
|
+
$elevation-l: 0 0.7px 2px hsla(var(--shadow-color, 0, 0%, 0%), 0.015), 0 1.6px 8px hsla(var(--shadow-color, 0, 0%, 0%), 0.024), 0 3.3px 16px hsla(var(--shadow-color, 0, 0%, 0%), 0.034), 0 5px 26px hsla(var(--shadow-color, 0, 0%, 0%), 0.06), 0 12px 42px hsla(var(--shadow-color, 0, 0%, 0%), 0.08);
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volue/design-elevation",
|
|
3
|
-
"version": "0.2.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Shadow/elevation primitives for Volue design primitives",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://github.com/
|
|
8
|
+
"url": "https://github.com/Volue/wave",
|
|
9
9
|
"directory": "design-primitives/design-elevation"
|
|
10
10
|
},
|
|
11
11
|
"publishConfig": {
|
|
@@ -26,21 +26,19 @@
|
|
|
26
26
|
"format": "yarn run _prettier --write",
|
|
27
27
|
"test": "run-p lint \"_prettier --check\"",
|
|
28
28
|
"clean": "rimraf dist",
|
|
29
|
-
"
|
|
30
|
-
"build
|
|
31
|
-
"build:tokensMap": "npm run _theo -s -- --format map.scss src/elevation.yml",
|
|
32
|
-
"build": "yarn run clean && run-p \"build:*\"",
|
|
29
|
+
"build:tokens": "style-dictionary build",
|
|
30
|
+
"build": "yarn run clean && yarn run build:tokens",
|
|
33
31
|
"prepack": "yarn run build"
|
|
34
32
|
},
|
|
35
33
|
"devDependencies": {
|
|
36
|
-
"eslint": "
|
|
37
|
-
"eslint-config-powel": "
|
|
38
|
-
"eslint-import-resolver-node": "0.3.
|
|
39
|
-
"eslint-plugin-import": "2.
|
|
34
|
+
"eslint": "8.35.0",
|
|
35
|
+
"eslint-config-powel": "14.2.1",
|
|
36
|
+
"eslint-import-resolver-node": "0.3.7",
|
|
37
|
+
"eslint-plugin-import": "2.27.5",
|
|
40
38
|
"npm-run-all": "4.1.5",
|
|
41
|
-
"prettier": "2.
|
|
39
|
+
"prettier": "2.8.4",
|
|
42
40
|
"rimraf": "3.0.2",
|
|
43
|
-
"
|
|
44
|
-
"typescript": "4.
|
|
41
|
+
"style-dictionary": "3.7.3-rc.1",
|
|
42
|
+
"typescript": "4.9.5"
|
|
45
43
|
}
|
|
46
44
|
}
|
package/src/tokens.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"shadow": {
|
|
4
|
+
"value": "0, 0%, 0%"
|
|
5
|
+
}
|
|
6
|
+
},
|
|
7
|
+
"elevation": {
|
|
8
|
+
"xs": {
|
|
9
|
+
"value": [
|
|
10
|
+
"0 1px 2.5px hsla(var(--shadow-color, {color.shadow.value}), 0.08)",
|
|
11
|
+
"0 3px 9px hsla(var(--shadow-color, {color.shadow.value}), 0.048)"
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"s": {
|
|
15
|
+
"value": [
|
|
16
|
+
"0 0.4px 2.2px hsla(var(--shadow-color, {color.shadow.value}), 0.022)",
|
|
17
|
+
"0 1.4px 5px hsla(var(--shadow-color, {color.shadow.value}), 0.04)",
|
|
18
|
+
"0 5px 14px hsla(var(--shadow-color, {color.shadow.value}), 0.06)"
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
"m": {
|
|
22
|
+
"value": [
|
|
23
|
+
"0 0.3px 2px hsla(var(--shadow-color, {color.shadow.value}), 0.015)",
|
|
24
|
+
"0 1.5px 8px hsla(var(--shadow-color, {color.shadow.value}), 0.024)",
|
|
25
|
+
"0 4px 16px hsla(var(--shadow-color, {color.shadow.value}), 0.04)",
|
|
26
|
+
"0 8px 24px hsla(var(--shadow-color, {color.shadow.value}), 0.07)"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"l": {
|
|
30
|
+
"value": [
|
|
31
|
+
"0 0.7px 2px hsla(var(--shadow-color, {color.shadow.value}), 0.015)",
|
|
32
|
+
"0 1.6px 8px hsla(var(--shadow-color, {color.shadow.value}), 0.024)",
|
|
33
|
+
"0 3.3px 16px hsla(var(--shadow-color, {color.shadow.value}), 0.034)",
|
|
34
|
+
"0 5px 26px hsla(var(--shadow-color, {color.shadow.value}), 0.06)",
|
|
35
|
+
"0 12px 42px hsla(var(--shadow-color, {color.shadow.value}), 0.08)"
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
package/dist/elevation.map.scss
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
$elevation-map: (
|
|
3
|
-
'elevation-xs': (0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)),
|
|
4
|
-
'elevation-s': (1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)),
|
|
5
|
-
'elevation-m': (1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.046), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.053), 3px 6px 6px hsla(var(--shadow-color, 0, 0%, 50%), 0.068), 6px 12px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.096)),
|
|
6
|
-
'elevation-l': (1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.04), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.05), 4px 8px 8px hsla(var(--shadow-color, 0, 0%, 50%), 0.064), 8px 16px 16px hsla(var(--shadow-color, 0, 0%, 50%), 0.077), 16px 32px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.09)),
|
|
7
|
-
);
|
package/dist/index.html
DELETED
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
-
<title>Design Tokens</title>
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
9
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
|
|
10
|
-
<style>
|
|
11
|
-
html {
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
font-size: 1em;
|
|
14
|
-
font-family: Helvetica, Arial, sans-serif;
|
|
15
|
-
line-height: 1.5;
|
|
16
|
-
background: #fff;
|
|
17
|
-
color: #444;
|
|
18
|
-
}
|
|
19
|
-
*,
|
|
20
|
-
*:before,
|
|
21
|
-
*:after {
|
|
22
|
-
box-sizing: inherit;
|
|
23
|
-
}
|
|
24
|
-
body { font-size: .75rem; }
|
|
25
|
-
::-moz-selection {
|
|
26
|
-
background: #b3d4fc;
|
|
27
|
-
text-shadow: none;
|
|
28
|
-
}
|
|
29
|
-
::selection {
|
|
30
|
-
background: #b3d4fc;
|
|
31
|
-
text-shadow: none;
|
|
32
|
-
}
|
|
33
|
-
.banner,
|
|
34
|
-
.contentinfo { background: #f5f5f5; }
|
|
35
|
-
.banner { padding: 1em 0; }
|
|
36
|
-
.container {
|
|
37
|
-
margin: 0 auto;
|
|
38
|
-
padding: 0 2rem;
|
|
39
|
-
max-width: 80rem;
|
|
40
|
-
}
|
|
41
|
-
main {
|
|
42
|
-
margin-right: -2rem;
|
|
43
|
-
margin-left: -2rem;
|
|
44
|
-
padding-bottom: 2rem;
|
|
45
|
-
}
|
|
46
|
-
h1 {
|
|
47
|
-
margin: 0;
|
|
48
|
-
font-weight: normal;
|
|
49
|
-
line-height: 1.25;
|
|
50
|
-
}
|
|
51
|
-
table {
|
|
52
|
-
table-layout: fixed;
|
|
53
|
-
border-collapse: separate;
|
|
54
|
-
border-spacing: 1rem;
|
|
55
|
-
width: 100%;
|
|
56
|
-
}
|
|
57
|
-
th,
|
|
58
|
-
td {
|
|
59
|
-
padding: 0 1rem;
|
|
60
|
-
vertical-align: baseline;
|
|
61
|
-
word-break: break-word;
|
|
62
|
-
hyphens: auto;
|
|
63
|
-
}
|
|
64
|
-
th {
|
|
65
|
-
font-weight: normal;
|
|
66
|
-
text-align: left;
|
|
67
|
-
}
|
|
68
|
-
thead th {
|
|
69
|
-
border-bottom: 1px solid #eee;
|
|
70
|
-
padding-top: 1rem;
|
|
71
|
-
padding-bottom: .5rem;
|
|
72
|
-
color: #999;
|
|
73
|
-
}
|
|
74
|
-
thead th:first-child {
|
|
75
|
-
font-size: 1.25rem;
|
|
76
|
-
color: inherit;
|
|
77
|
-
}
|
|
78
|
-
code { font-family: monaco, Consolas, monospace, monospace; }
|
|
79
|
-
hr {
|
|
80
|
-
display: block;
|
|
81
|
-
margin: 2rem 0;
|
|
82
|
-
border: 0;
|
|
83
|
-
border-top: 1px solid #eee;
|
|
84
|
-
padding: 0;
|
|
85
|
-
height: 1px;
|
|
86
|
-
}
|
|
87
|
-
.metric-box,
|
|
88
|
-
.radius-box {
|
|
89
|
-
display: inline-block;
|
|
90
|
-
vertical-align: middle;
|
|
91
|
-
background: #eee;
|
|
92
|
-
}
|
|
93
|
-
.radius-box {
|
|
94
|
-
width: 100%;
|
|
95
|
-
height: 3rem;
|
|
96
|
-
}
|
|
97
|
-
.radius-box.borderRadiusCircle {
|
|
98
|
-
width: 3rem;
|
|
99
|
-
}
|
|
100
|
-
.line-height-example {
|
|
101
|
-
border-bottom: 1px solid #eee;
|
|
102
|
-
background-image: -webkit-linear-gradient(#eee 1px, transparent 1px);
|
|
103
|
-
background-image: linear-gradient(#eee 1px, transparent 1px);
|
|
104
|
-
background-size: 100% 1rem;
|
|
105
|
-
}
|
|
106
|
-
</style>
|
|
107
|
-
</head>
|
|
108
|
-
<body>
|
|
109
|
-
<header role="banner" class="banner">
|
|
110
|
-
<div class="container">
|
|
111
|
-
<h1>Design Tokens</h1>
|
|
112
|
-
</div>
|
|
113
|
-
</header>
|
|
114
|
-
<div class="container">
|
|
115
|
-
<main role="main">
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<section>
|
|
135
|
-
<table>
|
|
136
|
-
|
|
137
|
-
<thead>
|
|
138
|
-
<tr id=box-shadow>
|
|
139
|
-
<th scope="col">Box Shadows</th>
|
|
140
|
-
<th scope="col">Value</th>
|
|
141
|
-
<th scope="col">Examples</th>
|
|
142
|
-
<th scope="col">Usage</th>
|
|
143
|
-
</tr>
|
|
144
|
-
</thead>
|
|
145
|
-
|
|
146
|
-
<tbody>
|
|
147
|
-
<tr>
|
|
148
|
-
<th scope="row">
|
|
149
|
-
<code>elevationXs</code>
|
|
150
|
-
</th>
|
|
151
|
-
<td>
|
|
152
|
-
<code>0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)</code>
|
|
153
|
-
</td>
|
|
154
|
-
<td style="box-shadow: 0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4);"></td>
|
|
155
|
-
<td></td>
|
|
156
|
-
</tr>
|
|
157
|
-
|
|
158
|
-
<tr>
|
|
159
|
-
<th scope="row">
|
|
160
|
-
<code>elevationS</code>
|
|
161
|
-
</th>
|
|
162
|
-
<td>
|
|
163
|
-
<code>1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)</code>
|
|
164
|
-
</td>
|
|
165
|
-
<td style="box-shadow: 1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077);"></td>
|
|
166
|
-
<td></td>
|
|
167
|
-
</tr>
|
|
168
|
-
|
|
169
|
-
<tr>
|
|
170
|
-
<th scope="row">
|
|
171
|
-
<code>elevationM</code>
|
|
172
|
-
</th>
|
|
173
|
-
<td>
|
|
174
|
-
<code>1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.046), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.053), 3px 6px 6px hsla(var(--shadow-color, 0, 0%, 50%), 0.068), 6px 12px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.096)</code>
|
|
175
|
-
</td>
|
|
176
|
-
<td style="box-shadow: 1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.046), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.053), 3px 6px 6px hsla(var(--shadow-color, 0, 0%, 50%), 0.068), 6px 12px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.096);"></td>
|
|
177
|
-
<td></td>
|
|
178
|
-
</tr>
|
|
179
|
-
|
|
180
|
-
<tr>
|
|
181
|
-
<th scope="row">
|
|
182
|
-
<code>elevationL</code>
|
|
183
|
-
</th>
|
|
184
|
-
<td>
|
|
185
|
-
<code>1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.04), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.05), 4px 8px 8px hsla(var(--shadow-color, 0, 0%, 50%), 0.064), 8px 16px 16px hsla(var(--shadow-color, 0, 0%, 50%), 0.077), 16px 32px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.09)</code>
|
|
186
|
-
</td>
|
|
187
|
-
<td style="box-shadow: 1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.04), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.05), 4px 8px 8px hsla(var(--shadow-color, 0, 0%, 50%), 0.064), 8px 16px 16px hsla(var(--shadow-color, 0, 0%, 50%), 0.077), 16px 32px 24px hsla(var(--shadow-color, 0, 0%, 50%), 0.09);"></td>
|
|
188
|
-
<td></td>
|
|
189
|
-
</tr>
|
|
190
|
-
</tbody>
|
|
191
|
-
</table>
|
|
192
|
-
<hr />
|
|
193
|
-
</section>
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
</main>
|
|
201
|
-
</div>
|
|
202
|
-
</body>
|
|
203
|
-
</html>
|
|
204
|
-
|
package/src/_aliases.yml
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
aliases:
|
|
2
|
-
SHADOW_COLOR: '0, 0%, 50%'
|
|
3
|
-
ELEVATION_XS: '0.5px 1px 1px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.4)'
|
|
4
|
-
ELEVATION_S: >-
|
|
5
|
-
1px 2px 2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.109),
|
|
6
|
-
2px 4px 4px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.077)
|
|
7
|
-
ELEVATION_M: >-
|
|
8
|
-
1px 2px 2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.046),
|
|
9
|
-
2px 4px 4px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.053),
|
|
10
|
-
3px 6px 6px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.068),
|
|
11
|
-
6px 12px 24px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.096)
|
|
12
|
-
ELEVATION_L: >-
|
|
13
|
-
1px 2px 2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.04),
|
|
14
|
-
2px 4px 4px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.05),
|
|
15
|
-
4px 8px 8px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.064),
|
|
16
|
-
8px 16px 16px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.077),
|
|
17
|
-
16px 32px 24px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.09)
|
package/src/elevation.yml
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
global:
|
|
2
|
-
type: shadow
|
|
3
|
-
category: box-shadow
|
|
4
|
-
imports:
|
|
5
|
-
- ./_aliases.yml
|
|
6
|
-
props:
|
|
7
|
-
- name: ELEVATION_XS
|
|
8
|
-
value: '{!ELEVATION_XS}'
|
|
9
|
-
- name: ELEVATION_S
|
|
10
|
-
value: '{!ELEVATION_S}'
|
|
11
|
-
- name: ELEVATION_M
|
|
12
|
-
value: '{!ELEVATION_M}'
|
|
13
|
-
- name: ELEVATION_L
|
|
14
|
-
value: '{!ELEVATION_L}'
|
package/src/index.yml
DELETED