@withlayers/components.notification 0.3.0 → 0.4.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.
Files changed (2) hide show
  1. package/dist/mixins.css +75 -0
  2. package/package.json +6 -6
package/dist/mixins.css ADDED
@@ -0,0 +1,75 @@
1
+ @define-mixin notification-core {
2
+ border-style: var(--l--theme--notification--border--style);
3
+ }
4
+
5
+ @define-mixin notification-shape-xs {
6
+ border-radius: var(--l--theme--notification--border--radius--xs);
7
+ border-width: var(--l--theme--notification--border--width--xs);
8
+ padding-block: var(--l--theme--notification--space--inset--block--xs);
9
+ padding-inline: var(--l--theme--notification--space--inset--inline--xs);
10
+ }
11
+
12
+ @define-mixin notification-shape-sm {
13
+ border-radius: var(--l--theme--notification--border--radius--sm);
14
+ border-width: var(--l--theme--notification--border--width--sm);
15
+ padding-block: var(--l--theme--notification--space--inset--block--sm);
16
+ padding-inline: var(--l--theme--notification--space--inset--inline--sm);
17
+ }
18
+
19
+ @define-mixin notification-shape-md {
20
+ border-radius: var(--l--theme--notification--border--radius--md);
21
+ border-width: var(--l--theme--notification--border--width--md);
22
+ padding-block: var(--l--theme--notification--space--inset--block--md);
23
+ padding-inline: var(--l--theme--notification--space--inset--inline--md);
24
+ }
25
+
26
+ @define-mixin notification-shape-lg {
27
+ border-radius: var(--l--theme--notification--border--radius--lg);
28
+ border-width: var(--l--theme--notification--border--width--lg);
29
+ padding-block: var(--l--theme--notification--space--inset--block--lg);
30
+ padding-inline: var(--l--theme--notification--space--inset--inline--lg);
31
+ }
32
+
33
+ @define-mixin notification-typography-xs {
34
+ font-family: var(--l--theme--notification--typography--font-family--xs);
35
+ font-size: var(--l--theme--notification--typography--font-size--xs);
36
+ font-style: var(--l--theme--notification--typography--font-style--xs);
37
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--xs);
38
+ font-weight: var(--l--theme--notification--typography--font-weight--xs);
39
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--xs);
40
+ line-height: var(--l--theme--notification--typography--line-height--xs);
41
+ text-transform: var(--l--theme--notification--typography--text-transform--xs);
42
+ }
43
+
44
+ @define-mixin notification-typography-sm {
45
+ font-family: var(--l--theme--notification--typography--font-family--sm);
46
+ font-size: var(--l--theme--notification--typography--font-size--sm);
47
+ font-style: var(--l--theme--notification--typography--font-style--sm);
48
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--sm);
49
+ font-weight: var(--l--theme--notification--typography--font-weight--sm);
50
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--sm);
51
+ line-height: var(--l--theme--notification--typography--line-height--sm);
52
+ text-transform: var(--l--theme--notification--typography--text-transform--sm);
53
+ }
54
+
55
+ @define-mixin notification-typography-md {
56
+ font-family: var(--l--theme--notification--typography--font-family--md);
57
+ font-size: var(--l--theme--notification--typography--font-size--md);
58
+ font-style: var(--l--theme--notification--typography--font-style--md);
59
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--md);
60
+ font-weight: var(--l--theme--notification--typography--font-weight--md);
61
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--md);
62
+ line-height: var(--l--theme--notification--typography--line-height--md);
63
+ text-transform: var(--l--theme--notification--typography--text-transform--md);
64
+ }
65
+
66
+ @define-mixin notification-typography-lg {
67
+ font-family: var(--l--theme--notification--typography--font-family--lg);
68
+ font-size: var(--l--theme--notification--typography--font-size--lg);
69
+ font-style: var(--l--theme--notification--typography--font-style--lg);
70
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--lg);
71
+ font-weight: var(--l--theme--notification--typography--font-weight--lg);
72
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--lg);
73
+ line-height: var(--l--theme--notification--typography--line-height--lg);
74
+ text-transform: var(--l--theme--notification--typography--text-transform--lg);
75
+ }
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@withlayers/components.notification",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Notification component",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
7
7
  "type": "module",
8
8
  "main": "dist/index.css",
9
9
  "exports": {
10
- ".": "./dist/index.css"
10
+ ".": "./dist/index.css",
11
+ "./mixins": "./dist/mixins.css"
11
12
  },
12
13
  "files": [
13
14
  "dist"
@@ -19,12 +20,11 @@
19
20
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
20
21
  },
21
22
  "dependencies": {
22
- "@withlayers/mixins": "0.12.0",
23
- "@withlayers/tokens": "0.17.0",
24
- "clsx": "^2.1.1",
25
- "postcss-mixins": "^11.0.3"
23
+ "@withlayers/mixins": "0.13.0",
24
+ "@withlayers/tokens": "0.17.0"
26
25
  },
27
26
  "devDependencies": {
27
+ "postcss-mixins": "^11.0.3",
28
28
  "postcss-nested": "^7.0.2"
29
29
  }
30
30
  }