@daffodil/design 0.45.0 → 0.45.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": "@daffodil/design",
|
|
3
|
-
"version": "0.45.
|
|
3
|
+
"version": "0.45.1",
|
|
4
4
|
"author": "Graycore LLC",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"bugs": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@angular/core": "^13.0.0",
|
|
19
19
|
"@angular/forms": "^13.0.0",
|
|
20
20
|
"@angular/cdk": "^13.0.0",
|
|
21
|
-
"@daffodil/core": "0.45.
|
|
21
|
+
"@daffodil/core": "0.45.1",
|
|
22
22
|
"@fortawesome/angular-fontawesome": "^0.10.0",
|
|
23
23
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
24
24
|
"@fortawesome/free-solid-svg-icons": "^5.10.0",
|
|
@@ -49,6 +49,9 @@
|
|
|
49
49
|
"./scss/daff-typography": {
|
|
50
50
|
"sass": "./scss/daff-typography.scss"
|
|
51
51
|
},
|
|
52
|
+
"./scss/typography/classes": {
|
|
53
|
+
"sass": "./scss/typography/_classes.scss"
|
|
54
|
+
},
|
|
52
55
|
"./package.json": {
|
|
53
56
|
"default": "./package.json"
|
|
54
57
|
},
|
|
@@ -5,7 +5,7 @@ Daffodil uses typography to establish hierarchy and create clear visual patterns
|
|
|
5
5
|
To include typography in your project, you can add the following in your Sass file:
|
|
6
6
|
|
|
7
7
|
```scss
|
|
8
|
-
@use '@daffodil/design/scss/
|
|
8
|
+
@use '@daffodil/design/scss/utilities';
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Type Scale
|
|
@@ -46,10 +46,10 @@ The headline mixins are responsive and will adjust at the `tablet` breakpoint.
|
|
|
46
46
|
|
|
47
47
|
**Example:**
|
|
48
48
|
```scss
|
|
49
|
-
@use '@daffodil/design/scss/
|
|
49
|
+
@use '@daffodil/design/scss/utilities';
|
|
50
50
|
|
|
51
51
|
.title {
|
|
52
|
-
@include
|
|
52
|
+
@include utilities.headline-xl;
|
|
53
53
|
}
|
|
54
54
|
```
|
|
55
55
|
|
|
@@ -64,19 +64,16 @@ The headline mixins are responsive and will adjust at the `tablet` breakpoint.
|
|
|
64
64
|
|
|
65
65
|
> `text-truncate` should only be used if the element is `display: block;` or `display: inline-block;`
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<div class="title"><span class="embolden">Daffodil</span> is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.</div>
|
|
70
|
-
```
|
|
67
|
+
You can include the typography utility classes in your project by writing the following in your Sass file:
|
|
71
68
|
|
|
72
69
|
```scss
|
|
73
|
-
@use '@daffodil/design/scss/typography';
|
|
70
|
+
@use '@daffodil/design/scss/typography/classes';
|
|
71
|
+
```
|
|
74
72
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
73
|
+
Otherwise, you can use the mixins in your project by using the following module in your Sass file:
|
|
74
|
+
|
|
75
|
+
```scss
|
|
76
|
+
@use '@daffodil/design/scss/utilities';
|
|
80
77
|
```
|
|
81
78
|
|
|
82
79
|
## Typography Variables
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@use '../../../../scss/theming';
|
|
4
4
|
@use './card-theme-variants/basic-card' as basic;
|
|
5
5
|
@use './card-theme-variants/stroked-card' as stroked;
|
|
6
|
-
@use './card-theme-variants
|
|
6
|
+
@use './card-theme-variants/linkable-card' as linkable;
|
|
7
7
|
|
|
8
8
|
@mixin daff-card-theme($theme) {
|
|
9
9
|
$primary: map.get($theme, primary);
|