@volue/design-elevation 0.2.0-next.3 → 0.2.0-next.30

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/elevation.map.scss +4 -4
  3. package/dist/index.common.d.ts +4 -4
  4. package/dist/index.common.js +4 -4
  5. package/dist/index.cssmodules.css +4 -4
  6. package/dist/index.custom-properties.css +4 -4
  7. package/dist/index.html +8 -8
  8. package/dist/index.json +4 -4
  9. package/dist/index.module.d.ts +4 -4
  10. package/dist/index.module.js +4 -4
  11. package/dist/index.scss +4 -4
  12. package/package.json +7 -7
  13. package/src/_aliases.yml +16 -13
package/CHANGELOG.md CHANGED
@@ -3,3 +3,20 @@
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.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)
8
+
9
+
10
+ ### Features
11
+
12
+ * add elevation tokens ([b2e55dd](https://github.com/Volue/wave/commit/b2e55dd97c0f022f2a73099f3d90a8cae1e1ad85))
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **styles:** adjust elevation tokens ([dd65d6b](https://github.com/Volue/wave/commit/dd65d6b8de916f9a8123c34dc826a363733734e5))
18
+ * **styles:** box-shadow tweaks ([1253f84](https://github.com/Volue/wave/commit/1253f842d519e8c3b8e568aea46cc17cf5945b7c))
19
+ * **styles:** tweak elevation tokens ([2881a15](https://github.com/Volue/wave/commit/2881a15ebcbea56985ba9af74dae04ab775678a3))
20
+
21
+
22
+
package/dist/elevation.map.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
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)),
3
+ '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)),
4
+ '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)),
5
+ '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)),
6
+ '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
7
  );
package/dist/index.common.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const elevationXs = "0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)";
2
- export declare const elevationS = "1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)";
3
- export declare const elevationM = "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)";
4
- export declare const elevationL = "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
+ export declare 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)";
2
+ export declare 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)";
3
+ export declare 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)";
4
+ export declare 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,6 @@
1
1
  module.exports = {
2
- elevationXs: "0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)",
3
- elevationS: "1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)",
4
- elevationM: "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)",
5
- elevationL: "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)",
2
+ 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)",
3
+ 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)",
4
+ 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)",
5
+ 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
6
  };
package/dist/index.cssmodules.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @value elevation-xs: 0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4);
3
- @value 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);
4
- @value 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);
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);
2
+ @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);
3
+ @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);
4
+ @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);
5
+ @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);
package/dist/index.custom-properties.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  :root {
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);
3
+ --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);
4
+ --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);
5
+ --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);
6
+ --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
7
  }
package/dist/index.html CHANGED
@@ -149,9 +149,9 @@
149
149
  <code>elevationXs</code>
150
150
  </th>
151
151
  <td>
152
- <code>0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)</code>
152
+ <code>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)</code>
153
153
  </td>
154
- <td style="box-shadow: 0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4);"></td>
154
+ <td style="box-shadow: 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);"></td>
155
155
  <td></td>
156
156
  </tr>
157
157
 
@@ -160,9 +160,9 @@
160
160
  <code>elevationS</code>
161
161
  </th>
162
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>
163
+ <code>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)</code>
164
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>
165
+ <td style="box-shadow: 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);"></td>
166
166
  <td></td>
167
167
  </tr>
168
168
 
@@ -171,9 +171,9 @@
171
171
  <code>elevationM</code>
172
172
  </th>
173
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>
174
+ <code>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)</code>
175
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>
176
+ <td style="box-shadow: 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);"></td>
177
177
  <td></td>
178
178
  </tr>
179
179
 
@@ -182,9 +182,9 @@
182
182
  <code>elevationL</code>
183
183
  </th>
184
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>
185
+ <code>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)</code>
186
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>
187
+ <td style="box-shadow: 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);"></td>
188
188
  <td></td>
189
189
  </tr>
190
190
  </tbody>
package/dist/index.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "ELEVATION_XS": "0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)",
3
- "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)",
4
- "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)",
5
- "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)"
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
  }
package/dist/index.module.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const elevationXs = "0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)";
2
- export declare const elevationS = "1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)";
3
- export declare const elevationM = "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)";
4
- export declare const elevationL = "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
+ export declare 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)";
2
+ export declare 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)";
3
+ export declare 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)";
4
+ export declare 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,4 @@
1
- export const elevationXs = "0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4)";
2
- export const elevationS = "1px 2px 2px hsla(var(--shadow-color, 0, 0%, 50%), 0.109), 2px 4px 4px hsla(var(--shadow-color, 0, 0%, 50%), 0.077)";
3
- export const elevationM = "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)";
4
- export const elevationL = "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
+ 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)";
2
+ 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)";
3
+ 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)";
4
+ 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,5 @@
1
1
 
2
- $elevation-xs: 0.5px 1px 1px hsla(var(--shadow-color, 0, 0%, 50%), 0.4);
3
- $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);
4
- $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);
5
- $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);
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);
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@volue/design-elevation",
3
- "version": "0.2.0-next.3",
3
+ "version": "0.2.0-next.30",
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/PowelAS/wave",
8
+ "url": "https://github.com/Volue/wave",
9
9
  "directory": "design-primitives/design-elevation"
10
10
  },
11
11
  "publishConfig": {
@@ -33,14 +33,14 @@
33
33
  "prepack": "yarn run build"
34
34
  },
35
35
  "devDependencies": {
36
- "eslint": "7.32.0",
37
- "eslint-config-powel": "13.0.1",
36
+ "eslint": "8.30.0",
37
+ "eslint-config-powel": "14.2.1",
38
38
  "eslint-import-resolver-node": "0.3.6",
39
- "eslint-plugin-import": "2.25.3",
39
+ "eslint-plugin-import": "2.26.0",
40
40
  "npm-run-all": "4.1.5",
41
- "prettier": "2.4.1",
41
+ "prettier": "2.8.1",
42
42
  "rimraf": "3.0.2",
43
43
  "theo": "8.1.5",
44
- "typescript": "4.4.4"
44
+ "typescript": "4.8.4"
45
45
  }
46
46
  }
package/src/_aliases.yml CHANGED
@@ -1,17 +1,20 @@
1
1
  aliases:
2
- SHADOW_COLOR: '0, 0%, 50%'
3
- ELEVATION_XS: '0.5px 1px 1px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.4)'
2
+ SHADOW_COLOR: '0, 0%, 0%'
3
+ ELEVATION_XS: >-
4
+ 0 1px 2.5px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.08),
5
+ 0 3px 9px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.048)
4
6
  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
+ 0 0.4px 2.2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.022),
8
+ 0 1.4px 5px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.04),
9
+ 0 5px 14px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.06)
7
10
  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)
11
+ 0 0.3px 2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.015),
12
+ 0 1.5px 8px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.024),
13
+ 0 4px 16px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.04),
14
+ 0 8px 24px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.07)
12
15
  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)
16
+ 0 0.7px 2px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.015),
17
+ 0 1.6px 8px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.024),
18
+ 0 3.3px 16px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.034),
19
+ 0 5px 26px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.06),
20
+ 0 12px 42px hsla(var(--shadow-color, {!SHADOW_COLOR}), 0.08)