tide-design-system 2.0.34 → 2.0.35
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/.storybook/main.ts +1 -1
- package/.storybook/preview.ts +2 -0
- package/dist/css/grid-layout.css +12 -10
- package/dist/css/reset.css +2 -2
- package/dist/css/utilities.css +100 -0
- package/dist/css/variables.css +9 -14
- package/dist/style.css +1 -1
- package/dist/tide-design-system.cjs +2 -2
- package/dist/tide-design-system.esm.d.ts +24 -11
- package/dist/tide-design-system.esm.js +196 -177
- package/dist/utilities/storybook.ts +11 -1
- package/package.json +3 -1
- package/src/assets/css/grid-layout.css +12 -10
- package/src/assets/css/reset.css +2 -2
- package/src/assets/css/utilities.css +100 -0
- package/src/assets/css/variables.css +9 -14
- package/src/components/TideImage.vue +2 -6
- package/src/stories/FoundationsGrid.stories.ts +309 -0
- package/src/stories/FoundationsTypography.stories.ts +39 -23
- package/src/stories/TideImage.stories.ts +38 -0
- package/src/types/Storybook.ts +55 -20
- package/src/types/Styles.ts +24 -3
- package/src/utilities/storybook.ts +11 -1
package/.storybook/main.ts
CHANGED
|
@@ -37,8 +37,8 @@ const config: StorybookConfig = {
|
|
|
37
37
|
'../src/stories/TideColumns.stories.ts',
|
|
38
38
|
'../src/stories/TideDivider.stories.ts',
|
|
39
39
|
'../src/stories/TideIcon.stories.ts',
|
|
40
|
+
'../src/stories/TideImage.stories.ts',
|
|
40
41
|
'../src/stories/TideIndicator.stories.ts',
|
|
41
|
-
// '../src/stories/TideImage.stories.ts',
|
|
42
42
|
'../src/stories/TideInputCheckbox.stories.ts',
|
|
43
43
|
'../src/stories/TideInputRadio.stories.ts',
|
|
44
44
|
'../src/stories/TideInputSelect.stories.ts',
|
package/.storybook/preview.ts
CHANGED
|
@@ -8,6 +8,7 @@ import '@/assets/css/storybook.css';
|
|
|
8
8
|
|
|
9
9
|
import DemoCssUtilities from '../src/stories/DemoCssUtilities.stories';
|
|
10
10
|
import DemoCssUtilitiesByTextInput from '../src/stories/DemoCssUtilitiesByTextInput.stories';
|
|
11
|
+
import FoundationsGrid from '../src/stories/FoundationsGrid.stories';
|
|
11
12
|
import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
|
|
12
13
|
import TideCarousel from '../src/stories/TideCarousel.stories';
|
|
13
14
|
|
|
@@ -31,6 +32,7 @@ const preview: Preview = {
|
|
|
31
32
|
const decoratorOptOuts = [
|
|
32
33
|
DemoCssUtilities.title,
|
|
33
34
|
DemoCssUtilitiesByTextInput.title,
|
|
35
|
+
FoundationsGrid.title,
|
|
34
36
|
FoundationsMargin.title,
|
|
35
37
|
TideCarousel.title,
|
|
36
38
|
];
|
package/dist/css/grid-layout.css
CHANGED
|
@@ -11,6 +11,14 @@
|
|
|
11
11
|
--tide-gap-width: var(--tide-spacing-1);
|
|
12
12
|
--tide-gutter-width: var(--tide-spacing-1);
|
|
13
13
|
--tide-gutter-width-offset: calc(var(--tide-gutter-width) - var(--tide-gap-width));
|
|
14
|
+
|
|
15
|
+
display: grid;
|
|
16
|
+
grid-auto-rows: min-content;
|
|
17
|
+
grid-template-columns:
|
|
18
|
+
minmax(var(--tide-gutter-width-offset), 1fr)
|
|
19
|
+
repeat(var(--tide-column-count), var(--tide-column-width))
|
|
20
|
+
minmax(var(--tide-gutter-width-offset), 1fr);
|
|
21
|
+
gap: var(--tide-spacing-1) var(--tide-gap-width);
|
|
14
22
|
}
|
|
15
23
|
|
|
16
24
|
@media (min-width: 768px) {
|
|
@@ -29,18 +37,12 @@
|
|
|
29
37
|
--tide-max-content-width: var(--tide-1920px);
|
|
30
38
|
}
|
|
31
39
|
|
|
32
|
-
.tide-grid-layout
|
|
33
|
-
|
|
34
|
-
grid-
|
|
35
|
-
grid-template-columns:
|
|
36
|
-
minmax(var(--tide-gutter-width-offset), 1fr)
|
|
37
|
-
repeat(12, var(--tide-column-width))
|
|
38
|
-
minmax(var(--tide-gutter-width-offset), 1fr);
|
|
39
|
-
gap: var(--tide-spacing-1) var(--tide-gap-width);
|
|
40
|
+
.tide-grid-layout > *,
|
|
41
|
+
.tide-grid-item {
|
|
42
|
+
grid-column: 2 / -2;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
|
-
.tide-
|
|
43
|
-
.tide-fluid {grid-column: 1 / -1;}
|
|
45
|
+
.tide-fluid {grid-column: 1 / -1;}
|
|
44
46
|
|
|
45
47
|
.tide-start-0 {grid-column-start: 1;}
|
|
46
48
|
.tide-start-1 {grid-column-start: 2;}
|
package/dist/css/reset.css
CHANGED
|
@@ -12,7 +12,7 @@ body {
|
|
|
12
12
|
padding: 0;
|
|
13
13
|
color: inherit;
|
|
14
14
|
font-family: Montserrat;
|
|
15
|
-
font-weight:
|
|
15
|
+
font-weight: 400;
|
|
16
16
|
-webkit-font-smoothing: antialiased;
|
|
17
17
|
-moz-osx-font-smoothing: grayscale;
|
|
18
18
|
}
|
|
@@ -28,7 +28,7 @@ h2,
|
|
|
28
28
|
h3,
|
|
29
29
|
h4,
|
|
30
30
|
h5 {
|
|
31
|
-
font-weight:
|
|
31
|
+
font-weight: 700;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
img,
|
package/dist/css/utilities.css
CHANGED
|
@@ -229,6 +229,26 @@
|
|
|
229
229
|
.tide-transparent-300 {background-color: var(--tide-transparent-300);}
|
|
230
230
|
.tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
231
231
|
|
|
232
|
+
/* Typographic roles */
|
|
233
|
+
.tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
234
|
+
.tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
235
|
+
.tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
236
|
+
.tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
237
|
+
.tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
238
|
+
.tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
239
|
+
.tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
240
|
+
.tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
241
|
+
.tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
242
|
+
.tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
|
|
243
|
+
.tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
244
|
+
.tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
|
|
245
|
+
.tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
246
|
+
.tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
247
|
+
.tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
248
|
+
.tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
249
|
+
.tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
|
|
250
|
+
.tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
|
|
251
|
+
|
|
232
252
|
/* Font Size */
|
|
233
253
|
.tide-font-10 {font-size: var(--tide-font-10);}
|
|
234
254
|
.tide-font-12 {font-size: var(--tide-font-12);}
|
|
@@ -572,6 +592,26 @@
|
|
|
572
592
|
.sm-tide-transparent-300 {background-color: var(--tide-transparent-300);}
|
|
573
593
|
.sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
574
594
|
|
|
595
|
+
/* Typographic roles */
|
|
596
|
+
.sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
597
|
+
.sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
598
|
+
.sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
599
|
+
.sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
600
|
+
.sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
601
|
+
.sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
602
|
+
.sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
603
|
+
.sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
604
|
+
.sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
605
|
+
.sm-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
|
|
606
|
+
.sm-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
607
|
+
.sm-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
|
|
608
|
+
.sm-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
609
|
+
.sm-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
610
|
+
.sm-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
611
|
+
.sm-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
612
|
+
.sm-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
|
|
613
|
+
.sm-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
|
|
614
|
+
|
|
575
615
|
/* Font Size */
|
|
576
616
|
.sm-tide-font-10 {font-size: var(--tide-font-10);}
|
|
577
617
|
.sm-tide-font-12 {font-size: var(--tide-font-12);}
|
|
@@ -916,6 +956,26 @@
|
|
|
916
956
|
.md-tide-transparent-300 {background-color: var(--tide-transparent-300);}
|
|
917
957
|
.md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
918
958
|
|
|
959
|
+
/* Typographic roles */
|
|
960
|
+
.md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
961
|
+
.md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
962
|
+
.md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
963
|
+
.md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
964
|
+
.md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
965
|
+
.md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
966
|
+
.md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
967
|
+
.md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
968
|
+
.md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
969
|
+
.md-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
|
|
970
|
+
.md-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
971
|
+
.md-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
|
|
972
|
+
.md-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
973
|
+
.md-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
974
|
+
.md-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
975
|
+
.md-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
976
|
+
.md-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
|
|
977
|
+
.md-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
|
|
978
|
+
|
|
919
979
|
/* Font Size */
|
|
920
980
|
.md-tide-font-10 {font-size: var(--tide-font-10);}
|
|
921
981
|
.md-tide-font-12 {font-size: var(--tide-font-12);}
|
|
@@ -1260,6 +1320,26 @@
|
|
|
1260
1320
|
.lg-tide-transparent-300 {background-color: var(--tide-transparent-300);}
|
|
1261
1321
|
.lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1262
1322
|
|
|
1323
|
+
/* Typographic roles */
|
|
1324
|
+
.lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1325
|
+
.lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1326
|
+
.lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1327
|
+
.lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1328
|
+
.lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1329
|
+
.lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1330
|
+
.lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1331
|
+
.lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1332
|
+
.lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
1333
|
+
.lg-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
|
|
1334
|
+
.lg-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
1335
|
+
.lg-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
|
|
1336
|
+
.lg-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
1337
|
+
.lg-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
1338
|
+
.lg-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
1339
|
+
.lg-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
1340
|
+
.lg-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
|
|
1341
|
+
.lg-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
|
|
1342
|
+
|
|
1263
1343
|
/* Font Size */
|
|
1264
1344
|
.lg-tide-font-10 {font-size: var(--tide-font-10);}
|
|
1265
1345
|
.lg-tide-font-12 {font-size: var(--tide-font-12);}
|
|
@@ -1604,6 +1684,26 @@
|
|
|
1604
1684
|
.xl-tide-transparent-300 {background-color: var(--tide-transparent-300);}
|
|
1605
1685
|
.xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1606
1686
|
|
|
1687
|
+
/* Typographic roles */
|
|
1688
|
+
.xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1689
|
+
.xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1690
|
+
.xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1691
|
+
.xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1692
|
+
.xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1693
|
+
.xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1694
|
+
.xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1695
|
+
.xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1696
|
+
.xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
1697
|
+
.xl-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
|
|
1698
|
+
.xl-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
1699
|
+
.xl-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
|
|
1700
|
+
.xl-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
1701
|
+
.xl-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
1702
|
+
.xl-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
|
|
1703
|
+
.xl-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
|
|
1704
|
+
.xl-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
|
|
1705
|
+
.xl-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
|
|
1706
|
+
|
|
1607
1707
|
/* Font Size */
|
|
1608
1708
|
.xl-tide-font-10 {font-size: var(--tide-font-10);}
|
|
1609
1709
|
.xl-tide-font-12 {font-size: var(--tide-font-12);}
|
package/dist/css/variables.css
CHANGED
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
/*.CSS Variables */
|
|
2
2
|
:root {
|
|
3
3
|
/* Font Size */
|
|
4
|
-
--tide-font-10: 0.625rem;
|
|
5
|
-
--tide-font-12: 0.75rem;
|
|
6
|
-
--tide-font-14: 0.875rem;
|
|
7
|
-
--tide-font-16: 1rem;
|
|
8
|
-
--tide-font-
|
|
9
|
-
--tide-font-
|
|
10
|
-
--tide-font-
|
|
11
|
-
--tide-font-
|
|
12
|
-
|
|
13
|
-
/* Font Weight */
|
|
14
|
-
--tide-font-400: 400;
|
|
15
|
-
--tide-font-500: 500;
|
|
16
|
-
--tide-font-600: 600;
|
|
17
|
-
--tide-font-700: 700;
|
|
4
|
+
--tide-font-10: 0.625rem;
|
|
5
|
+
--tide-font-12: 0.75rem;
|
|
6
|
+
--tide-font-14: 0.875rem;
|
|
7
|
+
--tide-font-16: 1rem;
|
|
8
|
+
--tide-font-18: 1.125rem;
|
|
9
|
+
--tide-font-20: 1.25rem;
|
|
10
|
+
--tide-font-24: 1.5rem;
|
|
11
|
+
--tide-font-28: 1.75rem;
|
|
12
|
+
--tide-font-32: 2rem;
|
|
18
13
|
|
|
19
14
|
/* Animation */
|
|
20
15
|
--tide-animate: 300ms ease-in-out;
|