@muraldevkit/ds-foundation 2.16.2-dev-JVec.1 → 2.18.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 (17) hide show
  1. package/dist/foundation.css +41 -87
  2. package/dist/foundation.css.map +1 -1
  3. package/dist/foundation.min.css +1 -1
  4. package/dist/foundation.min.css.map +1 -1
  5. package/dist/tokens/color.json +0 -32
  6. package/package.json +2 -2
  7. package/src/styles/contextual-variables/border.scss +187 -93
  8. package/src/styles/contextual-variables/color.scss +502 -164
  9. package/src/styles/contextual-variables/shadows.scss +29 -13
  10. package/src/styles/contextual-variables/spacing.scss +156 -41
  11. package/src/styles/contextual-variables/typography.scss +359 -117
  12. package/src/styles/global-variables/border.scss +53 -28
  13. package/src/styles/global-variables/color.scss +717 -317
  14. package/src/styles/global-variables/motion.scss +52 -27
  15. package/src/styles/global-variables/shadows.scss +24 -11
  16. package/src/styles/global-variables/spacing.scss +69 -22
  17. package/src/styles/global-variables/typography.scss +176 -60
package/src/styles/contextual-variables/shadows.scss CHANGED
@@ -11,18 +11,34 @@
11
11
  */
12
12
 
13
13
  /* Contextual Shadow Tokens */
14
- $mrl-contextual-shadow-vars: (
15
- /* Base */
16
- "lifted": "01",
17
- "raised": "02",
18
- "floating": "03",
19
- /* Interactive */
20
- "hover": "interactive-01",
21
- "drag": "interactive-02"
22
- );
23
-
24
14
  :root {
25
- @each $token-name, $token-value in $mrl-contextual-shadow-vars {
26
- --mrl-shadows-#{$token-name}: var(--mrl-shadow-#{$token-value});
27
- }
15
+ ///
16
+ /// Contextual shadow token.
17
+ /// --mrl-shadows-lifted -> --mrl-shadow-01 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04).
18
+ ///
19
+ --mrl-shadows-lifted: var(--mrl-shadow-01);
20
+
21
+ ///
22
+ /// Contextual shadow token.
23
+ /// --mrl-shadows-raised -> --mrl-shadow-02 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04).
24
+ ///
25
+ --mrl-shadows-raised: var(--mrl-shadow-02);
26
+
27
+ ///
28
+ /// Contextual shadow token.
29
+ /// --mrl-shadows-floating -> --mrl-shadow-03 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08).
30
+ ///
31
+ --mrl-shadows-floating: var(--mrl-shadow-03);
32
+
33
+ ///
34
+ /// Contextual shadow token.
35
+ /// --mrl-shadows-hover -> --mrl-shadow-interactive-01 -> 0 4px 5px 0 rgba(24, 36, 47, 0.08).
36
+ ///
37
+ --mrl-shadows-hover: var(--mrl-shadow-interactive-01);
38
+
39
+ ///
40
+ /// Contextual shadow token.
41
+ /// --mrl-shadows-drag -> --mrl-shadow-interactive-02 -> 0 12px 20px 0px rgba(27, 57, 75, 0.2).
42
+ ///
43
+ --mrl-shadows-drag: var(--mrl-shadow-interactive-02);
28
44
  }
package/src/styles/contextual-variables/spacing.scss CHANGED
@@ -4,44 +4,6 @@
4
4
  /// (NOTE: these values are not finalized yet)
5
5
  /// @group variables
6
6
  ////
