tide-design-system 2.5.0 → 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 +49 -9
- package/dist/tide-design-system.esm.js +887 -785
- 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/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/TideAlert.vue +1 -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 +1 -1
- package/src/components/TideRating.vue +93 -0
- package/src/components/TideSheet.vue +1 -1
- package/src/components/TideTabs.vue +58 -0
- package/src/stories/TideRating.stories.ts +120 -0
- 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;}
|