breakouts 0.5.6 → 0.5.8
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.
- package/README.md +11 -1
- package/dist/breakouts.css +100 -0
- package/dist/breakouts.css.map +1 -1
- package/dist/breakouts.min.css +1 -1
- package/dist/breakouts.min.css.map +1 -1
- package/package.json +1 -1
- package/src/base/_colors.scss +40 -0
- package/src/base/_spacing.scss +2 -1
- package/src/base/_variables.scss +12 -0
package/README.md
CHANGED
|
@@ -101,7 +101,8 @@ $space-scale: (
|
|
|
101
101
|
3: 0.75rem,
|
|
102
102
|
4: 1rem,
|
|
103
103
|
5: 1.25rem,
|
|
104
|
-
6: 1.5rem
|
|
104
|
+
6: 1.5rem,
|
|
105
|
+
auto: auto
|
|
105
106
|
);
|
|
106
107
|
```
|
|
107
108
|
|
|
@@ -127,6 +128,9 @@ The following tokens are always available:
|
|
|
127
128
|
- `--color-primary`
|
|
128
129
|
- `--color-secondary`
|
|
129
130
|
- `--color-accent`
|
|
131
|
+
- `--color-success`
|
|
132
|
+
- `--color-error`
|
|
133
|
+
- `--color-warning`
|
|
130
134
|
- `--color-neutral-100`
|
|
131
135
|
- `--color-neutral-200`
|
|
132
136
|
- `--color-neutral-300`
|
|
@@ -147,6 +151,9 @@ The following tokens are always available:
|
|
|
147
151
|
| `.bg-primary` | `background-color: var(--color-primary)` |
|
|
148
152
|
| `.bg-secondary` | `background-color: var(--color-secondary)` |
|
|
149
153
|
| `.bg-accent` | `background-color: var(--color-accent)` |
|
|
154
|
+
| `.bg-success` | `background-color: var(--color-success)` |
|
|
155
|
+
| `.bg-error` | `background-color: var(--color-error)` |
|
|
156
|
+
| `.bg-warning` | `background-color: var(--color-warning)` |
|
|
150
157
|
|
|
151
158
|
#### Text colors
|
|
152
159
|
|
|
@@ -157,6 +164,9 @@ The following tokens are always available:
|
|
|
157
164
|
| `.text-accent` | `color: var(--color-accent)` |
|
|
158
165
|
| `.text-surface` | `color: var(--color-surface)` |
|
|
159
166
|
| `.text-muted` | `color: var(--color-muted)` |
|
|
167
|
+
| `.text-success` | `color: var(--color-success)` |
|
|
168
|
+
| `.text-error` | `color: var(--color-error)` |
|
|
169
|
+
| `.text-warning` | `color: var(--color-warning)` |
|
|
160
170
|
| `.text-neutral-100`| `color: var(--color-neutral-100)` |
|
|
161
171
|
| `.text-neutral-200`| `color: var(--color-neutral-200)` |
|
|
162
172
|
| `.text-neutral-300`| `color: var(--color-neutral-300)` |
|
package/dist/breakouts.css
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
--color-primary: #0055ff;
|
|
7
7
|
--color-secondary: #0033aa;
|
|
8
8
|
--color-accent: #ff4081;
|
|
9
|
+
--color-success: #28a745;
|
|
10
|
+
--color-error: #dc3545;
|
|
11
|
+
--color-warning: #ffc107;
|
|
9
12
|
--color-neutral-100: #f8f9fa;
|
|
10
13
|
--color-neutral-200: #e9ecef;
|
|
11
14
|
--color-neutral-300: #dee2e6;
|
|
@@ -26,6 +29,9 @@
|
|
|
26
29
|
--color-primary: #0033aa;
|
|
27
30
|
--color-secondary: #002277;
|
|
28
31
|
--color-accent: #c60055;
|
|
32
|
+
--color-success: #1e7e34;
|
|
33
|
+
--color-error: #a71d2a;
|
|
34
|
+
--color-warning: #c79100;
|
|
29
35
|
}
|
|
30
36
|
|
|
31
37
|
.light,
|
|
@@ -37,6 +43,9 @@
|
|
|
37
43
|
--color-primary: #88b0ff;
|
|
38
44
|
--color-secondary: #ccd9ff;
|
|
39
45
|
--color-accent: #ff80ab;
|
|
46
|
+
--color-success: #71dd8a;
|
|
47
|
+
--color-error: #ff6b6b;
|
|
48
|
+
--color-warning: #ffdb4d;
|
|
40
49
|
}
|
|
41
50
|
|
|
42
51
|
@media (prefers-color-scheme: dark) {
|
|
@@ -48,6 +57,9 @@
|
|
|
48
57
|
--color-primary: #0033aa;
|
|
49
58
|
--color-secondary: #002277;
|
|
50
59
|
--color-accent: #c60055;
|
|
60
|
+
--color-success: #1e7e34;
|
|
61
|
+
--color-error: #a71d2a;
|
|
62
|
+
--color-warning: #c79100;
|
|
51
63
|
}
|
|
52
64
|
}
|
|
53
65
|
.bg-surface {
|
|
@@ -66,6 +78,22 @@
|
|
|
66
78
|
background-color: var(--color-accent);
|
|
67
79
|
}
|
|
68
80
|
|
|
81
|
+
.bg-muted {
|
|
82
|
+
background-color: var(--color-muted);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.bg-success {
|
|
86
|
+
background-color: var(--color-success);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.bg-error {
|
|
90
|
+
background-color: var(--color-error);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.bg-warning {
|
|
94
|
+
background-color: var(--color-warning);
|
|
95
|
+
}
|
|
96
|
+
|
|
69
97
|
.text-primary {
|
|
70
98
|
color: var(--color-primary);
|
|
71
99
|
}
|
|
@@ -86,6 +114,18 @@
|
|
|
86
114
|
color: var(--color-muted);
|
|
87
115
|
}
|
|
88
116
|
|
|
117
|
+
.text-success {
|
|
118
|
+
color: var(--color-success);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.text-error {
|
|
122
|
+
color: var(--color-error);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.text-warning {
|
|
126
|
+
color: var(--color-warning);
|
|
127
|
+
}
|
|
128
|
+
|
|
89
129
|
.text-neutral-100 {
|
|
90
130
|
color: var(--color-neutral-100);
|
|
91
131
|
}
|
|
@@ -564,6 +604,66 @@ body {
|
|
|
564
604
|
padding-bottom: 1.5rem;
|
|
565
605
|
}
|
|
566
606
|
|
|
607
|
+
.m-auto {
|
|
608
|
+
margin: auto;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.mt-auto {
|
|
612
|
+
margin-top: auto;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.mr-auto {
|
|
616
|
+
margin-right: auto;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.mb-auto {
|
|
620
|
+
margin-bottom: auto;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.ml-auto {
|
|
624
|
+
margin-left: auto;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.mx-auto {
|
|
628
|
+
margin-left: auto;
|
|
629
|
+
margin-right: auto;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.my-auto {
|
|
633
|
+
margin-top: auto;
|
|
634
|
+
margin-bottom: auto;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.p-auto {
|
|
638
|
+
padding: auto;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.pt-auto {
|
|
642
|
+
padding-top: auto;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.pr-auto {
|
|
646
|
+
padding-right: auto;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.pb-auto {
|
|
650
|
+
padding-bottom: auto;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.pl-auto {
|
|
654
|
+
padding-left: auto;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.px-auto {
|
|
658
|
+
padding-left: auto;
|
|
659
|
+
padding-right: auto;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.py-auto {
|
|
663
|
+
padding-top: auto;
|
|
664
|
+
padding-bottom: auto;
|
|
665
|
+
}
|
|
666
|
+
|
|
567
667
|
.position-static {
|
|
568
668
|
position: static;
|
|
569
669
|
}
|
package/dist/breakouts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;;AAMR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.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-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}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@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}}.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)}.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-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%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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-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];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.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}.dark,.dark :root{--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}.light,.light :root{--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}@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}}.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-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%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}.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-auto{padding:auto}.pt-auto{padding-top:auto}.pr-auto{padding-right:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.px-auto{padding-left:auto;padding-right:auto}.py-auto{padding-top:auto;padding-bottom:auto}.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-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];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.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 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"AAIA,MACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
|
package/package.json
CHANGED
package/src/base/_colors.scss
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
--color-primary: #{$color-primary};
|
|
11
11
|
--color-secondary: #{$color-secondary};
|
|
12
12
|
--color-accent: #{$color-accent};
|
|
13
|
+
--color-success: #{$color-success};
|
|
14
|
+
--color-error: #{$color-error};
|
|
15
|
+
--color-warning: #{$color-warning};
|
|
13
16
|
|
|
14
17
|
--color-neutral-100: #{$color-neutral-100};
|
|
15
18
|
--color-neutral-200: #{$color-neutral-200};
|
|
@@ -31,6 +34,9 @@
|
|
|
31
34
|
--color-primary: #{$color-primary-dark};
|
|
32
35
|
--color-secondary: #{$color-secondary-dark};
|
|
33
36
|
--color-accent: #{$color-accent-dark};
|
|
37
|
+
--color-success: #{$color-success-dark};
|
|
38
|
+
--color-error: #{$color-error-dark};
|
|
39
|
+
--color-warning: #{$color-warning-dark};
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
.light,
|
|
@@ -42,6 +48,9 @@
|
|
|
42
48
|
--color-primary: #{$color-primary-light};
|
|
43
49
|
--color-secondary: #{$color-secondary-light};
|
|
44
50
|
--color-accent: #{$color-accent-light};
|
|
51
|
+
--color-success: #{$color-success-light};
|
|
52
|
+
--color-error: #{$color-error-light};
|
|
53
|
+
--color-warning: #{$color-warning-light};
|
|
45
54
|
}
|
|
46
55
|
|
|
47
56
|
@media (prefers-color-scheme: dark) {
|
|
@@ -53,6 +62,9 @@
|
|
|
53
62
|
--color-primary: #{$color-primary-dark};
|
|
54
63
|
--color-secondary: #{$color-secondary-dark};
|
|
55
64
|
--color-accent: #{$color-accent-dark};
|
|
65
|
+
--color-success: #{$color-success-dark};
|
|
66
|
+
--color-error: #{$color-error-dark};
|
|
67
|
+
--color-warning: #{$color-warning-dark};
|
|
56
68
|
}
|
|
57
69
|
}
|
|
58
70
|
|
|
@@ -74,6 +86,22 @@
|
|
|
74
86
|
background-color: var(--color-accent);
|
|
75
87
|
}
|
|
76
88
|
|
|
89
|
+
.bg-muted {
|
|
90
|
+
background-color: var(--color-muted);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.bg-success {
|
|
94
|
+
background-color: var(--color-success);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.bg-error {
|
|
98
|
+
background-color: var(--color-error);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.bg-warning {
|
|
102
|
+
background-color: var(--color-warning);
|
|
103
|
+
}
|
|
104
|
+
|
|
77
105
|
.text-primary {
|
|
78
106
|
color: var(--color-primary);
|
|
79
107
|
}
|
|
@@ -94,6 +122,18 @@
|
|
|
94
122
|
color: var(--color-muted);
|
|
95
123
|
}
|
|
96
124
|
|
|
125
|
+
.text-success {
|
|
126
|
+
color: var(--color-success);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.text-error {
|
|
130
|
+
color: var(--color-error);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.text-warning {
|
|
134
|
+
color: var(--color-warning);
|
|
135
|
+
}
|
|
136
|
+
|
|
97
137
|
.text-neutral-100 {
|
|
98
138
|
color: var(--color-neutral-100);
|
|
99
139
|
}
|
package/src/base/_spacing.scss
CHANGED
package/src/base/_variables.scss
CHANGED
|
@@ -29,6 +29,18 @@ $color-accent: #ff4081 !default;
|
|
|
29
29
|
$color-accent-dark: #c60055 !default;
|
|
30
30
|
$color-accent-light: #ff80ab !default;
|
|
31
31
|
|
|
32
|
+
$color-success: #28a745 !default;
|
|
33
|
+
$color-success-dark: #1e7e34 !default;
|
|
34
|
+
$color-success-light: #71dd8a !default;
|
|
35
|
+
|
|
36
|
+
$color-error: #dc3545 !default;
|
|
37
|
+
$color-error-dark: #a71d2a !default;
|
|
38
|
+
$color-error-light: #ff6b6b !default;
|
|
39
|
+
|
|
40
|
+
$color-warning: #ffc107 !default;
|
|
41
|
+
$color-warning-dark: #c79100 !default;
|
|
42
|
+
$color-warning-light: #ffdb4d !default;
|
|
43
|
+
|
|
32
44
|
$color-neutral-100: #f8f9fa !default;
|
|
33
45
|
$color-neutral-200: #e9ecef !default;
|
|
34
46
|
$color-neutral-300: #dee2e6 !default;
|