breakouts 0.7.2 → 0.7.4

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 (22) hide show
  1. package/README.md +23 -0
  2. package/dist/breakouts.css +196 -227
  3. package/dist/breakouts.css.map +1 -1
  4. package/dist/breakouts.min.css +1 -1
  5. package/dist/breakouts.min.css.map +1 -1
  6. package/package.json +1 -1
  7. package/src/_index.scss +2 -3
  8. package/src/base/_color-tokens.scss +75 -0
  9. package/src/base/_color-utilities.scss +113 -0
  10. package/src/base/_colors.scss +3 -188
  11. package/src/base/_reset.scss +0 -1
  12. package/src/base/_spacing.scss +13 -4
  13. package/src/base/_typography-base.scss +46 -0
  14. package/src/base/_typography-utilities.scss +57 -0
  15. package/src/base/_typography.scss +3 -109
  16. package/src/base.scss +5 -0
  17. package/src/core.scss +5 -0
  18. package/src/reset.scss +3 -0
  19. package/src/theme/_chupa-pop.scss +9 -7
  20. package/src/theme/_medical.scss +13 -11
  21. package/src/theme/_tootsie-pop.scss +13 -11
  22. package/src/utilities.scss +6 -0
package/src/base/_color-tokens.scss ADDED
@@ -0,0 +1,75 @@
1
+ // Color custom properties and color-mode selectors.
2
+
3
+ @use 'variables' as *;
4
+
5
+ :root {
6
+ --color-background: #{$color-background};
7
+ --color-surface: #{$color-surface};
8
+ --color-text: #{$color-text};
9
+ --color-muted: #{$color-muted};
10
+ --color-primary: #{$color-primary};
11
+ --color-secondary: #{$color-secondary};
12
+ --color-accent: #{$color-accent};
13
+ --color-success: #{$color-success};
14
+ --color-error: #{$color-error};
15
+ --color-warning: #{$color-warning};
16
+
17
+ --color-neutral-100: #{$color-neutral-100};
18
+ --color-neutral-200: #{$color-neutral-200};
19
+ --color-neutral-300: #{$color-neutral-300};
20
+ --color-neutral-400: #{$color-neutral-400};
21
+ --color-neutral-500: #{$color-neutral-500};
22
+ --color-neutral-600: #{$color-neutral-600};
23
+ --color-neutral-700: #{$color-neutral-700};
24
+ --color-neutral-800: #{$color-neutral-800};
25
+ --color-neutral-900: #{$color-neutral-900};
26
+ color-scheme: light;
27
+ }
28
+
29
+ html.dark,
30
+ :root.dark,
31
+ .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;
43
+ }
44
+
45
+ html.light,
46
+ :root.light,
47
+ .light {
48
+ --color-background: #{$color-background-light};
49
+ --color-surface: #{$color-surface-light};
50
+ --color-text: #{$color-text-light};
51
+ --color-muted: #{$color-muted-light};
52
+ --color-primary: #{$color-primary-light};
53
+ --color-secondary: #{$color-secondary-light};
54
+ --color-accent: #{$color-accent-light};
55
+ --color-success: #{$color-success-light};
56
+ --color-error: #{$color-error-light};
57
+ --color-warning: #{$color-warning-light};
58
+ color-scheme: light;
59
+ }
60
+
61
+ @media (prefers-color-scheme: dark) {
62
+ :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;
74
+ }
75
+ }
package/src/base/_color-utilities.scss ADDED
@@ -0,0 +1,113 @@
1
+ // Utility classes for background and text colors.
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
+ }
34
+
35
+ .bg-warning {
36
+ background-color: var(--color-warning);
37
+ }
38
+
39
+ .text-background {
40
+ color: var(--color-background);
41
+ }
42
+
43
+ .text-color {
44
+ color: var(--color-text);
45
+ }
46
+
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);
109
+ }
110
+
111
+ .text-neutral-900 {
112
+ color: var(--color-neutral-900);
113
+ }
package/src/base/_colors.scss CHANGED
@@ -1,189 +1,4 @@
1
- // This file contains the color variables and utility classes for the project.
1
+ // Compatibility module: color tokens plus color utilities.
2
2
 
