tide-design-system 2.4.7 → 2.5.2
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 +2 -0
- package/README.md +3 -1
- package/dist/css/reset.css +5 -1
- package/dist/css/utilities-base.css +6 -6
- package/dist/css/utilities-responsive.css +24 -24
- package/dist/css/variables.css +3 -0
- package/dist/style.css +1 -1
- package/dist/tide-design-system.cjs +2 -2
- package/dist/tide-design-system.esm.d.ts +152 -70
- package/dist/tide-design-system.esm.js +1375 -1243
- package/docs/assets/full-bleed.gif +0 -0
- package/docs/assets/layout-grid-default.webp +0 -0
- package/docs/assets/layout-grid-fluid.webp +0 -0
- package/docs/assets/layout-grid.webp +0 -0
- package/docs/configuation.md +47 -0
- package/docs/grid-layout.md +83 -0
- package/docs/upgrading.md +79 -0
- package/index.ts +4 -0
- package/package.json +1 -1
- package/src/assets/css/reset.css +5 -1
- package/src/assets/css/utilities-base.css +6 -6
- package/src/assets/css/utilities-responsive.css +24 -24
- package/src/assets/css/variables.css +3 -0
- package/src/components/TideAccordionItem.vue +21 -13
- package/src/components/TideAlert.vue +1 -1
- package/src/components/TideButtonSegmented.vue +14 -15
- package/src/components/TideChipFilter.vue +13 -7
- package/src/components/TideInputCheckbox.vue +0 -1
- package/src/components/TideInputSelect.vue +1 -1
- package/src/components/TideInputSelectDeprecated.vue +1 -1
- package/src/components/TideInputText.vue +2 -2
- package/src/components/TideInputTextDeprecated.vue +2 -2
- package/src/components/TideInputTextarea.vue +2 -2
- package/src/components/TideInputTextareaDeprecated.vue +2 -2
- package/src/components/TideModal.vue +33 -20
- package/src/components/TidePagination.vue +17 -19
- package/src/components/TideRating.vue +93 -0
- package/src/components/TideSheet.vue +24 -21
- package/src/components/TideSwitch.vue +23 -20
- package/src/components/TideTabs.vue +58 -0
- package/src/stories/TideAccordionItem.stories.ts +33 -34
- package/src/stories/TideButtonSegmented.stories.ts +33 -25
- package/src/stories/TideChipFilter.stories.ts +33 -23
- package/src/stories/TideInputCheckbox.stories.ts +18 -10
- package/src/stories/TideModal.stories.ts +33 -37
- package/src/stories/TidePagination.stories.ts +31 -20
- package/src/stories/TideRating.stories.ts +120 -0
- package/src/stories/TideSheet.stories.ts +33 -28
- package/src/stories/TideSwitch.stories.ts +33 -34
- package/src/stories/TideTabs.stories.ts +115 -0
package/.storybook/main.ts
CHANGED
|
@@ -51,8 +51,10 @@ const config: StorybookConfig = {
|
|
|
51
51
|
'../src/stories/TideMenuItem.stories.ts',
|
|
52
52
|
'../src/stories/TideModal.stories.ts',
|
|
53
53
|
'../src/stories/TidePopover.stories.ts',
|
|
54
|
+
'../src/stories/TideRating.stories.ts',
|
|
54
55
|
'../src/stories/TideSheet.stories.ts',
|
|
55
56
|
'../src/stories/TideSwitch.stories.ts',
|
|
57
|
+
'../src/stories/TideTabs.stories.ts',
|
|
56
58
|
// '../src/stories/TidePagination.stories.ts',
|
|
57
59
|
// '../src/stories/TideSeoLinks.stories.ts',
|
|
58
60
|
],
|
package/README.md
CHANGED
|
@@ -14,8 +14,10 @@ TIDE (*T*rader *I*nteractive *D*esign and *E*ngineering) is a design system crea
|
|
|
14
14
|
- [Migration](./docs/development.md): Replace local structures with `TIDE` utilities and components.
|
|
15
15
|
- [Workflows](./docs/workflows.md): Collaborate with the `TIDE team` on feature enhancements.
|
|
16
16
|
- [Development](./docs/development.md): Contribute to the `tide-design-system` NPM package.
|
|
17
|
-
- [Upgrade
|
|
17
|
+
- [Upgrade Guide](./docs/upgrading.md): Upgrade versions of the `tide-design-system` npm package
|
|
18
18
|
- [Figma Token Cheatsheet](./docs/token-cheatsheet.md): Remember how to implement Figma tokens from code
|
|
19
|
+
- [Configuration](./docs/configuation.md): Globally set config values for your project for custom behaviors.
|
|
20
|
+
- [Layout Grid Utility](./docs/grid-layout.md): Lightweight CSS Grid for consistent page alignment.
|
|
19
21
|
|
|
20
22
|
## Glossary
|
|
21
23
|
- **TIDE**: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites
|
package/dist/css/reset.css
CHANGED
|
@@ -7,6 +7,7 @@ body {
|
|
|
7
7
|
font-size: var(--tide-font-16);
|
|
8
8
|
font-weight: 400;
|
|
9
9
|
line-height: 1.4;
|
|
10
|
+
text-wrap: pretty;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
/* Cannot be applied to body tag in marketplace repo due to data-css-scope */
|
|
@@ -39,13 +40,16 @@ h2 {font-size: var(--tide-font-24);} /* 24px */
|
|
|
39
40
|
h3 {font-size: var(--tide-font-20);} /* 20px */
|
|
40
41
|
h4 {font-size: var(--tide-font-16);} /* 16px */
|
|
41
42
|
h5 {font-size: var(--tide-font-16);} /* 16px */
|
|
43
|
+
h6 {font-size: var(--tide-font-16);} /* 16px */
|
|
42
44
|
|
|
43
45
|
h1,
|
|
44
46
|
h2,
|
|
45
47
|
h3,
|
|
46
48
|
h4,
|
|
47
|
-
h5
|
|
49
|
+
h5,
|
|
50
|
+
h6 {
|
|
48
51
|
font-weight: 700;
|
|
52
|
+
text-wrap: balance;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
img,
|
|
@@ -294,12 +294,12 @@
|
|
|
294
294
|
.tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
295
295
|
|
|
296
296
|
/* Typographic roles */
|
|
297
|
-
.tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
298
|
-
.tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
299
|
-
.tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
300
|
-
.tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
301
|
-
.tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
302
|
-
.tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
297
|
+
.tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
298
|
+
.tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
299
|
+
.tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
300
|
+
.tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
301
|
+
.tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
302
|
+
.tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
303
303
|
.tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
304
304
|
.tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
305
305
|
.tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -295,12 +295,12 @@
|
|
|
295
295
|
.sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
296
296
|
|
|
297
297
|
/* Typographic roles */
|
|
298
|
-
.sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
299
|
-
.sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
300
|
-
.sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
301
|
-
.sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
302
|
-
.sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
303
|
-
.sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
298
|
+
.sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
299
|
+
.sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
300
|
+
.sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
301
|
+
.sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
302
|
+
.sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
303
|
+
.sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
304
304
|
.sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
305
305
|
.sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
306
306
|
.sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -843,12 +843,12 @@
|
|
|
843
843
|
.md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
844
844
|
|
|
845
845
|
/* Typographic roles */
|
|
846
|
-
.md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
847
|
-
.md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
848
|
-
.md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
849
|
-
.md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
850
|
-
.md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
851
|
-
.md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
846
|
+
.md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
847
|
+
.md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
848
|
+
.md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
849
|
+
.md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
850
|
+
.md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
851
|
+
.md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
852
852
|
.md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
853
853
|
.md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
854
854
|
.md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -1391,12 +1391,12 @@
|
|
|
1391
1391
|
.lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1392
1392
|
|
|
1393
1393
|
/* Typographic roles */
|
|
1394
|
-
.lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1395
|
-
.lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1396
|
-
.lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1397
|
-
.lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1398
|
-
.lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1399
|
-
.lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1394
|
+
.lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
1395
|
+
.lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
1396
|
+
.lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
1397
|
+
.lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
1398
|
+
.lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
1399
|
+
.lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
1400
1400
|
.lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1401
1401
|
.lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1402
1402
|
.lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -1939,12 +1939,12 @@
|
|
|
1939
1939
|
.xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1940
1940
|
|
|
1941
1941
|
/* Typographic roles */
|
|
1942
|
-
.xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1943
|
-
.xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1944
|
-
.xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1945
|
-
.xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1946
|
-
.xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1947
|
-
.xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1942
|
+
.xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
1943
|
+
.xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
1944
|
+
.xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
1945
|
+
.xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
1946
|
+
.xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
1947
|
+
.xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
1948
1948
|
.xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1949
1949
|
.xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1950
1950
|
.xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|