@withlayers/components.notification 0.6.1 → 0.7.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 (3) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/mixins.css +58 -47
  3. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .notification{border-style:var(--l--theme--notification--border--style);border-radius:var(--l--theme--notification--border--radius--md);border-width:var(--l--theme--notification--border--width--md);padding-block:var(--l--theme--notification--space--inset--block--md);padding-inline:var(--l--theme--notification--space--inset--inline--md);font-family:var(--l--theme--notification--typography--font-family--md);font-size:var(--l--theme--notification--typography--font-size--md);font-style:var(--l--theme--notification--typography--font-style--md);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--md);font-weight:var(--l--theme--notification--typography--font-weight--md);letter-spacing:var(--l--theme--notification--typography--letter-spacing--md);line-height:var(--l--theme--notification--typography--line-height--md);text-transform:var(--l--theme--notification--typography--text-transform--md)}.notification--xs{border-radius:var(--l--theme--notification--border--radius--xs);border-width:var(--l--theme--notification--border--width--xs);padding-block:var(--l--theme--notification--space--inset--block--xs);padding-inline:var(--l--theme--notification--space--inset--inline--xs);font-family:var(--l--theme--notification--typography--font-family--xs);font-size:var(--l--theme--notification--typography--font-size--xs);font-style:var(--l--theme--notification--typography--font-style--xs);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--xs);font-weight:var(--l--theme--notification--typography--font-weight--xs);letter-spacing:var(--l--theme--notification--typography--letter-spacing--xs);line-height:var(--l--theme--notification--typography--line-height--xs);text-transform:var(--l--theme--notification--typography--text-transform--xs)}.notification--sm{border-radius:var(--l--theme--notification--border--radius--sm);border-width:var(--l--theme--notification--border--width--sm);padding-block:var(--l--theme--notification--space--inset--block--sm);padding-inline:var(--l--theme--notification--space--inset--inline--sm);font-family:var(--l--theme--notification--typography--font-family--sm);font-size:var(--l--theme--notification--typography--font-size--sm);font-style:var(--l--theme--notification--typography--font-style--sm);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--sm);font-weight:var(--l--theme--notification--typography--font-weight--sm);letter-spacing:var(--l--theme--notification--typography--letter-spacing--sm);line-height:var(--l--theme--notification--typography--line-height--sm);text-transform:var(--l--theme--notification--typography--text-transform--sm)}.notification--md{border-radius:var(--l--theme--notification--border--radius--md);border-width:var(--l--theme--notification--border--width--md);padding-block:var(--l--theme--notification--space--inset--block--md);padding-inline:var(--l--theme--notification--space--inset--inline--md);font-family:var(--l--theme--notification--typography--font-family--md);font-size:var(--l--theme--notification--typography--font-size--md);font-style:var(--l--theme--notification--typography--font-style--md);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--md);font-weight:var(--l--theme--notification--typography--font-weight--md);letter-spacing:var(--l--theme--notification--typography--letter-spacing--md);line-height:var(--l--theme--notification--typography--line-height--md);text-transform:var(--l--theme--notification--typography--text-transform--md)}.notification--lg{border-radius:var(--l--theme--notification--border--radius--lg);border-width:var(--l--theme--notification--border--width--lg);padding-block:var(--l--theme--notification--space--inset--block--lg);padding-inline:var(--l--theme--notification--space--inset--inline--lg);font-family:var(--l--theme--notification--typography--font-family--lg);font-size:var(--l--theme--notification--typography--font-size--lg);font-style:var(--l--theme--notification--typography--font-style--lg);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--lg);font-weight:var(--l--theme--notification--typography--font-weight--lg);letter-spacing:var(--l--theme--notification--typography--letter-spacing--lg);line-height:var(--l--theme--notification--typography--line-height--lg);text-transform:var(--l--theme--notification--typography--text-transform--lg)}