7
- $mrl-contextual-spacing-vars: (
8
- // Vertical spacing (stack)
9
- 'stack-components': '06',
10
- 'stack-controls': '05',
11
- 'stack-controls-small': '04',
12
- 'stack-section': '07',
13
- 'stack-section-divider': '04',
14
- 'stack-section-divider-small': '03',
15
- 'stack-section-divider-large': '06',
16
- 'stack-section-divider-xlarge': '08',
17
- 'stack-section-divider-label': '05',
18
- 'stack-siblings': '04',
19
- 'stack-related': '03',
20
- 'stack-related-small': '02',
21
-
22
- // Internal spacing (inset, squish, and stretch)
23
- 'inset': '03',
24
- 'inset-container': '08',
25
- // ↓ Default value here is for mobile, desktop value overrides below under media section
26
- 'inset-container-large': '05',
27
- 'inset-large': '05',
28
- 'inset-control': '06',
29
- 'inset-control-large': '05',
30
-
31
- // Horizontal spacing (inline)
32
- 'inline-related': '03',
33
- 'inline-sibling': '04',
34
- 'inline-sibling-small': '02',
35
-
36
- // Grid spacing (gutter)
37
- 'gutter': '04',
38
- 'gutter-label': '05',
39
-
40
- // Type related spacing
41
- 'stack-subheading': '05',
42
- 'stack-title': '07',
43
- 'stack-title-related': '05'
44
- );
45
7
 
