@1024pix/pix-ui 61.0.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 (6) hide show
  1. package/addon/components/pix-checkbox.gjs +10 -0
  2. package/addon/components/pix-label-wrapped.gjs +4 -0
  3. package/addon/styles/_pix-label-wrapped.scss +18 -0
  4. package/addon/styles/pix-design-tokens/_shadows.scss +94 -35
  5. package/addon/translations/fr.js +1 -0
  6. package/package.json +1 -1
package/addon/components/pix-checkbox.gjs CHANGED
@@ -27,6 +27,10 @@ export default class PixCheckbox extends Component {
27
27
  return this.args.state === 'error';
28
28
  }
29
29
 
30
+ get hasDeclarativeState() {
31
+ return this.args.state === 'declarative' || this.args.state === 'declarative-selected';
32
+ }
33
+
30
34
  get inputClasses() {
31
35
  const classes = ['pix-checkbox__input'];
32
36
 
@@ -68,6 +72,10 @@ export default class PixCheckbox extends Component {
68
72
  return this.formatMessage('state.error');
69
73
  }
70
74
 
75
+ get stateDeclarativeMessage() {
76
+ return this.formatMessage('state.declarative');
77
+ }
78
+
71
79
  formatMessage(message) {
72
80
  return formatMessage(this.args.locale ?? 'fr', `input.${message}`);
73
81
  }
@@ -107,6 +115,8 @@ export default class PixCheckbox extends Component {
107
115
  {{this.stateSuccessMessage}}
108
116
  {{else if this.hasErrorState}}
109
117
  {{this.stateErrorMessage}}
118
+ {{else if this.hasDeclarativeState}}
119
+ {{this.stateDeclarativeMessage}}
110
120
  {{/if}}
111
121
  </span>
112
122
  </div>
package/addon/components/pix-label-wrapped.gjs CHANGED
@@ -13,6 +13,10 @@ export default class PixLabelWrapped extends Component {
13
13
  if (this.args.state === 'success') classes.push('pix-label-wrapped--state-modulix-success');
14
14
  if (this.args.state === 'error') classes.push('pix-label-wrapped--state-modulix-error');
15
15
  if (this.args.state === 'neutral') classes.push('pix-label-wrapped--state-modulix-neutral');
16
+ if (this.args.state === 'declarative')
17
+ classes.push('pix-label-wrapped--state-modulix-declarative');
18
+ if (this.args.state === 'declarative-selected')
19
+ classes.push('pix-label-wrapped--state-modulix-declarative-selected');
16
20
  } else {
17
21
  if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
18
22
  if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
package/addon/styles/_pix-label-wrapped.scss CHANGED
@@ -23,6 +23,10 @@
23
23
  }
24
24
 
25
25
  &.pix-label-wrapped {
26
+ &.pix-label-wrapped--state-modulix-declarative {
27
+ border-color: var(--pix-neutral-500);
28
+ }
29
+
26
30
  &--disabled {
27
31
  --state-background-color: var(--pix-neutral-20);
28
32
  --state-border-color: var(--pix-neutral-100);
@@ -55,6 +59,20 @@
55
59
  color: var(--pix-success-700);
56
60
  }
57
61
 
62
+ &.pix-label-wrapped--state-modulix-declarative {
63
+ --state-border-color: transparent;
64
+ --state-background-color: var(--pix-primary-100);
65
+
66
+ color: var(--pix-neutral-900);
67
+ }
68
+
69
+ &.pix-label-wrapped--state-modulix-declarative-selected {
70
+ --state-border-color: var(--pix-neutral-500);
71
+ --state-background-color: var(--pix-neutral-0);
72
+
73
+ color: var(--pix-neutral-900);
74
+ }
75
+
58
76
  & .pix-label-wrapped__state-icon {
59
77
  z-index: 1;
60
78
  width: 1rem;
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/addon/translations/fr.js CHANGED
@@ -3,6 +3,7 @@ export default {
3
3
  state: {
4
4
  success: 'Sélection correcte',
5
5
  error: 'Sélection incorrecte',
6
+ declarative: 'Sélection sans bonne ou mauvaise réponse',
6
7
  },
7
8
  },
8
9
  select: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "61.0.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"