1
+ .notification{border-radius:var(--l--theme--notification--border--radius--md);border-width:var(--l--theme--notification--border--width--md);border-style:var(--l--theme--notification--border--style);font-family:var(--l--theme--notification--typography--font-family--md);font-size:var(--l--theme--notification--typography--font-size--md);font-style:var(--l--theme--notification--typography--font-style--md);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--md);font-weight:var(--l--theme--notification--typography--font-weight--md);letter-spacing:var(--l--theme--notification--typography--letter-spacing--md);line-height:var(--l--theme--notification--typography--line-height--md);padding-block:var(--l--theme--notification--space--inset--block--md);padding-inline:var(--l--theme--notification--space--inset--inline--md);text-transform:var(--l--theme--notification--typography--text-transform--md);background-color:var(--l--theme--color--feedback--background--informative--on-default);border-color:var(--l--theme--color--feedback--border--informative--on-default);color:var(--l--theme--color--feedback--content--informative--on-default)}.notification a{color:var(--l--theme--color--feedback--content--informative--on-default)}.notification :focus-visible{outline-color:var(--l--theme--color--feedback--outline--informative--on-default)}.notification--lg{border-radius:var(--l--theme--notification--border--radius--lg);border-width:var(--l--theme--notification--border--width--lg);border-style:var(--l--theme--notification--border--style);font-family:var(--l--theme--notification--typography--font-family--lg);font-size:var(--l--theme--notification--typography--font-size--lg);font-style:var(--l--theme--notification--typography--font-style--lg);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--lg);font-weight:var(--l--theme--notification--typography--font-weight--lg);letter-spacing:var(--l--theme--notification--typography--letter-spacing--lg);line-height:var(--l--theme--notification--typography--line-height--lg);padding-block:var(--l--theme--notification--space--inset--block--lg);padding-inline:var(--l--theme--notification--space--inset--inline--lg);text-transform:var(--l--theme--notification--typography--text-transform--lg)}.notification--md{border-radius:var(--l--theme--notification--border--radius--md);border-width:var(--l--theme--notification--border--width--md);border-style:var(--l--theme--notification--border--style);font-family:var(--l--theme--notification--typography--font-family--md);font-size:var(--l--theme--notification--typography--font-size--md);font-style:var(--l--theme--notification--typography--font-style--md);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--md);font-weight:var(--l--theme--notification--typography--font-weight--md);letter-spacing:var(--l--theme--notification--typography--letter-spacing--md);line-height:var(--l--theme--notification--typography--line-height--md);padding-block:var(--l--theme--notification--space--inset--block--md);padding-inline:var(--l--theme--notification--space--inset--inline--md);text-transform:var(--l--theme--notification--typography--text-transform--md)}.notification--sm{border-radius:var(--l--theme--notification--border--radius--sm);border-width:var(--l--theme--notification--border--width--sm);border-style:var(--l--theme--notification--border--style);font-family:var(--l--theme--notification--typography--font-family--sm);font-size:var(--l--theme--notification--typography--font-size--sm);font-style:var(--l--theme--notification--typography--font-style--sm);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--sm);font-weight:var(--l--theme--notification--typography--font-weight--sm);letter-spacing:var(--l--theme--notification--typography--letter-spacing--sm);line-height:var(--l--theme--notification--typography--line-height--sm);padding-block:var(--l--theme--notification--space--inset--block--sm);padding-inline:var(--l--theme--notification--space--inset--inline--sm);text-transform:var(--l--theme--notification--typography--text-transform--sm)}.notification--xs{border-radius:var(--l--theme--notification--border--radius--xs);border-width:var(--l--theme--notification--border--width--xs);border-style:var(--l--theme--notification--border--style);font-family:var(--l--theme--notification--typography--font-family--xs);font-size:var(--l--theme--notification--typography--font-size--xs);font-style:var(--l--theme--notification--typography--font-style--xs);font-variant-caps:var(--l--theme--notification--typography--font-variant-caps--xs);font-weight:var(--l--theme--notification--typography--font-weight--xs);letter-spacing:var(--l--theme--notification--typography--letter-spacing--xs);line-height:var(--l--theme--notification--typography--line-height--xs);padding-block:var(--l--theme--notification--space--inset--block--xs);padding-inline:var(--l--theme--notification--space--inset--inline--xs);text-transform:var(--l--theme--notification--typography--text-transform--xs)}.notification--destructive{background-color:var(--l--theme--color--feedback--background--destructive--on-default);border-color:var(--l--theme--color--feedback--border--destructive--on-default);color:var(--l--theme--color--feedback--content--destructive--on-default)}.notification--destructive a{color:var(--l--theme--color--feedback--content--destructive--on-default)}.notification--destructive :focus-visible{outline-color:var(--l--theme--color--feedback--outline--destructive--on-default)}.notification--informative{background-color:var(--l--theme--color--feedback--background--informative--on-default);border-color:var(--l--theme--color--feedback--border--informative--on-default);color:var(--l--theme--color--feedback--content--informative--on-default)}.notification--informative a{color:var(--l--theme--color--feedback--content--informative--on-default)}.notification--informative :focus-visible{outline-color:var(--l--theme--color--feedback--outline--informative--on-default)}.notification--positive{background-color:var(--l--theme--color--feedback--background--positive--on-default);border-color:var(--l--theme--color--feedback--border--positive--on-default);color:var(--l--theme--color--feedback--content--positive--on-default)}.notification--positive a{color:var(--l--theme--color--feedback--content--positive--on-default)}.notification--positive :focus-visible{outline-color:var(--l--theme--color--feedback--outline--positive--on-default)}.notification--warning{background-color:var(--l--theme--color--feedback--background--warning--on-default);border-color:var(--l--theme--color--feedback--border--warning--on-default);color:var(--l--theme--color--feedback--content--warning--on-default)}.notification--warning a{color:var(--l--theme--color--feedback--content--warning--on-default)}.notification--warning :focus-visible{outline-color:var(--l--theme--color--feedback--outline--warning--on-default)}
package/dist/mixins.css CHANGED
@@ -1,36 +1,62 @@
1
- @define-mixin notification-core {
2
- border-style: var(--l--theme--notification--border--style);
3
- }
1
+ @import url('@withlayers/mixins/dist/index.css');
4
2
 
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);
3
+ @define-mixin notification {
4
+ @mixin notification--md;
5
+ @mixin notification--informative;
10
6
  }