3
- @use 'variables'as *;
4
-
5
- :root {
6
- --color-background: #{$color-background};
7
- --color-surface: #{$color-surface};
8
- --color-text: #{$color-text};
9
- --color-muted: #{$color-muted};
10
- --color-primary: #{$color-primary};
11
- --color-secondary: #{$color-secondary};
12
- --color-accent: #{$color-accent};
13
- --color-success: #{$color-success};
14
- --color-error: #{$color-error};
15
- --color-warning: #{$color-warning};
16
-
17
- --color-neutral-100: #{$color-neutral-100};
18
- --color-neutral-200: #{$color-neutral-200};
19
- --color-neutral-300: #{$color-neutral-300};
20
- --color-neutral-400: #{$color-neutral-400};
21
- --color-neutral-500: #{$color-neutral-500};
22
- --color-neutral-600: #{$color-neutral-600};
23
- --color-neutral-700: #{$color-neutral-700};
24
- --color-neutral-800: #{$color-neutral-800};
25
- --color-neutral-900: #{$color-neutral-900};
26
- color-scheme: light;
27
- }
28
-
29
- html.dark,
30
- :root.dark,
31
- .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;
43
- }
44
-
45
- html.light,
46
- :root.light,
47
- .light {
48
- --color-background: #{$color-background-light};
49
- --color-surface: #{$color-surface-light};
50
- --color-text: #{$color-text-light};
51
- --color-muted: #{$color-muted-light};
52
- --color-primary: #{$color-primary-light};
53
- --color-secondary: #{$color-secondary-light};
54
- --color-accent: #{$color-accent-light};
55
- --color-success: #{$color-success-light};
56
- --color-error: #{$color-error-light};
57
- --color-warning: #{$color-warning-light};
58
- color-scheme: light;
59
- }
60
-
61
- @media (prefers-color-scheme: dark) {
62
- :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;
74
- }
75
- }
76
-
77
- // Utility classes for background and text colors
78
-
79
- .bg-background {
80
- background-color: var(--color-background);
81
- }
82
-
83
- .bg-surface {
84
- background-color: var(--color-surface);
85
- }
86
-
87
- .bg-primary {
88
- background-color: var(--color-primary);
89
- }
90
-
91
- .bg-secondary {
92
- background-color: var(--color-secondary);
93
- }
94
-
95
- .bg-accent {
96
- background-color: var(--color-accent);
97
- }
98
-
99
- .bg-muted {
100
- background-color: var(--color-muted);
101
- }
102
-
103
- .bg-success {
104
- background-color: var(--color-success);
105
- }
106
-
107
- .bg-error {
108
- background-color: var(--color-error);
109
- }
110
-
111
- .bg-warning {
112
- background-color: var(--color-warning);
113
- }
114
-
115
- .text-background {
116
- color: var(--color-background);
117
- }
118
-
119
- .text-color {
120
- color: var(--color-text);
121
- }
122
-
123
- .text-primary {
124
- color: var(--color-primary);
125
- }
126
-
127
- .text-accent {
128
- color: var(--color-accent);
129
- }
130
-
131
- .text-secondary {
132
- color: var(--color-secondary);
133
- }
134
-
135
- .text-surface {
136
- color: var(--color-surface);
137
- }
138
-
139
- .text-muted {
140
- color: var(--color-muted);
141
- }
142
-
143
- .text-success {
144
- color: var(--color-success);
145
- }
146
-
147
- .text-error {
148
- color: var(--color-error);
149
- }
150
-
151
- .text-warning {
152
- color: var(--color-warning);
153
- }
154
-
155
- .text-neutral-100 {
156
- color: var(--color-neutral-100);
157
- }
158
-
159
- .text-neutral-200 {
160
- color: var(--color-neutral-200);
161
- }
162
-
163
- .text-neutral-300 {
164
- color: var(--color-neutral-300);
165
- }
166
-
167
- .text-neutral-400 {
168
- color: var(--color-neutral-400);
169
- }
170
-
171
- .text-neutral-500 {
172
- color: var(--color-neutral-500);
173
- }
174
-
175
- .text-neutral-600 {
176
- color: var(--color-neutral-600);
177
- }
178
-
179
- .text-neutral-700 {
180
- color: var(--color-neutral-700);
181
- }
182
-
183
- .text-neutral-800 {
184
- color: var(--color-neutral-800);
185
- }
186
-
187
- .text-neutral-900 {
188
- color: var(--color-neutral-900);
189
- }
3
+ @forward 'color-tokens';
4
+ @forward 'color-utilities';
package/src/base/_reset.scss CHANGED
@@ -14,5 +14,4 @@ body {
14
14
  margin: 0;
15
15
  padding: 0;
16
16
  width: 100%;
17
- overflow-x: hidden;
18
17
  }
package/src/base/_spacing.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // This file contains the spacing variables and utility classes for the project.
2
2
 
3
+ @use 'sass:map';
3
4
  @use 'sass:meta';
4
5
 
