@shohojdhara/atomix 0.6.6 → 0.6.7
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/dist/atomix.css +658 -656
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +45 -45
- package/dist/atomix.min.css.map +1 -1
- package/package.json +1 -1
- package/src/layouts/Grid/Grid.stories.tsx +54 -2
- package/src/layouts/Grid/README.md +6 -2
- package/src/styles/01-settings/_settings.colors.scss +73 -73
- package/src/styles/05-objects/_objects.grid.scss +4 -1
package/package.json
CHANGED
|
@@ -670,13 +670,47 @@ export const AlignmentAndSpacing: Story = {
|
|
|
670
670
|
</div>
|
|
671
671
|
</div>
|
|
672
672
|
|
|
673
|
+
{/* Row Gap */}
|
|
674
|
+
<div className="u-mb-8">
|
|
675
|
+
<h2 className="u-mb-4 u-text-brand-emphasis">Row Gap</h2>
|
|
676
|
+
<p className="u-mb-4 u-text-secondary-emphasis">
|
|
677
|
+
Wrapped rows use vertical spacing from the grid gutter width (`row-gap` via
|
|
678
|
+
`--atomix-gutter-y`):
|
|
679
|
+
</p>
|
|
680
|
+
|
|
681
|
+
<Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
|
|
682
|
+
<GridCol xs={4}>
|
|
683
|
+
<DemoCard variant="secondary">Column 1</DemoCard>
|
|
684
|
+
</GridCol>
|
|
685
|
+
<GridCol xs={4}>
|
|
686
|
+
<DemoCard variant="secondary">Column 2</DemoCard>
|
|
687
|
+
</GridCol>
|
|
688
|
+
<GridCol xs={4}>
|
|
689
|
+
<DemoCard variant="secondary">Column 3</DemoCard>
|
|
690
|
+
</GridCol>
|
|
691
|
+
<GridCol xs={4}>
|
|
692
|
+
<DemoCard variant="secondary">Column 4</DemoCard>
|
|
693
|
+
</GridCol>
|
|
694
|
+
<GridCol xs={4}>
|
|
695
|
+
<DemoCard variant="secondary">Column 5</DemoCard>
|
|
696
|
+
</GridCol>
|
|
697
|
+
<GridCol xs={4}>
|
|
698
|
+
<DemoCard variant="secondary">Column 6</DemoCard>
|
|
699
|
+
</GridCol>
|
|
700
|
+
</Row>
|
|
701
|
+
</div>
|
|
702
|
+
|
|
673
703
|
{/* No Gutters */}
|
|
674
704
|
<div className="u-mb-8">
|
|
675
705
|
<h2 className="u-mb-4 u-text-brand-emphasis">No Gutters</h2>
|
|
676
|
-
<p className="u-mb-4 u-text-secondary-emphasis">
|
|
706
|
+
<p className="u-mb-4 u-text-secondary-emphasis">
|
|
707
|
+
Remove horizontal and vertical gutter spacing between columns:
|
|
708
|
+
</p>
|
|
677
709
|
|
|
678
710
|
<div className="u-mb-6">
|
|
679
|
-
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
711
|
+
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
712
|
+
With gutters (default)
|
|
713
|
+
</h3>
|
|
680
714
|
<Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
|
|
681
715
|
<GridCol xs={4}>
|
|
682
716
|
<DemoCard variant="secondary">Column 1</DemoCard>
|
|
@@ -687,6 +721,15 @@ export const AlignmentAndSpacing: Story = {
|
|
|
687
721
|
<GridCol xs={4}>
|
|
688
722
|
<DemoCard variant="secondary">Column 3</DemoCard>
|
|
689
723
|
</GridCol>
|
|
724
|
+
<GridCol xs={4}>
|
|
725
|
+
<DemoCard variant="secondary">Column 4</DemoCard>
|
|
726
|
+
</GridCol>
|
|
727
|
+
<GridCol xs={4}>
|
|
728
|
+
<DemoCard variant="secondary">Column 5</DemoCard>
|
|
729
|
+
</GridCol>
|
|
730
|
+
<GridCol xs={4}>
|
|
731
|
+
<DemoCard variant="secondary">Column 6</DemoCard>
|
|
732
|
+
</GridCol>
|
|
690
733
|
</Row>
|
|
691
734
|
</div>
|
|
692
735
|
|
|
@@ -702,6 +745,15 @@ export const AlignmentAndSpacing: Story = {
|
|
|
702
745
|
<GridCol xs={4}>
|
|
703
746
|
<DemoCard variant="accent">Column 3</DemoCard>
|
|
704
747
|
</GridCol>
|
|
748
|
+
<GridCol xs={4}>
|
|
749
|
+
<DemoCard variant="accent">Column 4</DemoCard>
|
|
750
|
+
</GridCol>
|
|
751
|
+
<GridCol xs={4}>
|
|
752
|
+
<DemoCard variant="accent">Column 5</DemoCard>
|
|
753
|
+
</GridCol>
|
|
754
|
+
<GridCol xs={4}>
|
|
755
|
+
<DemoCard variant="accent">Column 6</DemoCard>
|
|
756
|
+
</GridCol>
|
|
705
757
|
</Row>
|
|
706
758
|
</div>
|
|
707
759
|
</div>
|
|
@@ -30,9 +30,11 @@ import { Grid, GridCol } from '@/layouts/Grid';
|
|
|
30
30
|
- Adds utility class `u-justify-content-[value]`
|
|
31
31
|
- `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
|
|
32
32
|
- Adds utility class `u-align-items-[value]`
|
|
33
|
-
- `noGutters`: Remove
|
|
33
|
+
- `noGutters`: Remove horizontal and vertical gutter spacing
|
|
34
34
|
- Adds modifier class `o-grid--no-gutters`
|
|
35
35
|
|
|
36
|
+
Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
|
|
37
|
+
|
|
36
38
|
### GridCol
|
|
37
39
|
|
|
38
40
|
Column component with responsive sizing options.
|
|
@@ -89,9 +91,11 @@ import { Container, Row, GridCol } from '@/layouts/Grid';
|
|
|
89
91
|
- Adds utility class `u-justify-content-[value]`
|
|
90
92
|
- `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
|
|
91
93
|
- Adds utility class `u-align-items-[value]`
|
|
92
|
-
- `noGutters`: Remove
|
|
94
|
+
- `noGutters`: Remove horizontal and vertical gutter spacing
|
|
93
95
|
- Adds modifier class `o-grid--no-gutters`
|
|
94
96
|
|
|
97
|
+
Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
|
|
98
|
+
|
|
95
99
|
## Breakpoints
|
|
96
100
|
|
|
97
101
|
The grid system uses the following breakpoints:
|
|
@@ -11,81 +11,81 @@ $black: #000000 !default;
|
|
|
11
11
|
$color-contrast-dark: #000000 !default;
|
|
12
12
|
$color-contrast-light: #ffffff !default;
|
|
13
13
|
|
|
14
|
-
// Primitives Primary Colors (
|
|
15
|
-
$primary-1: #
|
|
16
|
-
$primary-2: #
|
|
17
|
-
$primary-3: #
|
|
18
|
-
$primary-4: #
|
|
19
|
-
$primary-5: #
|
|
20
|
-
$primary-6: #
|
|
21
|
-
$primary-7: #
|
|
22
|
-
$primary-8: #
|
|
23
|
-
$primary-9: #
|
|
24
|
-
$primary-10: #
|
|
25
|
-
|
|
26
|
-
// Primitives Red Colors
|
|
27
|
-
$red-1: #
|
|
28
|
-
$red-2: #
|
|
29
|
-
$red-3: #
|
|
30
|
-
$red-4: #
|
|
31
|
-
$red-5: #
|
|
32
|
-
$red-6: #
|
|
33
|
-
$red-7: #
|
|
34
|
-
$red-8: #
|
|
35
|
-
$red-9: #
|
|
36
|
-
$red-10: #
|
|
37
|
-
|
|
38
|
-
// Primitives Green Colors
|
|
39
|
-
$green-1: #
|
|
40
|
-
$green-2: #
|
|
41
|
-
$green-3: #
|
|
42
|
-
$green-4: #
|
|
43
|
-
$green-5: #
|
|
44
|
-
$green-6: #
|
|
45
|
-
$green-7: #
|
|
46
|
-
$green-8: #
|
|
47
|
-
$green-9: #
|
|
48
|
-
$green-10: #
|
|
49
|
-
|
|
50
|
-
// Primitives Yellow Colors
|
|
51
|
-
$yellow-1: #
|
|
52
|
-
$yellow-2: #
|
|
53
|
-
$yellow-3: #
|
|
54
|
-
$yellow-4: #
|
|
55
|
-
$yellow-5: #
|
|
56
|
-
$yellow-6: #
|
|
57
|
-
$yellow-7: #
|
|
58
|
-
$yellow-8: #
|
|
59
|
-
$yellow-9: #
|
|
60
|
-
$yellow-10: #
|
|
61
|
-
|
|
62
|
-
// Primitives Blue Colors
|
|
63
|
-
$blue-1: #
|
|
64
|
-
$blue-2: #
|
|
65
|
-
$blue-3: #
|
|
66
|
-
$blue-4: #
|
|
67
|
-
$blue-5: #
|
|
68
|
-
$blue-6: #
|
|
69
|
-
$blue-7: #
|
|
70
|
-
$blue-8: #
|
|
71
|
-
$blue-9: #
|
|
72
|
-
$blue-10: #
|
|
73
|
-
|
|
74
|
-
// Primitives Gray Colors
|
|
75
|
-
$gray-1: #
|
|
76
|
-
$gray-2: #
|
|
77
|
-
$gray-3: #
|
|
78
|
-
$gray-4: #
|
|
79
|
-
$gray-5: #
|
|
80
|
-
$gray-6: #
|
|
81
|
-
$gray-7: #
|
|
82
|
-
$gray-8: #
|
|
83
|
-
$gray-9: #
|
|
84
|
-
$gray-10: #
|
|
14
|
+
// Primitives Primary Colors (Premium Violet Scale)
|
|
15
|
+
$primary-1: #f6f4ff !default;
|
|
16
|
+
$primary-2: #ece7ff !default;
|
|
17
|
+
$primary-3: #dccfff !default;
|
|
18
|
+
$primary-4: #c1aafd !default;
|
|
19
|
+
$primary-5: #a07ff9 !default;
|
|
20
|
+
$primary-6: #7c4dff !default; // Premium brand violet - rich, refined main brand color
|
|
21
|
+
$primary-7: #6b3ae8 !default;
|
|
22
|
+
$primary-8: #5a2bc9 !default;
|
|
23
|
+
$primary-9: #47209f !default;
|
|
24
|
+
$primary-10: #341776 !default;
|
|
25
|
+
|
|
26
|
+
// Primitives Red Colors (Premium Rose Scale)
|
|
27
|
+
$red-1: #fff1f2 !default;
|
|
28
|
+
$red-2: #ffe4e6 !default;
|
|
29
|
+
$red-3: #fecdd3 !default;
|
|
30
|
+
$red-4: #fda4af !default;
|
|
31
|
+
$red-5: #fb7185 !default;
|
|
32
|
+
$red-6: #f43f5e !default; // Refined, accessible rose-red
|
|
33
|
+
$red-7: #e11d48 !default;
|
|
34
|
+
$red-8: #be123c !default;
|
|
35
|
+
$red-9: #9f1239 !default;
|
|
36
|
+
$red-10: #881337 !default;
|
|
37
|
+
|
|
38
|
+
// Primitives Green Colors (Premium Emerald Scale)
|
|
39
|
+
$green-1: #ecfdf5 !default;
|
|
40
|
+
$green-2: #d1fae5 !default;
|
|
41
|
+
$green-3: #a7f3d0 !default;
|
|
42
|
+
$green-4: #6ee7b7 !default;
|
|
43
|
+
$green-5: #34d399 !default;
|
|
44
|
+
$green-6: #10b981 !default; // Refined, accessible emerald
|
|
45
|
+
$green-7: #059669 !default;
|
|
46
|
+
$green-8: #047857 !default;
|
|
47
|
+
$green-9: #065f46 !default;
|
|
48
|
+
$green-10: #064e3b !default;
|
|
49
|
+
|
|
50
|
+
// Primitives Yellow Colors (Premium Amber Scale)
|
|
51
|
+
$yellow-1: #fffbeb !default;
|
|
52
|
+
$yellow-2: #fef3c7 !default;
|
|
53
|
+
$yellow-3: #fde68a !default;
|
|
54
|
+
$yellow-4: #fcd34d !default;
|
|
55
|
+
$yellow-5: #fbbf24 !default;
|
|
56
|
+
$yellow-6: #f59e0b !default; // Warm, accessible amber
|
|
57
|
+
$yellow-7: #d97706 !default;
|
|
58
|
+
$yellow-8: #b45309 !default;
|
|
59
|
+
$yellow-9: #92400e !default;
|
|
60
|
+
$yellow-10: #78350f !default;
|
|
61
|
+
|
|
62
|
+
// Primitives Blue Colors (Premium Azure Scale)
|
|
63
|
+
$blue-1: #eff8ff !default;
|
|
64
|
+
$blue-2: #d8edff !default;
|
|
65
|
+
$blue-3: #b6ddff !default;
|
|
66
|
+
$blue-4: #84c5ff !default;
|
|
67
|
+
$blue-5: #52a6fa !default;
|
|
68
|
+
$blue-6: #2f80ed !default; // Refined, accessible azure blue
|
|
69
|
+
$blue-7: #1f66d4 !default;
|
|
70
|
+
$blue-8: #1a4fad !default;
|
|
71
|
+
$blue-9: #1a428a !default;
|
|
72
|
+
$blue-10: #173770 !default;
|
|
73
|
+
|
|
74
|
+
// Primitives Gray Colors (Premium Cool Slate Scale)
|
|
75
|
+
$gray-1: #f8fafc !default;
|
|
76
|
+
$gray-2: #f1f5f9 !default;
|
|
77
|
+
$gray-3: #e2e8f0 !default;
|
|
78
|
+
$gray-4: #cbd5e1 !default;
|
|
79
|
+
$gray-5: #94a3b8 !default;
|
|
80
|
+
$gray-6: #64748b !default;
|
|
81
|
+
$gray-7: #475569 !default;
|
|
82
|
+
$gray-8: #334155 !default;
|
|
83
|
+
$gray-9: #1e293b !default;
|
|
84
|
+
$gray-10: #0f172a !default;
|
|
85
85
|
|
|
86
86
|
// Primitives Overlay
|
|
87
|
-
$overlay-1: rgba(
|
|
88
|
-
$overlay-2: rgba($gray-
|
|
87
|
+
$overlay-1: rgba($gray-10, 0.32) !default;
|
|
88
|
+
$overlay-2: rgba($gray-9, 0.6) !default;
|
|
89
89
|
|
|
90
90
|
//Text colors emphasis
|
|
91
91
|
$primary-text: $gray-10 !default;
|
|
@@ -2,16 +2,19 @@
|
|
|
2
2
|
@use '../01-settings/settings.grid' as grid;
|
|
3
3
|
@use '../02-tools/tools.grid' as *;
|
|
4
4
|
@use '../02-tools/tools.breakpoints' as *;
|
|
5
|
+
@use '../02-tools/tools.rem' as *;
|
|
5
6
|
|
|
6
7
|
.o-grid {
|
|
7
|
-
--#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
|
|
8
|
+
--#{config.$prefix}gutter-y: #{rem(grid.$grid-gutter-width)};
|
|
8
9
|
@include make-row();
|
|
10
|
+
row-gap: var(--#{config.$prefix}gutter-y);
|
|
9
11
|
|
|
10
12
|
&__col {
|
|
11
13
|
@include make-col-ready();
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
&--no-gutters {
|
|
17
|
+
--#{config.$prefix}gutter-y: 0;
|
|
15
18
|
margin-right: 0;
|
|
16
19
|
margin-left: 0;
|
|
17
20
|
|