@1024pix/pix-ui 61.1.0 → 61.2.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/addon/styles/pix-design-tokens/_shadows.scss +94 -35
  2. package/package.json +1 -1
package/addon/styles/pix-design-tokens/_shadows.scss CHANGED
@@ -1,75 +1,134 @@
1
1
  // See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A5141
2
2
 
3
- // Mixin pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
4
- @mixin shadow($verticalSize, $blur) {
5
- box-shadow: 0 $verticalSize $blur rgba(7, 20, 46, 0.08);
6
- }
3
+ :root {
4
+ // Size-based
5
+ --pix-shadow-xs: 0 4px 8px rgba(7, 20, 46, 0.08);
6
+ --pix-shadow-sm: 0 6px 12px rgba(7, 20, 46, 0.08);
7
+ --pix-shadow-md: 0 8px 16px rgba(7, 20, 46, 0.08);
8
+ --pix-shadow-lg: 0 10px 20px rgba(7, 20, 46, 0.08);
9
+ --pix-shadow-xl: 0 12px 24px rgba(7, 20, 46, 0.08);
10
+
11
+ // Default
12
+ --pix-shadow-default: 0 2px 5px 0 rgba(74, 58, 255, 0.25), 0 -2px 5px 0 rgba(74, 58, 255, 0.15) inset,
13
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(223, 238, 255, 0.1) inset;
14
+ --pix-shadow-default-hover: 4px 4px 5px 0 rgba(74, 58, 255, 0.25), -4px 4px 5px 0 rgba(74, 58, 255, 0.25),
15
+ 0 -2px 5px 0 rgba(74, 58, 255, 0.3) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset,
16
+ 0 3px 4px 0 rgba(223, 238, 255, 0.25) inset;
17
+ --pix-shadow-default-pressed: 0 0 15px 0 rgba(74, 58, 255, 0.6) inset, 0 -2px 5px 0 rgba(74, 58, 255, 0.25) inset,
18
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(223, 238, 255, 0.1) inset;
7
19
 
8
- @mixin coloredShadow($colorA, $colorB, $colorC) {
9
- box-shadow:
10
- 0 2px 5px 0 $colorA,
11
- 0 -2px 5px 0 $colorB inset,
12
- 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset,
13
- 0 3px 4px 0 $colorC inset;
20
+ // Neutral
21
+ --pix-shadow-neutral: 0 2px 5px 0 rgba(79, 99, 132, 0.25), 0 -2px 5px 0 rgba(79, 99, 132, 0.15) inset,
22
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(200, 207, 217, 0.1) inset;
23
+ --pix-shadow-neutral-hover: 4px 4px 5px 0 rgba(79, 99, 132, 0.25), -4px 4px 5px 0 rgba(79, 99, 132, 0.25),
24
+ 0 -2px 5px 0 rgba(79, 99, 132, 0.3) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset,
25
+ 0 3px 4px 0 rgba(200, 207, 217, 0.25) inset;
26
+ --pix-shadow-neutral-pressed: 0 0 15px 0 rgba(79, 99, 132, 0.6) inset, 0 -2px 5px 0 rgba(79, 99, 132, 0.25) inset,
27
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(200, 207, 217, 0.1) inset;
28
+
29
+ // Orga
30
+ --pix-shadow-orga: 0 2px 5px 0 rgba(54, 116, 191, 0.25), 0 -2px 5px 0 rgba(54, 116, 191, 0.15) inset,
31
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(235, 241, 249, 0.1) inset;
32
+ --pix-shadow-orga-hover: 4px 4px 5px 0 rgba(54, 116, 191, 0.25), -4px 4px 5px 0 rgba(54, 116, 191, 0.25),
33
+ 0 -2px 5px 0 rgba(54, 116, 191, 0.3) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset,
34
+ 0 3px 4px 0 rgba(235, 241, 249, 0.25) inset;
35
+ --pix-shadow-orga-pressed: 0 0 15px 0 rgba(54, 116, 191, 0.6) inset, 0 -2px 5px 0 rgba(54, 116, 191, 0.25) inset,
36
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(235, 241, 249, 0.1) inset;
37
+
38
+ // Certif
39
+ --pix-shadow-certif: 0 2px 5px 0 rgba(24, 127, 125, 0.25), 0 -2px 5px 0 rgba(24, 127, 125, 0.15) inset,
40
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(232, 242, 242, 0.1) inset;
41
+ --pix-shadow-certif-hover: 4px 4px 5px 0 rgba(24, 127, 125, 0.25), -4px 4px 5px 0 rgba(24, 127, 125, 0.25),
42
+ 0 -2px 5px 0 rgba(24, 127, 125, 0.3) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset,
43
+ 0 3px 4px 0 rgba(232, 242, 242, 0.25) inset;
44
+ --pix-shadow-certif-pressed: 0 0 15px 0 rgba(24, 127, 125, 0.6) inset, 0 -2px 5px 0 rgba(24, 127, 125, 0.25) inset,
45
+ 0 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 4px 0 rgba(232, 242, 242, 0.1) inset;
14
46
  }
15
47
 
48
+ // SCSS placeholders et classes CSS pour la compatibilité ascendante
49
+ // Mixin pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
50
+
16
51
  %pix-shadow-xs,
17
52
  .pix-shadow-xs {
18
- @include shadow(4px, 8px);
53
+ box-shadow: var(--pix-shadow-xs);
19
54
  }
20
55
 
21
56
  %pix-shadow-sm,
22
57
  .pix-shadow-sm {
23
- @include shadow(6px, 12px);
58
+ box-shadow: var(--pix-shadow-sm);
24
59
  }
25
60
 
26
61
  %pix-shadow-md,
27
62
  .pix-shadow-md {
28
- @include shadow(8px, 16px);
63
+ box-shadow: var(--pix-shadow-md);
29
64
  }
30
65
 
31
66
  %pix-shadow-lg,
32
67
  .pix-shadow-lg {
33
- @include shadow(10px, 20px);
68
+ box-shadow: var(--pix-shadow-lg);
34
69
  }
35
70
 
36
71
  %pix-shadow-xl,
37
72
  .pix-shadow-xl {
38
- @include shadow(12px, 24px);
73
+ box-shadow: var(--pix-shadow-xl);
39
74
  }
40
75
 
41
76
  %pix-shadow-default,
42
77
  .pix-shadow-default {
43
- @include coloredShadow(
44
- rgba(74, 58, 255, 0.25),
45
- rgba(74, 58, 255, 0.15),
46
- rgba(223, 238, 255, 0.1)
47
- );
78
+ box-shadow: var(--pix-shadow-default);
79
+ }
80
+
81
+ %pix-shadow-default-hover,
82
+ .pix-shadow-default-hover {
83
+ box-shadow: var(--pix-shadow-default-hover);
84
+ }
85
+
86
+ %pix-shadow-default-pressed,
87
+ .pix-shadow-default-pressed {
88
+ box-shadow: var(--pix-shadow-default-pressed);
48
89
  }
49
90
 
50
91
  %pix-shadow-neutral,
51
92
  .pix-shadow-neutral {
52
- @include coloredShadow(
53
- rgba(79, 99, 132, 0.25),
54
- rgba(79, 99, 132, 0.15),
55
- rgba(200, 207, 217, 0.1)
56
- );
93
+ box-shadow: var(--pix-shadow-neutral);
94
+ }
95
+
96
+ %pix-shadow-neutral-hover,
97
+ .pix-shadow-neutral-hover {
98
+ box-shadow: var(--pix-shadow-neutral-hover);
99
+ }
100
+
101
+ %pix-shadow-neutral-pressed,
102
+ .pix-shadow-neutral-pressed {
103
+ box-shadow: var(--pix-shadow-neutral-pressed);
57
104
  }
58
105
 
59
106
  %pix-shadow-orga,
60
107
  .pix-shadow-orga {
61
- @include coloredShadow(
62
- rgba(54, 116, 191, 0.25),
63
- rgba(54, 116, 191, 0.15),
64
- rgba(235, 241, 249, 0.1)
65
- );
108
+ box-shadow: var(--pix-shadow-orga);
109
+ }
110
+
111
+ %pix-shadow-orga-hover,
112
+ .pix-shadow-orga-hover {
113
+ box-shadow: var(--pix-shadow-orga-hover);
114
+ }
115
+
116
+ %pix-shadow-orga-pressed,
117
+ .pix-shadow-orga-pressed {
118
+ box-shadow: var(--pix-shadow-orga-pressed);
66
119
  }
67
120
 
68
121
  %pix-shadow-certif,
69
122
  .pix-shadow-certif {
70
- @include coloredShadow(
71
- rgba(24, 127, 125, 0.25),
72
- rgba(24, 127, 125, 0.15),
73
- rgba(232, 242, 242, 0.1)
74
- );
123
+ box-shadow: var(--pix-shadow-certif);
75
124
  }
125
+
126
+ %pix-shadow-certif-hover,
127
+ .pix-shadow-certif-hover {
128
+ box-shadow: var(--pix-shadow-certif-hover);
129
+ }
130
+
131
+ %pix-shadow-certif-pressed,
132
+ .pix-shadow-certif-pressed {
133
+ box-shadow: var(--pix-shadow-certif-pressed);
134
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "61.1.0",
3
+ "version": "61.2.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"