5
6
  $space-scale: (0: 0,
@@ -11,14 +12,15 @@ $space-scale: (0: 0,
11
12
  6: 1.5rem,
12
13
  auto: auto) !default;
13
14
 
14
- $spacing-properties: (m: margin,
15
+ $margin-properties: (m: margin,
15
16
  mt: margin-top,
16
17
  mr: margin-right,
17
18
  mb: margin-bottom,
18
19
  ml: margin-left,
19
20
  mx: (margin-left, margin-right),
20
- my: (margin-top, margin-bottom),
21
+ my: (margin-top, margin-bottom));
21
22
 
23
+ $padding-properties: (
22
24
  p: padding,
23
25
  pt: padding-top,
24
26
  pr: padding-right,
@@ -27,11 +29,14 @@ $spacing-properties: (m: margin,
27
29
  px: (padding-left, padding-right),
28
30
  py: (padding-top, padding-bottom));
29
31
 
32
+ $padding-space-scale: map.remove($space-scale, auto);
33
+
34
+ @mixin generate-spacing-utilities($scale, $properties-map) {
30
35
  @each $name,
31
- $value in $space-scale {
36
+ $value in $scale {
32
37
 
33
38
  @each $prefix,
34
- $properties in $spacing-properties {
39
+ $properties in $properties-map {
35
40
  .#{$prefix}-#{$name} {
36
41
  @if meta.type-of($properties)=='list' {
37
42
  @each $prop in $properties {
@@ -45,3 +50,7 @@ $value in $space-scale {
45
50
  }
46
51
  }
47
52
  }
53
+ }
54
+
55
+ @include generate-spacing-utilities($space-scale, $margin-properties);
56
+ @include generate-spacing-utilities($padding-space-scale, $padding-properties);
package/src/base/_typography-base.scss ADDED
@@ -0,0 +1,46 @@
1
+ // Base typography styles.
2
+
3
+ $font-family-base: system-ui,
4
+ sans-serif !default;
5
+ $font-size-base: 1rem !default;
6
+ $line-height-base: 1.6 !default;
7
+
8
+ $headings: (h1: 2.25rem,
9
+ h2: 1.75rem,
10
+ h3: 1.5rem,
11
+ h4: 1.25rem,
12
+ h5: 1.125rem,
13
+ h6: 1rem) !default;
14
+
15
+ body {
16
+ font-family: $font-family-base;
17
+ font-size: $font-size-base;
18
+ line-height: $line-height-base;
19
+ color: var(--color-text);
20
+ background-color: var(--color-background);
21
+ margin: 0;
22
+ }
23
+
24
+ @each $heading,
25
+ $size in $headings {
26
+ #{$heading} {
27
+ font-size: $size;
28
+ line-height: 1.2;
29
+ margin: 2rem 0 1rem;
30
+ font-weight: 600;
31
+ color: var(--color-text);
32
+ }
33
+ }
34
+
35
+ p {
36
+ margin: 1rem 0;
37
+ }
38
+
39
+ a {
40
+ color: var(--color-primary);
41
+ text-decoration: underline;
42
+
43
+ &:hover {
44
+ color: var(--color-secondary);
45
+ }
46
+ }
package/src/base/_typography-utilities.scss ADDED
@@ -0,0 +1,57 @@
1
+ // Typography utility classes.
2
+
3
+ .text-left {
4
+ text-align: left;
5
+ }
6
+
7
+ .text-center {
8
+ text-align: center;
9
+ }
10
+
11
+ .text-right {
12
+ text-align: right;
13
+ }
14
+
15
+ .text-justify {
16
+ text-align: justify;
17
+ }
18
+
19
+ .text-uppercase {
20
+ text-transform: uppercase;
21
+ }
22
+
23
+ .text-lowercase {
24
+ text-transform: lowercase;
25
+ }
26
+
27
+ .text-capitalize {
28
+ text-transform: capitalize;
29
+ }
30
+
31
+ .font-bold {
32
+ font-weight: bold;
33
+ }
34
+
35
+ .font-normal {
36
+ font-weight: normal;
37
+ }
38
+
39
+ .italic {
40
+ font-style: italic;
41
+ }
42
+
43
+ .not-italic {
44
+ font-style: normal;
45
+ }
46
+
47
+ .leading-tight {
48
+ line-height: 1.25;
49
+ }
50
+
51
+ .leading-normal {
52
+ line-height: 1.5;
53
+ }
54
+
55
+ .leading-loose {
56
+ line-height: 2;
57
+ }
package/src/base/_typography.scss CHANGED
@@ -1,110 +1,4 @@
1
- // This file contains the typography variables and utility classes for the project.
1
+ // Compatibility module: base typography plus typography utilities.
2
2
 
3
-
4
- // Default font settings
5
- $font-family-base: system-ui,
6
- sans-serif !default;
7
- $font-size-base: 1rem !default;
8
- $line-height-base: 1.6 !default;
9
-
10
- // Heading scale
11
- $headings: (h1: 2.25rem,
12
- h2: 1.75rem,
13
- h3: 1.5rem,
14
- h4: 1.25rem,
15
- h5: 1.125rem,
16
- h6: 1rem) !default;
17
-
18
- body {
19
- font-family: $font-family-base;
20
- font-size: $font-size-base;
21
- line-height: $line-height-base;
22
- color: var(--color-text);
23
- background-color: var(--color-background);
24
- margin: 0;
25
- }
26
-
27
- // Headings
28
- @each $heading,
29
- $size in $headings {
30
- #{$heading} {
31
- font-size: $size;
32
- line-height: 1.2;
33
- margin: 2rem 0 1rem;
34
- font-weight: 600;
35
- color: var(--color-text);
36
- }
37
- }
38
-
39
- p {
40
- margin: 1rem 0;
41
- }
42
-
43
- a {
44
- color: var(--color-primary);
45
- text-decoration: underline;
46
-
47
- &:hover {
48
- color: var(--color-secondary);
49
- }
50
- }
51
-
52
- // Text alignment utilities
53
- .text-left {
54
- text-align: left;
55
- }
56
-
57
- .text-center {
58
- text-align: center;
59
- }
60
-
61
- .text-right {
62
- text-align: right;
63
- }
64
-
65
- .text-justify {
66
- text-align: justify;
67
- }
68
-
69
- // Text transformation utilities
70
- .text-uppercase {
71
- text-transform: uppercase;
72
- }
73
-
74
- .text-lowercase {
75
- text-transform: lowercase;
76
- }
77
-
78
- .text-capitalize {
79
- text-transform: capitalize;
80
- }
81
-
82
- // Font style and weight
83
- .font-bold {
84
- font-weight: bold;
85
- }
86
-
87
- .font-normal {
88
- font-weight: normal;
89
- }
90
-
91
- .italic {
92
- font-style: italic;
93
- }
94
-
95
- .not-italic {
96
- font-style: normal;
97
- }
98
-
99
- // Line height utilities
100
- .leading-tight {
101
- line-height: 1.25;
102
- }
103
-
104
- .leading-normal {
105
- line-height: 1.5;
106
- }
107
-
108
- .leading-loose {
109
- line-height: 2;
110
- }
3
+ @forward 'typography-base';
4
+ @forward 'typography-utilities';
package/src/base.scss ADDED
@@ -0,0 +1,5 @@
1
+ // Optional base element styles, without utility classes.
2
+
3
+ @forward 'core';
4
+ @forward 'base/reset';
5
+ @forward 'base/typography-base';
package/src/core.scss ADDED
@@ -0,0 +1,5 @@
1
+ // Core Breakouts API: color tokens and layout primitives only.
2
+
3
+ @forward 'base/variables';
4
+ @forward 'base/color-tokens';
5
+ @forward 'base/layout';
package/src/reset.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Optional reset layer.
2
+
3
+ @forward 'base/reset';
package/src/theme/_chupa-pop.scss CHANGED
@@ -4,26 +4,28 @@
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
+
7
9
  $primary: #ecb838 !default;
8
10
  $secondary: #ab4073 !default;
9
11
  $accent: #196484 !default;
10
12
 
11
13
  @forward '../base/variables' with (
12
14
  $color-primary: $primary,
13
- $color-primary-dark: darken($primary, 15%),
14
- $color-primary-light: lighten($primary, 15%),
15
+ $color-primary-dark: color.adjust($primary, $lightness: -15%),
16
+ $color-primary-light: color.adjust($primary, $lightness: 15%),
15
17
 
16
18
  $color-secondary: $secondary,
17
- $color-secondary-dark: darken($secondary, 15%),
18
- $color-secondary-light: lighten($secondary, 15%),
19
+ $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
20
+ $color-secondary-light: color.adjust($secondary, $lightness: 15%),
19
21
 
20
22
  $color-accent: $accent,
21
- $color-accent-dark: darken($accent, 15%),
22
- $color-accent-light: lighten($accent, 15%),
23
+ $color-accent-dark: color.adjust($accent, $lightness: -15%),
24
+ $color-accent-light: color.adjust($accent, $lightness: 15%),
23
25
  );
24
26
 
25
27
  @use '../base/variables' as *;
26
28
  @forward '../base/colors';
27
29
  @forward '../base/reset';
28
30
  @forward '../base/typography';
29
- @forward '../base/layout';
31
+ @forward '../base/layout';