11
7
 
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);
8
+ @define-mixin notification--lg {
9
+ border-radius: var(--l--theme--notification--border--radius--lg);
10
+ border-width: var(--l--theme--notification--border--width--lg);
11
+ border-style: var(--l--theme--notification--border--style);
12
+ font-family: var(--l--theme--notification--typography--font-family--lg);
13
+ font-size: var(--l--theme--notification--typography--font-size--lg);
14
+ font-style: var(--l--theme--notification--typography--font-style--lg);
15
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--lg);
16
+ font-weight: var(--l--theme--notification--typography--font-weight--lg);
17
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--lg);
18
+ line-height: var(--l--theme--notification--typography--line-height--lg);
19
+ padding-block: var(--l--theme--notification--space--inset--block--lg);
20
+ padding-inline: var(--l--theme--notification--space--inset--inline--lg);
21
+ text-transform: var(--l--theme--notification--typography--text-transform--lg);
17
22
  }
18
23
 
19
- @define-mixin notification-shape-md {
24
+ @define-mixin notification--md {
20
25
  border-radius: var(--l--theme--notification--border--radius--md);
21
26
  border-width: var(--l--theme--notification--border--width--md);
27
+ border-style: var(--l--theme--notification--border--style);
28
+ font-family: var(--l--theme--notification--typography--font-family--md);
29
+ font-size: var(--l--theme--notification--typography--font-size--md);
30
+ font-style: var(--l--theme--notification--typography--font-style--md);
31
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--md);
32
+ font-weight: var(--l--theme--notification--typography--font-weight--md);
33
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--md);
34
+ line-height: var(--l--theme--notification--typography--line-height--md);
22
35
  padding-block: var(--l--theme--notification--space--inset--block--md);
23
36
  padding-inline: var(--l--theme--notification--space--inset--inline--md);
37
+ text-transform: var(--l--theme--notification--typography--text-transform--md);
24
38
  }
25
39
 
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);
40
+ @define-mixin notification--sm {
41
+ border-radius: var(--l--theme--notification--border--radius--sm);
42
+ border-width: var(--l--theme--notification--border--width--sm);
43
+ border-style: var(--l--theme--notification--border--style);
44
+ font-family: var(--l--theme--notification--typography--font-family--sm);
45
+ font-size: var(--l--theme--notification--typography--font-size--sm);
46
+ font-style: var(--l--theme--notification--typography--font-style--sm);
47
+ font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--sm);
48
+ font-weight: var(--l--theme--notification--typography--font-weight--sm);
49
+ letter-spacing: var(--l--theme--notification--typography--letter-spacing--sm);
50
+ line-height: var(--l--theme--notification--typography--line-height--sm);
51
+ padding-block: var(--l--theme--notification--space--inset--block--sm);
52
+ padding-inline: var(--l--theme--notification--space--inset--inline--sm);
53
+ text-transform: var(--l--theme--notification--typography--text-transform--sm);
31
54
  }
32
55
 
33
- @define-mixin notification-typography-xs {
56
+ @define-mixin notification--xs {
57
+ border-radius: var(--l--theme--notification--border--radius--xs);
58
+ border-width: var(--l--theme--notification--border--width--xs);
59
+ border-style: var(--l--theme--notification--border--style);
34
60
  font-family: var(--l--theme--notification--typography--font-family--xs);
35
61
  font-size: var(--l--theme--notification--typography--font-size--xs);
36
62
  font-style: var(--l--theme--notification--typography--font-style--xs);
@@ -38,38 +64,23 @@
38
64
  font-weight: var(--l--theme--notification--typography--font-weight--xs);
39
65
  letter-spacing: var(--l--theme--notification--typography--letter-spacing--xs);
40
66
  line-height: var(--l--theme--notification--typography--line-height--xs);
67
+ padding-block: var(--l--theme--notification--space--inset--block--xs);
68
+ padding-inline: var(--l--theme--notification--space--inset--inline--xs);
41
69
  text-transform: var(--l--theme--notification--typography--text-transform--xs);
42
70
  }
43
71
 
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);
72
+ @define-mixin notification--destructive {
73
+ @mixin is-color-feedback-destructive;
53
74
  }
54
75
 
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);
76
+ @define-mixin notification--informative {
77
+ @mixin is-color-feedback-informative;
64
78
  }
65
79
 
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);
80
+ @define-mixin notification--positive {
81
+ @mixin is-color-feedback-positive;
82
+ }
83
+
84
+ @define-mixin notification--warning {
85
+ @mixin is-color-feedback-warning;
75
86
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/components.notification",
3
- "version": "0.6.1",
3
+ "version": "0.7.0",
4
4
  "description": "Notification component",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -21,8 +21,8 @@
21
21
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
22
22
  },
23
23
  "dependencies": {
24
- "@withlayers/mixins": "0.14.0",
25
- "@withlayers/tokens": "0.21.0"
24
+ "@withlayers/mixins": "0.15.0",
25
+ "@withlayers/tokens": "0.23.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "clsx": "^2.1.1",