breakouts 0.8.0 → 0.8.1

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/README.md +10 -3
  2. package/_index.scss +3 -0
  3. package/dist/breakouts.css +264 -241
  4. package/dist/breakouts.css.map +1 -1
  5. package/dist/breakouts.min.css +1 -1
  6. package/dist/breakouts.min.css.map +1 -1
  7. package/package.json +6 -4
  8. package/src/_index.scss +4 -13
  9. package/src/base/_color-tokens.scss +17 -22
  10. package/src/base/_color-utilities.scss +13 -101
  11. package/src/base/_layout.scss +60 -31
  12. package/src/base/_typography-base.scss +6 -0
  13. package/src/base/_variables.scss +20 -17
  14. package/src/base.scss +4 -2
  15. package/src/theme/_chupa-pop.scss +4 -13
  16. package/src/theme/_medical.scss +6 -21
  17. package/src/theme/_tootsie-pop.scss +8 -16
package/README.md CHANGED
@@ -78,8 +78,9 @@ The main abstraction is the `.breakouts` container. Every direct child defaults
78
78
  | `.full-start`, `.full-end` | One-sided full breakout |
79
79
  | `.full-left`, `.full-right` | Physical aliases for one-sided full breakout |
80
80
  | `.container` | Traditional centered wrapper |
81
- | `.full-bleed` | Viewport-wide utility outside the named-grid pattern |
82
- | `.breakout` | Simpler wide utility outside the named-grid pattern |
81
+ | `.full-bleed` | Viewport-wide utility outside the named-grid pattern (parent must be centered) |
82
+ | `.full-bleed--left`, `.full-bleed--right` | From one viewport edge to the parent's opposite edge |
83
+ | `.breakout`, `.breakout--left`, `.breakout--right` | Deprecated aliases of the `.full-bleed` classes, removed in the next major |
83
84
 
84
85
  ### Nested breakout grids
85
86
 
@@ -95,7 +96,7 @@ Any `.breakouts` or `.breakouts-grid` item can also be placed with a breakout cl
95
96
  </section>
96
97
  ```
97
98
 
98
- The nested grid inherits the parent track definition, so child placement classes keep the same meaning inside wider regions.
99
+ The nested grid is a `subgrid` of its parent, so its columns line up exactly with the outer ones. A child class that reaches past the nested area fills that area: `.full` inside a nested `.feature` is as wide as the `.feature`. Browsers without subgrid support fall back to a nested grid with its own tracks.
99
100
 
100
101
  ### Default sizing tokens
101
102
 
@@ -115,6 +116,10 @@ These CSS custom properties drive the layout and can be overridden per scope:
115
116
 
116
117
  Breakouts intentionally ships only a small utility surface around the breakout layout.
117
118
 
119
+ The CSS follows ITCSS order: settings and tokens, reset, base typography, layout, then
120
+ utilities last. A utility always wins over a layout class of equal specificity, so
121
+ `class="container px-0"` removes the container padding.
122
+
118
123
  ### Spacing
119
124
 
120
125
  Spacing classes are generated from this scale:
@@ -200,6 +205,8 @@ Override variables on first load with `@use ... with (...)`:
200
205
  );
201
206
  ```
202
207
 
208
+ Every color has a `-dark` variant (used in dark mode) and a `-light` variant (used with `<html class="light">`). `-light` defaults to the base color; for brand and status colors `-dark` defaults to a lighter tint of the base color, so overriding `$color-primary` updates all three modes. Override a variant directly to pick it yourself, e.g. `$color-primary-dark: #9ab8ff`.
209
+
203
210
  Or import only the modules you need:
204
211
 