46
8
  :root {
47
9
  // Focus offset
@@ -49,9 +11,162 @@ $mrl-contextual-spacing-vars: (
49
11
  --mrl-space-offset-focus: 1px;
50
12
 
51
13
  /* Spacing */
52
- @each $token-name, $token-value in $mrl-contextual-spacing-vars {
53
- --mrl-space-#{$token-name}: var(--mrl-spacing-#{$token-value});
54
- }
14
+ ///
15
+ /// Contextual spacing token.
16
+ /// --mrl-space-stack-components -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
17
+ ///
18
+ --mrl-space-stack-components: var(--mrl-spacing-06);
19
+
20
+ ///
21
+ /// Contextual spacing token.
22
+ /// --mrl-space-stack-controls -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
23
+ ///
24
+ --mrl-space-stack-controls: var(--mrl-spacing-05);
25
+
26
+ ///
27
+ /// Contextual spacing token.
28
+ /// --mrl-space-stack-controls-small -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
29
+ ///
30
+ --mrl-space-stack-controls-small: var(--mrl-spacing-04);
31
+
32
+ ///
33
+ /// Contextual spacing token.
34
+ /// --mrl-space-stack-section -> --mrl-spacing-07 -> calc(24 / var(--mrl-baseline) * 1rem).
35
+ ///
36
+ --mrl-space-stack-section: var(--mrl-spacing-07);
37
+
38
+ ///
39
+ /// Contextual spacing token.
40
+ /// --mrl-space-stack-section-divider -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
41
+ ///
42
+ --mrl-space-stack-section-divider: var(--mrl-spacing-04);
43
+
44
+ ///
45
+ /// Contextual spacing token.
46
+ /// --mrl-space-stack-section-divider-small -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
47
+ ///
48
+ --mrl-space-stack-section-divider-small: var(--mrl-spacing-03);
49
+
50
+ ///
51
+ /// Contextual spacing token.
52
+ /// --mrl-space-stack-section-divider-large -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
53
+ ///
54
+ --mrl-space-stack-section-divider-large: var(--mrl-spacing-06);
55
+
56
+ ///
57
+ /// Contextual spacing token.
58
+ /// --mrl-space-stack-section-divider-xlarge -> --mrl-spacing-08 -> calc(32 / var(--mrl-baseline) * 1rem).
59
+ ///
60
+ --mrl-space-stack-section-divider-xlarge: var(--mrl-spacing-08);
61
+
62
+ ///
63
+ /// Contextual spacing token.
64
+ /// --mrl-space-stack-section-divider-label -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
65
+ ///
66
+ --mrl-space-stack-section-divider-label: var(--mrl-spacing-05);
67
+
68
+ ///
69
+ /// Contextual spacing token.
70
+ /// --mrl-space-stack-siblings -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
71
+ ///
72
+ --mrl-space-stack-siblings: var(--mrl-spacing-04);
73
+
74
+ ///
75
+ /// Contextual spacing token.
76
+ /// --mrl-space-stack-related -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
77
+ ///
78
+ --mrl-space-stack-related: var(--mrl-spacing-03);
79
+
80
+ ///
81
+ /// Contextual spacing token.
82
+ /// --mrl-space-stack-related-small -> --mrl-spacing-02 -> calc(4 / var(--mrl-baseline) * 1rem).
83
+ ///
84
+ --mrl-space-stack-related-small: var(--mrl-spacing-02);
85
+
86
+ ///
87
+ /// Contextual spacing token.
88
+ /// --mrl-space-inset -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
89
+ ///
90
+ --mrl-space-inset: var(--mrl-spacing-03);
91
+
92
+ ///
93
+ /// Contextual spacing token.
94
+ /// --mrl-space-inset-container -> --mrl-spacing-08 -> calc(32 / var(--mrl-baseline) * 1rem).
95
+ ///
96
+ --mrl-space-inset-container: var(--mrl-spacing-08);
97
+
98
+ ///
99
+ /// Contextual spacing token.
100
+ /// --mrl-space-inset-container-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
101
+ ///
102
+ --mrl-space-inset-container-large: var(--mrl-spacing-05);
103
+
104
+ ///
105
+ /// Contextual spacing token.
106
+ /// --mrl-space-inset-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
107
+ ///
108
+ --mrl-space-inset-large: var(--mrl-spacing-05);
109
+
110
+ ///
111
+ /// Contextual spacing token.
112
+ /// --mrl-space-inset-control -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
113
+ ///
114
+ --mrl-space-inset-control: var(--mrl-spacing-06);
115
+
116
+ ///
117
+ /// Contextual spacing token.
118
+ /// --mrl-space-inset-control-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
119
+ ///
120
+ --mrl-space-inset-control-large: var(--mrl-spacing-05);
121
+
122
+ ///
123
+ /// Contextual spacing token.
124
+ /// --mrl-space-inline-related -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
125
+ ///
126
+ --mrl-space-inline-related: var(--mrl-spacing-03);
127
+
128
+ ///
129
+ /// Contextual spacing token.
130
+ /// --mrl-space-inline-sibling -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
131
+ ///
132
+ --mrl-space-inline-sibling: var(--mrl-spacing-04);
133
+
134
+ ///
135
+ /// Contextual spacing token.
136
+ /// --mrl-space-inline-sibling-small -> --mrl-spacing-02 -> calc(4 / var(--mrl-baseline) * 1rem).
137
+ ///
138
+ --mrl-space-inline-sibling-small: var(--mrl-spacing-02);
139
+
140
+ ///
141
+ /// Contextual spacing token.
142
+ /// --mrl-space-gutter -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
143
+ ///
144
+ --mrl-space-gutter: var(--mrl-spacing-04);
145
+
146
+ ///
147
+ /// Contextual spacing token.
148
+ /// --mrl-space-gutter-label -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
149
+ ///
150
+ --mrl-space-gutter-label: var(--mrl-spacing-05);
151
+
152
+ ///
153
+ /// Contextual spacing token.
154
+ /// --mrl-space-stack-subheading -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
155
+ ///
156
+ --mrl-space-stack-subheading: var(--mrl-spacing-05);
157
+
158
+ ///
159
+ /// Contextual spacing token.
160
+ /// --mrl-space-stack-title -> --mrl-spacing-07 -> calc(24 / var(--mrl-baseline) * 1rem).
161
+ ///
162
+ --mrl-space-stack-title: var(--mrl-spacing-07);
163
+
164
+ ///
165
+ /// Contextual spacing token.
166
+ /// --mrl-space-stack-title-related -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
167
+ ///
168
+ --mrl-space-stack-title-related: var(--mrl-spacing-05);
169
+
55
170
  @media only screen and (min-width: 600px) {
56
171
  --mrl-space-inset-container-large: var(--mrl-spacing-08);
57
172
  }