@justeattakeaway/pie-css 0.8.0 → 0.9.1
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
|
|
5
5
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
6
6
|
"files": [
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"repository": "https://github.com/justeattakeaway/pie.git",
|
|
28
28
|
"license": "Apache-2.0",
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@types/postcss-import": "14.0.
|
|
31
|
-
"postcss": "8.4.
|
|
30
|
+
"@types/postcss-import": "14.0.3",
|
|
31
|
+
"postcss": "8.4.32",
|
|
32
32
|
"postcss-import": "15.1.0",
|
|
33
33
|
"w3c-css-validator": "1.3.1"
|
|
34
34
|
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
// ----------------------------------------------
|
|
2
|
+
// Function for turning a unitless value into a px value
|
|
3
|
+
// The `to-px` function allows you to compute the size using a CSS variable.
|
|
4
|
+
// The resulting value will be multiplied by 1px.
|
|
5
|
+
// -
|
|
6
|
+
// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the to-px calculation.
|
|
7
|
+
// -
|
|
8
|
+
// @example
|
|
9
|
+
// .my-class {
|
|
10
|
+
// font-size: to-px(--design-token-variable);
|
|
11
|
+
// }
|
|
12
|
+
// -
|
|
13
|
+
// Outputs:
|
|
14
|
+
// .my-class {
|
|
15
|
+
// font-size: calc(var(--design-token-variable) * 1px);
|
|
16
|
+
// }
|
|
17
|
+
// ----------------------------------------------
|
|
18
|
+
|
|
19
|
+
@function to-px($token) {
|
|
20
|
+
@return calc(var(#{$token}) * 1px);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// ----------------------------------------------
|
|
24
|
+
// Function for calculating the font size.
|
|
25
|
+
// The `font-size` function allows you to compute the font size using a CSS variable.
|
|
26
|
+
// The resulting value will be multiplied by 1px.
|
|
27
|
+
// This currently calls the `to-px` function, but is built on top of it should we want to
|
|
28
|
+
// support other units (such as ems/rems) in the future.
|
|
29
|
+
// -
|
|
30
|
+
// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size
|
|
31
|
+
// calculation.
|
|
32
|
+
// -
|
|
33
|
+
// @example
|
|
34
|
+
// .my-class {
|
|
35
|
+
// font-size: font-size(--font-size-variable);
|
|
36
|
+
// }
|
|
37
|
+
// -
|
|
38
|
+
// Outputs:
|
|
39
|
+
// .my-class {
|
|
40
|
+
// font-size: calc(var(--font-size-variable) * 1px);
|
|
41
|
+
// }
|
|
42
|
+
// ----------------------------------------------
|
|
43
|
+
@function font-size($token) {
|
|
44
|
+
@return to-px($token);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
// ----------------------------------------------
|
|
49
|
+
// Function for calculating the line-height.
|
|
50
|
+
// The `line-height` function allows you to compute the line height using a CSS variable.
|
|
51
|
+
// The resulting value will be multiplied by 1px.
|
|
52
|
+
// This currently calls the `to-px` function, but is built on top of it should we want to
|
|
53
|
+
// switch to using different units (such as unitless line heights) in the future.
|
|
54
|
+
// -
|
|
55
|
+
// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size
|
|
56
|
+
// calculation.
|
|
57
|
+
// -
|
|
58
|
+
// @example
|
|
59
|
+
// .my-class {
|
|
60
|
+
// font-size: font-size(--font-size-variable);
|
|
61
|
+
// }
|
|
62
|
+
// -
|
|
63
|
+
// Outputs:
|
|
64
|
+
// .my-class {
|
|
65
|
+
// font-size: calc(var(--font-size-variable) * 1px);
|
|
66
|
+
// }
|
|
67
|
+
// ----------------------------------------------
|
|
68
|
+
@function line-height($token) {
|
|
69
|
+
@return to-px($token);
|
|
70
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward './
|
|
1
|
+
@forward './unitModifiers';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
// ----------------------------------------------
|
|
2
|
+
// Mixin for setting the font size.
|
|
3
|
+
// The `font-size` mixin allows you to set the font size using a CSS variable.
|
|
4
|
+
// The resulting value will be multiplied by 1px.
|
|
5
|
+
// -
|
|
6
|
+
// @param {String} $token - The CSS variable name to be used for the font size.
|
|
7
|
+
// It should include the `--` prefix used in custom properties.
|
|
8
|
+
// -
|
|
9
|
+
// @example
|
|
10
|
+
// .text {
|
|
11
|
+
// @include font-size(--font-size-small);
|
|
12
|
+
// }
|
|
13
|
+
// -
|
|
14
|
+
// Outputs:
|
|
15
|
+
// .text {
|
|
16
|
+
// font-size: calc(var(--font-size-small) * 1px);
|
|
17
|
+
// }
|
|
18
|
+
// ----------------------------------------------
|
|
19
|
+
@mixin font-size($token) {
|
|
20
|
+
font-size: calc(var($token) * 1px);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
// ----------------------------------------------
|
|
25
|
+
// Mixin for setting the line height.
|
|
26
|
+
// The `line-height` mixin allows you to set the line height using a CSS variable.
|
|
27
|
+
// The resulting value will be multiplied by 1px.
|
|
28
|
+
// -
|
|
29
|
+
// @param {String} $token - The CSS variable name to be used for the line height.
|
|
30
|
+
// It should include the `--` prefix used in custom properties.
|
|
31
|
+
// -
|
|
32
|
+
// @example
|
|
33
|
+
// .text {
|
|
34
|
+
// @include line-height(--dt-font-caption-line-height);
|
|
35
|
+
// }
|
|
36
|
+
// -
|
|
37
|
+
// Outputs:
|
|
38
|
+
// .text {
|
|
39
|
+
// line-height: calc(var(--dt-font-caption-line-height) * 1px);
|
|
40
|
+
// }
|
|
41
|
+
// ----------------------------------------------
|
|
42
|
+
@mixin line-height($token) {
|
|
43
|
+
line-height: calc(var($token) * 1px);
|
|
44
|
+
}
|
package/scss/mixins/index.scss
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
// ----------------------------------------------
|
|
2
|
-
// Function for calculating the font size.
|
|
3
|
-
// The `font-size` function allows you to compute the font size using a CSS variable.
|
|
4
|
-
// The resulting value will be multiplied by 1px.
|
|
5
|
-
// -
|
|
6
|
-
// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size calculation.
|
|
7
|
-
// -
|
|
8
|
-
// @example
|
|
9
|
-
// .my-class {
|
|
10
|
-
// font-size: font-size(--font-size-variable);
|
|
11
|
-
// }
|
|
12
|
-
// -
|
|
13
|
-
// Outputs:
|
|
14
|
-
// .my-class {
|
|
15
|
-
// font-size: calc(var(--font-size-variable) * 1px);
|
|
16
|
-
// }
|
|
17
|
-
// ----------------------------------------------
|
|
18
|
-
@function font-size($token) {
|
|
19
|
-
@return calc(var(#{$token}) * 1px);
|
|
20
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
// ----------------------------------------------
|
|
2
|
-
// Mixin for setting the font size.
|
|
3
|
-
// The `font-size` mixin allows you to set the font size using a CSS variable.
|
|
4
|
-
// The resulting value will be multiplied by 1px.
|
|
5
|
-
// -
|
|
6
|
-
// @param {String} $token - The CSS variable name to be used for the font size.
|
|
7
|
-
// It should include the `--` prefix used in custom properties.
|
|
8
|
-
// -
|
|
9
|
-
// @example
|
|
10
|
-
// .text {
|
|
11
|
-
// @include font-size(--font-size-small);
|
|
12
|
-
// }
|
|
13
|
-
// -
|
|
14
|
-
// Outputs:
|
|
15
|
-
// .text {
|
|
16
|
-
// font-size: calc(var(--font-size-small) * 1px);
|
|
17
|
-
// }
|
|
18
|
-
// ----------------------------------------------
|
|
19
|
-
@mixin font-size($token) {
|
|
20
|
-
font-size: calc(var($token) * 1px);
|
|
21
|
-
}
|