205
212
  ```scss
package/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Lets `@use 'breakouts'` resolve through plain load paths (node_modules).
2
+
3
+ @forward 'src/breakouts';
package/dist/breakouts.css CHANGED
@@ -28,12 +28,12 @@ html.dark,
28
28
  --color-surface: #1a1a1a;
29
29
  --color-text: #eeeeee;
30
30
  --color-muted: #aaaaaa;
31
- --color-primary: #0033aa;
32
- --color-secondary: #002277;
33
- --color-accent: #c60055;
34
- --color-success: #1e7e34;
35
- --color-error: #a71d2a;
36
- --color-warning: #c79100;
31
+ --color-primary: rgb(127.5, 170, 255);
32
+ --color-secondary: #5588ff;
33
+ --color-accent: rgb(255, 159.5, 192);
34
+ --color-success: rgb(132.7753623188, 225.7246376812, 154);
35
+ --color-error: rgb(237.5, 154, 162);
36
+ --color-warning: #ffe083;
37
37
  color-scheme: dark;
38
38
  }
39
39
 
@@ -41,15 +41,15 @@ html.light,
41
41
  :root.light,
42
42
  .light {
43
43
  --color-background: #ffffff;
44
- --color-surface: #f8f8f8;
45
- --color-text: #222222;
46
- --color-muted: #999999;
47
- --color-primary: #88b0ff;
48
- --color-secondary: #ccd9ff;
49
- --color-accent: #ff80ab;
50
- --color-success: #71dd8a;
51
- --color-error: #ff6b6b;
52
- --color-warning: #ffdb4d;
44
+ --color-surface: #f0f0f0;
45
+ --color-text: #111111;
46
+ --color-muted: #666666;
47
+ --color-primary: #0055ff;
48
+ --color-secondary: #0033aa;
49
+ --color-accent: #ff4081;
50
+ --color-success: #28a745;
51
+ --color-error: #dc3545;
52
+ --color-warning: #ffc107;
53
53
  color-scheme: light;
54
54
  }
55
55
 
@@ -59,15 +59,250 @@ html.light,
59
59
  --color-surface: #1a1a1a;
60
60
  --color-text: #eeeeee;
61
61
  --color-muted: #aaaaaa;
62
- --color-primary: #0033aa;
63
- --color-secondary: #002277;
64
- --color-accent: #c60055;
65
- --color-success: #1e7e34;
66
- --color-error: #a71d2a;
67
- --color-warning: #c79100;
62
+ --color-primary: rgb(127.5, 170, 255);
63
+ --color-secondary: #5588ff;
64
+ --color-accent: rgb(255, 159.5, 192);
65
+ --color-success: rgb(132.7753623188, 225.7246376812, 154);
66
+ --color-error: rgb(237.5, 154, 162);
67
+ --color-warning: #ffe083;
68
68
  color-scheme: dark;
69
69
  }
70
70
  }
71
+ *,
72
+ *::before,
73
+ *::after {
74
+ box-sizing: border-box;
75
+ margin: 0;
76
+ padding: 0;
77
+ }
78
+
79
+ html,
80
+ body {
81
+ margin: 0;
82
+ padding: 0;
83
+ width: 100%;
84
+ }
85
+
86
+ body {
87
+ font-family: system-ui, sans-serif;
88
+ font-size: 1rem;
89
+ line-height: 1.6;
90
+ color: var(--color-text);
91
+ background-color: var(--color-background);
92
+ margin: 0;
93
+ }
94
+
95
+ h1 {
96
+ font-size: 2.25rem;
97
+ line-height: 1.2;
98
+ margin: 2rem 0 1rem;
99
+ font-weight: 600;
100
+ color: var(--color-text);
101
+ }
102
+
103
+ h2 {
104
+ font-size: 1.75rem;
105
+ line-height: 1.2;
106
+ margin: 2rem 0 1rem;
107
+ font-weight: 600;
108
+ color: var(--color-text);
109
+ }
110
+
111
+ h3 {
112
+ font-size: 1.5rem;
113
+ line-height: 1.2;
114
+ margin: 2rem 0 1rem;
115
+ font-weight: 600;
116
+ color: var(--color-text);
117
+ }
118
+
119
+ h4 {
120
+ font-size: 1.25rem;
121
+ line-height: 1.2;
122
+ margin: 2rem 0 1rem;
123
+ font-weight: 600;
124
+ color: var(--color-text);
125
+ }
126
+
127
+ h5 {
128
+ font-size: 1.125rem;
129
+ line-height: 1.2;
130
+ margin: 2rem 0 1rem;
131
+ font-weight: 600;
132
+ color: var(--color-text);
133
+ }
134
+
135
+ h6 {
136
+ font-size: 1rem;
137
+ line-height: 1.2;
138
+ margin: 2rem 0 1rem;
139
+ font-weight: 600;
140
+ color: var(--color-text);
141
+ }
142
+
143
+ p {
144
+ margin: 1rem 0;
145
+ }
146
+
147
+ a {
148
+ color: var(--color-primary);
149
+ text-decoration: underline;
150
+ }
151
+ a:hover {
152
+ color: var(--color-secondary);
153
+ }
154
+
155
+ :where(.breakouts, .breakouts-grid) > :is(h1, h2, h3, h4, h5, h6, p) {
156
+ margin-block: 0;
157
+ }
158
+
159
+ :root {
160
+ --gap: clamp(1rem, 6vw, 3rem);
161
+ --full: minmax(var(--gap), 1fr);
162
+ --feature: minmax(0, 5rem);
163
+ --popout: minmax(0, 2rem);
164
+ --content: min(50ch, 100% - var(--gap) * 2);
165
+ }
166
+
167
+ .container {
168
+ margin-inline: auto;
169
+ max-width: 72rem;
170
+ padding-inline: 1rem;
171
+ }
172
+
173
+ .full-bleed,
174
+ .breakout {
175
+ width: 100vw;
176
+ margin-left: calc(50% - 50vw);
177
+ }
178
+
179
+ .full-bleed--left,
180
+ .breakout--left {
181
+ width: calc(50% + 50vw);
182
+ margin-left: calc(50% - 50vw);
183
+ }
184
+
185
+ .full-bleed--right,
186
+ .breakout--right {
187
+ width: calc(50% + 50vw);
188
+ }
189
+
190
+ .breakouts,
191
+ .breakouts-grid {
192
+ display: grid;
193
+ grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
194
+ row-gap: var(--gap);
195
+ column-gap: 0;
196
+ }
197
+
198
+ .breakouts > *,
199
+ .breakouts-grid > * {
200
+ grid-column: content;
201
+ }
202
+
203
+ .content {
204
+ grid-column: content;
205
+ }
206
+
207
+ .popout {
208
+ grid-column: popout;
209
+ }
210
+
211
+ .popout-start,
212
+ .popout-left {
213
+ grid-column: popout-start/content-end;
214
+ }
215
+
216
+ .popout-end,
217
+ .popout-right {
218
+ grid-column: content-start/popout-end;
219
+ }
220
+
221
+ .feature {
222
+ grid-column: feature;
223
+ }
224
+
225
+ .feature-start,
226
+ .feature-left {
227
+ grid-column: feature-start/content-end;
228
+ }
229
+
230
+ .feature-end,
231
+ .feature-right {
232
+ grid-column: content-start/feature-end;
233
+ }
234
+
235
+ .full {
236
+ grid-column: full;
237
+ }
238
+
239
+ .full-start,
240
+ .full-left {
241
+ grid-column: full-start/content-end;
242
+ }
243
+
244
+ .full-end,
245
+ .full-right {
246
+ grid-column: content-start/full-end;
247
+ }
248
+
249
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(*) {
250
+ grid-template-columns: subgrid [popout-start feature-start full-start] [popout-end feature-end full-end];
251
+ }
252
+
253
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.content) {
254
+ grid-template-columns: subgrid [popout-start feature-start full-start] [popout-end feature-end full-end];
255
+ }
256
+
257
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout) {
258
+ grid-template-columns: subgrid [feature-start full-start] [] [] [feature-end full-end];
259
+ }
260
+
261
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout-start, .popout-left) {
262
+ grid-template-columns: subgrid [feature-start full-start] [] [popout-end feature-end full-end];
263
+ }
264
+
265
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout-end, .popout-right) {
266
+ grid-template-columns: subgrid [popout-start feature-start full-start] [] [feature-end full-end];
267
+ }
268
+
269
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature) {
270
+ grid-template-columns: subgrid [full-start] [] [] [] [] [full-end];
271
+ }
272
+
273
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature-start, .feature-left) {
274
+ grid-template-columns: subgrid [full-start] [] [] [popout-end feature-end full-end];
275
+ }
276
+
277
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature-end, .feature-right) {
278
+ grid-template-columns: subgrid [popout-start feature-start full-start] [] [] [full-end];
279
+ }
280
+
281
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full) {
282
+ grid-template-columns: subgrid [] [] [] [] [] [] [] [];
283
+ }
284
+
285
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full-start, .full-left) {
286
+ grid-template-columns: subgrid [] [] [] [] [popout-end feature-end full-end];
287
+ }
288
+
289
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full-end, .full-right) {
290
+ grid-template-columns: subgrid [popout-start feature-start full-start] [] [] [] [];
291
+ }
292
+
293
+ .grid {
294
+ display: grid;
295
+ grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
296
+ gap: var(--gap);
297
+ }
298
+ .grid > * {
299
+ grid-column: 2;
300
+ }
301
+
302
+ .grid--full > * {
303
+ grid-column: 1/-1;
304
+ }
305
+
71
306
  .bg-background {
72
307
  background-color: var(--color-background);
73
308
  }
@@ -104,28 +339,28 @@ html.light,
104
339
  background-color: var(--color-warning);
105
340
  }
106
341
 
342
+ .text-color {
343
+ color: var(--color-text);
344
+ }
345
+
107
346
  .text-background {
108
347
  color: var(--color-background);
109
348
  }
110
349
 
111
- .text-color {
112
- color: var(--color-text);
350
+ .text-surface {
351
+ color: var(--color-surface);
113
352
  }
114
353
 
115
354
  .text-primary {
116
355
  color: var(--color-primary);
117
356
  }
118
357
 
119
- .text-accent {
120
- color: var(--color-accent);
121
- }
122
-
123
358
  .text-secondary {
124
359
  color: var(--color-secondary);
125
360
  }
126
361
 
127
- .text-surface {
128
- color: var(--color-surface);
362
+ .text-accent {
363
+ color: var(--color-accent);
129
364
  }
130
365
 
131
366
  .text-muted {
@@ -180,21 +415,6 @@ html.light,
180
415
  color: var(--color-neutral-900);
181
416
  }
182
417
 
183
- *,
184
- *::before,
185
- *::after {
186
- box-sizing: border-box;
187
- margin: 0;
188
- padding: 0;
189
- }
190
-
191
- html,
192
- body {
193
- margin: 0;
194
- padding: 0;
195
- width: 100%;
196
- }
197
-
198
418
  .m-0 {
199
419
  margin: 0;
200
420
  }
@@ -685,75 +905,6 @@ body {
685
905
  z-index: 1000;
686
906
  }
687
907
 
688
- body {
689
- font-family: system-ui, sans-serif;
690
- font-size: 1rem;
691
- line-height: 1.6;
692
- color: var(--color-text);
693
- background-color: var(--color-background);
694
- margin: 0;
695
- }
696
-
697
- h1 {
698
- font-size: 2.25rem;
699
- line-height: 1.2;
700
- margin: 2rem 0 1rem;
701
- font-weight: 600;
702
- color: var(--color-text);
703
- }
704
-
705
- h2 {
706
- font-size: 1.75rem;
707
- line-height: 1.2;
708
- margin: 2rem 0 1rem;
709
- font-weight: 600;
710
- color: var(--color-text);
711
- }
712
-
713
- h3 {
714
- font-size: 1.5rem;
715
- line-height: 1.2;
716
- margin: 2rem 0 1rem;
717
- font-weight: 600;
718
- color: var(--color-text);
719
- }
720
-
721
- h4 {
722
- font-size: 1.25rem;
723
- line-height: 1.2;
724
- margin: 2rem 0 1rem;
725
- font-weight: 600;
726
- color: var(--color-text);
727
- }
728
-
729
- h5 {
730
- font-size: 1.125rem;
731
- line-height: 1.2;
732
- margin: 2rem 0 1rem;
733
- font-weight: 600;
734
- color: var(--color-text);
735
- }
736
-
737
- h6 {
738
- font-size: 1rem;
739
- line-height: 1.2;
740
- margin: 2rem 0 1rem;
741
- font-weight: 600;
742
- color: var(--color-text);
743
- }
744
-
745
- p {
746
- margin: 1rem 0;
747
- }
748
-
749
- a {
750
- color: var(--color-primary);
751
- text-decoration: underline;
752
- }
753
- a:hover {
754
- color: var(--color-secondary);
755
- }
756
-
757
908
  .text-left {
758
909
  text-align: left;
759
910
  }
@@ -810,132 +961,4 @@ a:hover {
810
961
  line-height: 2;
811
962
  }
812
963
 
813
- :root {
814
- --gap: clamp(1rem, 6vw, 3rem);
815
- --full: minmax(var(--gap), 1fr);
816
- --feature: minmax(0, 5rem);
817
- --popout: minmax(0, 2rem);
818
- --content: min(50ch, 100% - var(--gap) * 2);
819
- }
820
-
821
- .container {
822
- margin-inline: auto;
823
- max-width: 72rem;
824
- padding-inline: 1rem;
825
- }
826
-
827
- .full-bleed {
828
- width: 100vw;
829
- margin-left: 50%;
830
- transform: translateX(-50%);
831
- }
832
-
833
- .full-bleed--left {
834
- width: 100vw;
835
- margin-left: 0;
836
- transform: translateX(0);
837
- }
838
-
839
- .full-bleed--right {
840
- width: 100vw;
841
- margin-left: calc(-1 * (100vw - 100%) / 2);
842
- transform: translateX(calc(100% - 100vw));
843
- }
844
-
845
- .breakout {
846
- width: 100vw;
847
- margin-left: calc(-1 * (100vw - 100%) / 2);
848
- }
849
-
850
- .breakout--left {
851
- width: 100vw;
852
- margin-left: 0;
853
- transform: translateX(0);
854
- }
855
-
856
- .breakout--right {
857
- width: 100vw;
858
- margin-left: calc(-1 * (100vw - 100%) / 2);
859
- transform: translateX(calc(100% - 100vw));
860
- }
861
-
862
- .breakouts,
863
- .breakouts-grid {
864
- display: grid;
865
- grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
866
- row-gap: var(--gap);
867
- column-gap: 0;
868
- }
869
-
870
- .breakouts > *,
871
- .breakouts-grid > * {
872
- grid-column: content;
873
- }
874
-
875
- .content {
876
- grid-column: content;
877
- }
878
-
879
- .popout {
880
- grid-column: popout;
881
- }
882
-
883
- .popout-start,
884
- .popout-left {
885
- grid-column: popout-start/content-end;
886
- }
887
-
888
- .popout-end,
889
- .popout-right {
890
- grid-column: content-start/popout-end;
891
- }
892
-
893
- .feature {
894
- grid-column: feature;
895
- }
896
-
897
- .feature-start,
898
- .feature-left {
899
- grid-column: feature-start/content-end;
900
- }
901
-
902
- .feature-end,
903
- .feature-right {
904
- grid-column: content-start/feature-end;
905
- }
906
-
907
- .full {
908
- grid-column: full;
909
- }
910
-
911
- .full-start,
912
- .full-left {
913
- grid-column: full-start/content-end;
914
- }
915
-
916
- .full-end,
917
- .full-right {
918
- grid-column: content-start/full-end;
919
- }
920
-
921
- .breakouts > .breakouts,
922
- .breakouts > .breakouts-grid,
923
- .breakouts-grid > .breakouts,
924
- .breakouts-grid > .breakouts-grid {
925
- grid-template-columns: inherit;
926
- }
927
-
928
- .grid {
929
- display: grid;
930
- grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
931
- gap: var(--gap);
932
- }
933
- .grid > * {
934
- grid-column: 2;
935
- }
936
-
937
- .grid--full > * {
938
- grid-column: 1/-1;
939
- }
940
-
941
964
  /*# sourceMappingURL=breakouts.css.map */
package/dist/breakouts.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_color-utilities.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-base.scss","../src/base/_typography-utilities.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_reset.scss","../src/base/_typography-base.scss","../src/base/_layout.scss","../src/base/_color-utilities.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-utilities.scss"],"names":[],"mappings":"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","file":"breakouts.css"}
package/dist/breakouts.min.css CHANGED
@@ -1 +1 @@
1
- :root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;color-scheme:light}html.dark,:root.dark,.dark{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}html.light,:root.light,.light{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab;--color-success: #71dd8a;--color-error: #ff6b6b;--color-warning: #ffdb4d;color-scheme:light}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.bg-muted{background-color:var(--color-muted)}.bg-success{background-color:var(--color-success)}.bg-error{background-color:var(--color-error)}.bg-warning{background-color:var(--color-warning)}.text-background{color:var(--color-background)}.text-color{color:var(--color-text)}.text-primary{color:var(--color-primary)}.text-accent{color:var(--color-accent)}.text-secondary{color:var(--color-secondary)}.text-surface{color:var(--color-surface)}.text-muted{color:var(--color-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-10{z-index:10}.z-index-100{z-index:100}.z-index-1000{z-index:1000}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.full-bleed--left{width:100vw;margin-left:0;transform:translateX(0)}.full-bleed--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}.breakout--left{width:100vw;margin-left:0;transform:translateX(0)}.breakout--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakouts,.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];row-gap:var(--gap);column-gap:0}.breakouts>*,.breakouts-grid>*{grid-column:content}.content{grid-column:content}.popout{grid-column:popout}.popout-start,.popout-left{grid-column:popout-start/content-end}.popout-end,.popout-right{grid-column:content-start/popout-end}.feature{grid-column:feature}.feature-start,.feature-left{grid-column:feature-start/content-end}.feature-end,.feature-right{grid-column:content-start/feature-end}.full{grid-column:full}.full-start,.full-left{grid-column:full-start/content-end}.full-end,.full-right{grid-column:content-start/full-end}.breakouts>.breakouts,.breakouts>.breakouts-grid,.breakouts-grid>.breakouts,.breakouts-grid>.breakouts-grid{grid-template-columns:inherit}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */
1
+ :root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;color-scheme:light}html.dark,:root.dark,.dark{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: rgb(127.5, 170, 255);--color-secondary: #5588ff;--color-accent: rgb(255, 159.5, 192);--color-success: rgb(132.7753623188, 225.7246376812, 154);--color-error: rgb(237.5, 154, 162);--color-warning: #ffe083;color-scheme:dark}html.light,:root.light,.light{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;color-scheme:light}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: rgb(127.5, 170, 255);--color-secondary: #5588ff;--color-accent: rgb(255, 159.5, 192);--color-success: rgb(132.7753623188, 225.7246376812, 154);--color-error: rgb(237.5, 154, 162);--color-warning: #ffe083;color-scheme:dark}}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}:where(.breakouts,.breakouts-grid)>:is(h1,h2,h3,h4,h5,h6,p){margin-block:0}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed,.breakout{width:100vw;margin-left:calc(50% - 50vw)}.full-bleed--left,.breakout--left{width:calc(50% + 50vw);margin-left:calc(50% - 50vw)}.full-bleed--right,.breakout--right{width:calc(50% + 50vw)}.breakouts,.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];row-gap:var(--gap);column-gap:0}.breakouts>*,.breakouts-grid>*{grid-column:content}.content{grid-column:content}.popout{grid-column:popout}.popout-start,.popout-left{grid-column:popout-start/content-end}.popout-end,.popout-right{grid-column:content-start/popout-end}.feature{grid-column:feature}.feature-start,.feature-left{grid-column:feature-start/content-end}.feature-end,.feature-right{grid-column:content-start/feature-end}.full{grid-column:full}.full-start,.full-left{grid-column:full-start/content-end}.full-end,.full-right{grid-column:content-start/full-end}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(*){grid-template-columns:subgrid [popout-start feature-start full-start] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.content){grid-template-columns:subgrid [popout-start feature-start full-start] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout){grid-template-columns:subgrid [feature-start full-start] [] [] [feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout-start,.popout-left){grid-template-columns:subgrid [feature-start full-start] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout-end,.popout-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature){grid-template-columns:subgrid [full-start] [] [] [] [] [full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature-start,.feature-left){grid-template-columns:subgrid [full-start] [] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature-end,.feature-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [] [full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full){grid-template-columns:subgrid [] [] [] [] [] [] [] []}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full-start,.full-left){grid-template-columns:subgrid [] [] [] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full-end,.full-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [] [] []}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.bg-muted{background-color:var(--color-muted)}.bg-success{background-color:var(--color-success)}.bg-error{background-color:var(--color-error)}.bg-warning{background-color:var(--color-warning)}.text-color{color:var(--color-text)}.text-background{color:var(--color-background)}.text-surface{color:var(--color-surface)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-accent{color:var(--color-accent)}.text-muted{color:var(--color-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-10{z-index:10}.z-index-100{z-index:100}.z-index-1000{z-index:1000}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}/*# sourceMappingURL=breakouts.min.css.map */
package/dist/breakouts.min.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_color-utilities.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-base.scss","../src/base/_typography-utilities.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_reset.scss","../src/base/_typography-base.scss","../src/base/_layout.scss","../src/base/_color-utilities.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-utilities.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
package/package.json CHANGED
@@ -1,17 +1,19 @@
1
1
  {
2
2
  "name": "breakouts",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "A focused SCSS/CSS breakout layout toolkit inspired by the Mulligan named-grid pattern.",
5
5
  "main": "dist/breakouts.css",
6
6
  "files": [
7
+ "_index.scss",
7
8
  "src/",
8
9
  "dist/"
9
10
  ],
10
11
  "scripts": {
12
+ "test": "sh test/compile.sh",
11
13
  "build": "sass src/_index.scss dist/breakouts.css --style=expanded && sass src/_index.scss dist/breakouts.min.css --style=compressed && cp dist/breakouts.css docs/breakouts.css",
12
- "release:patch": "npm run build && npm version patch --sign-git-tag && git push && git push --follow-tags && npm publish --access public",
13
- "release:minor": "npm run build && npm version minor --sign-git-tag && git push && git push --follow-tags && npm publish --access public",
14
- "release:major": "npm run build && npm version major --sign-git-tag && git push && git push --follow-tags && npm publish --access public"
14
+ "release:patch": "(npm whoami || npm login --auth-type=web) && npm run build && npm version patch --sign-git-tag && npm publish --access public && git push --follow-tags",
15
+ "release:minor": "(npm whoami || npm login --auth-type=web) && npm run build && npm version minor --sign-git-tag && npm publish --access public && git push --follow-tags",
16
+ "release:major": "(npm whoami || npm login --auth-type=web) && npm run build && npm version major --sign-git-tag && npm publish --access public && git push --follow-tags"
15
17
  },
16
18
  "author": "Cantilux",
17
19
  "license": "MIT",
package/src/_index.scss CHANGED
@@ -1,14 +1,5 @@
1
- // Full bundle entry point. Use src/core, src/base, src/reset, or
2
- // src/utilities when you need a smaller Sass surface.
1
+ // Full bundle entry point: base layers, then utilities last (ITCSS order, see AGENTS.md).
2
+ // Use src/core, src/base, src/reset, or src/utilities when you need a smaller Sass surface.
3
3
 
4
- // Theme and configurable variables
5
- @forward 'base/variables';
6
- @use 'base/variables' as *;
7
- @forward 'base/colors';
8
-
9
- // Base styles
10
- @forward 'base/reset';
11
- @forward 'base/spacing';
12
- @forward 'base/positions';
13
- @forward 'base/typography';
14
- @forward 'base/layout';
4
+ @forward 'base';
5
+ @forward 'utilities';
package/src/base/_color-tokens.scss CHANGED
@@ -2,6 +2,21 @@
2
2
 
3
3
  @use 'variables' as *;
4
4
 
5
+ // One definition for both dark-mode selectors, so they cannot drift apart.
6
+ @mixin -dark-tokens {
7
+ --color-background: #{$color-background-dark};
8
+ --color-surface: #{$color-surface-dark};
9
+ --color-text: #{$color-text-dark};
10
+ --color-muted: #{$color-muted-dark};
11
+ --color-primary: #{$color-primary-dark};
12
+ --color-secondary: #{$color-secondary-dark};
13
+ --color-accent: #{$color-accent-dark};
14
+ --color-success: #{$color-success-dark};
15
+ --color-error: #{$color-error-dark};
16
+ --color-warning: #{$color-warning-dark};
17
+ color-scheme: dark;
18
+ }
19
+
5
20
  :root {
6
21
  --color-background: #{$color-background};
7
22
  --color-surface: #{$color-surface};
@@ -29,17 +44,7 @@
29
44
  html.dark,
30
45
  :root.dark,
31
46
  .dark {
32
- --color-background: #{$color-background-dark};
33
- --color-surface: #{$color-surface-dark};
34
- --color-text: #{$color-text-dark};
35
- --color-muted: #{$color-muted-dark};
36
- --color-primary: #{$color-primary-dark};
37
- --color-secondary: #{$color-secondary-dark};
38
- --color-accent: #{$color-accent-dark};
39
- --color-success: #{$color-success-dark};
40
- --color-error: #{$color-error-dark};
41
- --color-warning: #{$color-warning-dark};
42
- color-scheme: dark;
47
+ @include -dark-tokens;
43
48
  }
44
49
 
45
50
  html.light,
@@ -60,16 +65,6 @@ html.light,
60
65
 
61
66
  @media (prefers-color-scheme: dark) {
62
67
  :root:not(.light):not(.dark) {
63
- --color-background: #{$color-background-dark};
64
- --color-surface: #{$color-surface-dark};
65
- --color-text: #{$color-text-dark};
66
- --color-muted: #{$color-muted-dark};
67
- --color-primary: #{$color-primary-dark};
68
- --color-secondary: #{$color-secondary-dark};
69
- --color-accent: #{$color-accent-dark};
70
- --color-success: #{$color-success-dark};
71
- --color-error: #{$color-error-dark};
72
- --color-warning: #{$color-warning-dark};
73
- color-scheme: dark;
68
+ @include -dark-tokens;
74
69
  }
75
70
  }
package/src/base/_color-utilities.scss CHANGED
@@ -1,113 +1,25 @@
1
1
  // Utility classes for background and text colors.
2
2
 
3
- .bg-background {
4
- background-color: var(--color-background);
5
- }
6
-
7
- .bg-surface {
8
- background-color: var(--color-surface);
9
- }
10
-
11
- .bg-primary {
12
- background-color: var(--color-primary);
13
- }
14
-
15
- .bg-secondary {
16
- background-color: var(--color-secondary);
17
- }
18
-
19
- .bg-accent {
20
- background-color: var(--color-accent);
21
- }
22
-
23
- .bg-muted {
24
- background-color: var(--color-muted);
25
- }
26
-
27
- .bg-success {
28
- background-color: var(--color-success);
29
- }
30
-
31
- .bg-error {
32
- background-color: var(--color-error);
33
- }
3
+ $-colors: background, surface, primary, secondary, accent, muted, success, error, warning;
34
4
 
35
- .bg-warning {
36
- background-color: var(--color-warning);
37
- }
38
-
39
- .text-background {
40
- color: var(--color-background);
5
+ @each $name in $-colors {
6
+ .bg-#{$name} {
7
+ background-color: var(--color-#{$name});
8
+ }
41
9
  }
42
10
 
43
11
  .text-color {
44
12
  color: var(--color-text);
45
13
  }
46
14
 
47
- .text-primary {
48
- color: var(--color-primary);
49
- }
50
-
51
- .text-accent {
52
- color: var(--color-accent);
53
- }
54
-
55
- .text-secondary {
56
- color: var(--color-secondary);
57
- }
58
-
59
- .text-surface {
60
- color: var(--color-surface);
61
- }
62
-
63
- .text-muted {
64
- color: var(--color-muted);
65
- }
66
-
67
- .text-success {
68
- color: var(--color-success);
69
- }
70
-
71
- .text-error {
72
- color: var(--color-error);
73
- }
74
-
75
- .text-warning {
76
- color: var(--color-warning);
77
- }
78
-
79
- .text-neutral-100 {
80
- color: var(--color-neutral-100);
81
- }
82
-
83
- .text-neutral-200 {
84
- color: var(--color-neutral-200);
85
- }
86
-
87
- .text-neutral-300 {
88
- color: var(--color-neutral-300);
89
- }
90
-
91
- .text-neutral-400 {
92
- color: var(--color-neutral-400);
93
- }
94
-
95
- .text-neutral-500 {
96
- color: var(--color-neutral-500);
97
- }
98
-
99
- .text-neutral-600 {
100
- color: var(--color-neutral-600);
101
- }
102
-
103
- .text-neutral-700 {
104
- color: var(--color-neutral-700);
105
- }
106
-
107
- .text-neutral-800 {
108
- color: var(--color-neutral-800);
15
+ @each $name in $-colors {
16
+ .text-#{$name} {
17
+ color: var(--color-#{$name});
18
+ }
109
19
  }
110
20
 
111
- .text-neutral-900 {
112
- color: var(--color-neutral-900);
21
+ @each $step in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
22
+ .text-neutral-#{$step} {
23
+ color: var(--color-neutral-#{$step});
24
+ }
113
25
  }
package/src/base/_layout.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  // This file contains the layout styles for the site, including grid and flexbox layouts.
2
2
  // It uses CSS custom properties for responsive design and theming.
3
3
 
4
+ @use 'sass:list';
5
+ @use 'sass:string';
6
+
4
7
  :root {
5
8
  --gap: clamp(1rem, 6vw, 3rem);
6
9
  --full: minmax(var(--gap), 1fr);
@@ -16,40 +19,26 @@
16
19
  padding-inline: 1rem;
17
20
  }
18
21
 
19
- // Breakout classes
20
- .full-bleed {
21
- width: 100vw;
22
- margin-left: 50%;
23
- transform: translateX(-50%);
24
- }
25
-
26
- .full-bleed--left {
27
- width: 100vw;
28
- margin-left: 0;
29
- transform: translateX(0);
30
- }
31
-
32
- .full-bleed--right {
33
- width: 100vw;
34
- margin-left: calc(-1 * (100vw - 100%) / 2);
35
- transform: translateX(calc(100% - 100vw));
36
- }
37
-
22
+ // Viewport-wide helpers outside the named grid, for a parent centered in the viewport.
23
+ // 100vw includes a classic scrollbar: pages using them may need `overflow-x: clip` on body.
24
+ // .breakout* are deprecated aliases of .full-bleed*, to be removed in the next major.
25
+ .full-bleed,
38
26
  .breakout {
39
27
  width: 100vw;
40
- margin-left: calc(-1 * (100vw - 100%) / 2);
28
+ margin-left: calc(50% - 50vw);
41
29
  }
42
30
 
31
+ // Viewport's left edge to the parent's right edge.
32
+ .full-bleed--left,
43
33
  .breakout--left {
44
- width: 100vw;
45
- margin-left: 0;
46
- transform: translateX(0);
34
+ width: calc(50% + 50vw);
35
+ margin-left: calc(50% - 50vw);
47
36
  }
48
37
 
38
+ // Parent's left edge to the viewport's right edge.
39
+ .full-bleed--right,
49
40
  .breakout--right {
50
- width: 100vw;
51
- margin-left: calc(-1 * (100vw - 100%) / 2);
52
- transform: translateX(calc(100% - 100vw));
41
+ width: calc(50% + 50vw);
53
42
  }
54
43
 
55
44
  // Breakouts Grid (named lines)
@@ -113,11 +102,51 @@
113
102
  grid-column: content-start / full-end;
114
103
  }
115
104
 
116
- .breakouts > .breakouts,
117
- .breakouts > .breakouts-grid,
118
- .breakouts-grid > .breakouts,
119
- .breakouts-grid > .breakouts-grid {
120
- grid-template-columns: inherit;
105
+ // Nested grids reuse the parent's tracks (subgrid), so their columns line up with the parent's.
106
+ // Outer lines the nested area does not span are named on its edges: .full inside a nested
107
+ // .feature fills that .feature. Without subgrid support a nested grid keeps its own tracks.
108
+ $-outer-lines: (popout, feature, full);
109
+
110
+ // Placement classes -> (start, end) level: 0 content, 1 popout, 2 feature, 3 full.
111
+ $-nested-areas: (
112
+ '*': (0, 0),
113
+ '.content': (0, 0),
114
+ '.popout': (1, 1),
115
+ '.popout-start, .popout-left': (1, 0),
116
+ '.popout-end, .popout-right': (0, 1),
117
+ '.feature': (2, 2),
118
+ '.feature-start, .feature-left': (2, 0),
119
+ '.feature-end, .feature-right': (0, 2),
120
+ '.full': (3, 3),
121
+ '.full-start, .full-left': (3, 0),
122
+ '.full-end, .full-right': (0, 3),
123
+ );
124
+
125
+ // Line names beyond $level on one side, e.g. (1, start) -> "[feature-start full-start]".
126
+ @function -edge-names($level, $side) {
127
+ $names: ();
128
+ @each $line in $-outer-lines {
129
+ @if list.index($-outer-lines, $line) > $level {
130
+ $names: list.append($names, string.unquote('#{$line}-#{$side}'), space);
131
+ }
132
+ }
133
+ @if list.length($names) == 0 {
134
+ @return '[]';
135
+ }
136
+ @return '[#{$names}]';
137
+ }
138
+
139
+ @each $classes, $levels in $-nested-areas {
140
+ $start: list.nth($levels, 1);
141
+ $end: list.nth($levels, 2);
142
+ $lines: -edge-names($start, start);
143
+ @for $i from 0 to $start + $end {
144
+ $lines: $lines + ' []';
145
+ }
146
+
147
+ :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(#{$classes}) {
148
+ grid-template-columns: subgrid #{$lines} #{-edge-names($end, end)};
149
+ }
121
150
  }
122
151
 
123
152
  // Standard Grid (for .grid and .grid--full compatibility)
package/src/base/_typography-base.scss CHANGED
@@ -44,3 +44,9 @@ a {
44
44
  color: var(--color-secondary);
45
45
  }
46
46
  }
47
+
48
+ // Rows of a breakouts grid are already spaced by row-gap; flow margins would add to it.
49
+ // Same specificity as the element rules above, so utilities like .my-4 still win.
50
+ :where(.breakouts, .breakouts-grid) > :is(h1, h2, h3, h4, h5, h6, p) {
51
+ margin-block: 0;
52
+ }
package/src/base/_variables.scss CHANGED
@@ -1,45 +1,49 @@
1
1
  // This file contains the default variables for the default theme.
2
+ // `-dark` values apply in dark mode, `-light` values in explicit light mode.
3
+
4
+ @use 'sass:color';
2
5
 
3
6
  // color variables
4
7
  $color-background: #ffffff !default;
5
8
  $color-background-dark: #111111 !default;
6
- $color-background-light: #ffffff !default;
9
+ $color-background-light: $color-background !default;
7
10
 
8
11
  $color-surface: #f0f0f0 !default;
9
12
  $color-surface-dark: #1a1a1a !default;
10
- $color-surface-light: #f8f8f8 !default;
13
+ $color-surface-light: $color-surface !default;
11
14
 
12
15
  $color-text: #111111 !default;
13
16
  $color-text-dark: #eeeeee !default;
14
- $color-text-light: #222222 !default;
17
+ $color-text-light: $color-text !default;
15
18
 
16
19
  $color-muted: #666666 !default;
17
20
  $color-muted-dark: #aaaaaa !default;
18
- $color-muted-light: #999999 !default;
21
+ $color-muted-light: $color-muted !default;
19
22
 
23
+ // Brand and status colors: dark mode uses a lighter tint, so it stays readable on dark backgrounds.
20
24
  $color-primary: #0055ff !default;
21
- $color-primary-dark: #0033aa !default;
22
- $color-primary-light: #88b0ff !default;
25
+ $color-primary-dark: color.scale($color-primary, $lightness: 50%) !default;
26
+ $color-primary-light: $color-primary !default;
23
27
 
24
28
  $color-secondary: #0033aa !default;
25
- $color-secondary-dark: #002277 !default;
26
- $color-secondary-light: #ccd9ff !default;
29
+ $color-secondary-dark: color.scale($color-secondary, $lightness: 50%) !default;
30
+ $color-secondary-light: $color-secondary !default;
27
31
 
28
32
  $color-accent: #ff4081 !default;
29
- $color-accent-dark: #c60055 !default;
30
- $color-accent-light: #ff80ab !default;
33
+ $color-accent-dark: color.scale($color-accent, $lightness: 50%) !default;
34
+ $color-accent-light: $color-accent !default;
31
35
 
32
36
  $color-success: #28a745 !default;
33
- $color-success-dark: #1e7e34 !default;
34
- $color-success-light: #71dd8a !default;
37
+ $color-success-dark: color.scale($color-success, $lightness: 50%) !default;
38
+ $color-success-light: $color-success !default;
35
39
 
36
40
  $color-error: #dc3545 !default;
37
- $color-error-dark: #a71d2a !default;
38
- $color-error-light: #ff6b6b !default;
41
+ $color-error-dark: color.scale($color-error, $lightness: 50%) !default;
42
+ $color-error-light: $color-error !default;
39
43
 
40
44
  $color-warning: #ffc107 !default;
41
- $color-warning-dark: #c79100 !default;
42
- $color-warning-light: #ffdb4d !default;
45
+ $color-warning-dark: color.scale($color-warning, $lightness: 50%) !default;
46
+ $color-warning-light: $color-warning !default;
43
47
 
44
48
  $color-neutral-100: #f8f9fa !default;
45
49
  $color-neutral-200: #e9ecef !default;
@@ -50,4 +54,3 @@ $color-neutral-600: #6c757d !default;
50
54
  $color-neutral-700: #495057 !default;
51
55
  $color-neutral-800: #343a40 !default;
52
56
  $color-neutral-900: #212529 !default;
53
-
package/src/base.scss CHANGED
@@ -1,5 +1,7 @@
1
- // Optional base element styles, without utility classes.
1
+ // Optional base element styles, without utility classes: settings, generic, elements, objects.
2
2
 
3
- @forward 'core';
3
+ @forward 'base/variables';
4
+ @forward 'base/color-tokens';
4
5
  @forward 'base/reset';
5
6
  @forward 'base/typography-base';
7
+ @forward 'base/layout';
package/src/theme/_chupa-pop.scss CHANGED
@@ -4,28 +4,19 @@
4
4
  // The theme variables are used to customize the appearance of the Chupa Pop theme.
5
5
  // The theme variables are defined using the SCSS @use and @forward directives.
6
6
 
7
- @use 'sass:color';
8
-
9
7
  $primary: #ecb838 !default;
10
8
  $secondary: #ab4073 !default;
11
9
  $accent: #196484 !default;
12
10
 
13
11
  @forward '../base/variables' with (
14
12
  $color-primary: $primary,
15
- $color-primary-dark: color.adjust($primary, $lightness: -15%),
16
- $color-primary-light: color.adjust($primary, $lightness: 15%),
17
-
18
13
  $color-secondary: $secondary,
19
- $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
20
- $color-secondary-light: color.adjust($secondary, $lightness: 15%),
21
-
22
14
  $color-accent: $accent,
23
- $color-accent-dark: color.adjust($accent, $lightness: -15%),
24
- $color-accent-light: color.adjust($accent, $lightness: 15%),
25
15
  );
26
16
 
27
- @use '../base/variables' as *;
28
- @forward '../base/colors';
17
+ @forward '../base/color-tokens';
29
18
  @forward '../base/reset';
30
- @forward '../base/typography';
19
+ @forward '../base/typography-base';
31
20
  @forward '../base/layout';
21
+ @forward '../base/color-utilities';
22
+ @forward '../base/typography-utilities';
package/src/theme/_medical.scss CHANGED
@@ -4,38 +4,23 @@
4
4
  // The theme variables are used to customize the appearance of the Medical theme.
5
5
  // The theme variables are defined using the SCSS @use and @forward directives.
6
6
 
7
- @use 'sass:color';
8
-
9
7
  $primary: #4682B4 !default;
10
8
  $secondary: #9DC183 !default;
11
9
  $accent: #A9A9A9 !default;
12
- $muted: #D3D3D3 !default;
10
+ $muted: #6B7280 !default;
13
11
  $background: #FFFFFF !default;
14
12
 
15
13
  @forward '../base/variables' with (
16
14
  $color-primary: $primary,
17
- $color-primary-dark: color.adjust($primary, $lightness: -15%),
18
- $color-primary-light: color.adjust($primary, $lightness: 15%),
19
-
20
15
  $color-secondary: $secondary,
21
- $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
22
- $color-secondary-light: color.adjust($secondary, $lightness: 15%),
23
-
24
16
  $color-accent: $accent,
25
- $color-accent-dark: color.adjust($accent, $lightness: -15%),
26
- $color-accent-light: color.adjust($accent, $lightness: 15%),
27
-
28
17
  $color-muted: $muted,
29
- $color-muted-dark: color.adjust($muted, $lightness: -15%),
30
- $color-muted-light: color.adjust($muted, $lightness: 15%),
31
-
32
- $color-background: $background,
33
- $color-background-dark: color.adjust($background, $lightness: -5%),
34
- $color-background-light: color.adjust($background, $lightness: 5%)
18
+ $color-background: $background
35
19
  );
36
20
 
37
- @use '../base/variables' as *;
38
- @forward '../base/colors';
21
+ @forward '../base/color-tokens';
39
22
  @forward '../base/reset';
40
- @forward '../base/typography';
23
+ @forward '../base/typography-base';
41
24
  @forward '../base/layout';
25
+ @forward '../base/color-utilities';
26
+ @forward '../base/typography-utilities';
package/src/theme/_tootsie-pop.scss CHANGED
@@ -11,31 +11,23 @@ $secondary: #F2711C !default;
11
11
  $accent: #E94057 !default;
12
12
  $muted: #FFE5B4 !default;
13
13
  $background: #4F2F4C !default;
14
+ // Dark background in every mode, so text stays light in every mode.
15
+ $text: #FFF5E6 !default;
14
16
 
15
17
  @forward '../base/variables' with (
16
18
  $color-primary: $primary,
17
- $color-primary-dark: color.adjust($primary, $lightness: -15%),
18
- $color-primary-light: color.adjust($primary, $lightness: 15%),
19
-
20
19
  $color-secondary: $secondary,
21
- $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
22
- $color-secondary-light: color.adjust($secondary, $lightness: 15%),
23
-
24
20
  $color-accent: $accent,
25
- $color-accent-dark: color.adjust($accent, $lightness: -15%),
26
- $color-accent-light: color.adjust($accent, $lightness: 15%),
27
-
28
21
  $color-muted: $muted,
29
- $color-muted-dark: color.adjust($muted, $lightness: -15%),
30
- $color-muted-light: color.adjust($muted, $lightness: 15%),
31
-
22
+ $color-text: $text,
23
+ $color-text-dark: $text,
32
24
  $color-background: $background,
33
25
  $color-background-dark: color.adjust($background, $lightness: -5%),
34
- $color-background-light: color.adjust($background, $lightness: 5%)
35
26
  );
36
27
 
37
- @use '../base/variables' as *;
38
- @forward '../base/colors';
28
+ @forward '../base/color-tokens';
39
29
  @forward '../base/reset';
40
- @forward '../base/typography';
30
+ @forward '../base/typography-base';
41
31
  @forward '../base/layout';
32
+ @forward '../base/color-utilities';
33
+ @forward '../base/typography-utilities';