diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index b239928ab..16161c7ae 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,5 +1,5 @@ - + + +
+ { + borderRadiusData.map(borderRadius => { + return ( +
+
+ {borderRadius.borderRadius} +
+
+ {borderRadius.name} +
+
+ ) + }) + } +
+ +


+### CSS variables +from `@ironsource/fusion-ui/style/v4/style-guide.css` + diff --git a/projects/fusion-ui/storybook-foundations/v4/border-radius/borderRadiusData.ts b/projects/fusion-ui/storybook-foundations/v4/border-radius/borderRadiusData.ts new file mode 100644 index 000000000..6b61954fc --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/border-radius/borderRadiusData.ts @@ -0,0 +1,32 @@ +export const borderRadiusData = [ + { + name: 'xs', + borderRadius: '2px', + cssVarName: '--border-radius-xs' + }, + { + name: 'sm', + borderRadius: '4px', + cssVarName: '--border-radius-sm' + }, + { + name: 'md', + borderRadius: '6px', + cssVarName: '--border-radius-md' + }, + { + name: 'lg', + borderRadius: '8px', + cssVarName: '--border-radius-lg' + }, + { + name: 'xl', + borderRadius: '16px', + cssVarName: '--border-radius-xl' + }, + { + name: 'full', + borderRadius: '100px', + cssVarName: '--border-radius-full' + } +]; diff --git a/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpoints.mdx b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpoints.mdx new file mode 100644 index 000000000..e226e6bcf --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpoints.mdx @@ -0,0 +1,106 @@ +import {Meta, Source} from '@storybook/addon-docs'; +import {breakpointsData} from './breakpointsData'; + + + +# Breakpoints + +Use this set of standard breakpoints to maintain layout integrity across screen sizes. For best results, test designs and code at each of these standard breakpoints. + +To start using breakpoints mixins, you need to import our `@import '~@ironsource/fusion-ui/style/v4/mixins/breakpoints` to your project and use mixins. + + + + +
+ { + breakpointsData.map(breakpoint => { + return ( +
+
+ {breakpoint.name} +
+
+ {breakpoint.text} +
+
+ {breakpoint.type} +
+
+ ) + }) + } +
+ +



+#### Using breakpoints mixins: +Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider. + + + +Media of at most the maximum breakpoint width. No query for the largest breakpoint. Makes the @content apply to the given breakpoint and narrower. + + + +Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints + + +No minimum for the smallest breakpoint, and no maximum for the largest one. Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. + diff --git a/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts new file mode 100644 index 000000000..1c3bd8dc5 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts @@ -0,0 +1,32 @@ +export const breakpointsData = [ + { + name: 'Desktop', + text: '1920px and up', + type: 'xl' + }, + { + name: 'Large laptop', + text: '1440px - 1919px', + type: 'lg' + }, + { + name: 'Small laptop', + text: '1280px - 1439px', + type: 'md' + }, + { + name: 'Tablet landscape', + text: '1024px - 1279px', + type: 'sm' + }, + { + name: 'Tablet portrait', + text: '768px - 1023px', + type: 'xs' + }, + { + name: 'Phones', + text: '768px and below', + type: 'xxs' + } +]; diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx new file mode 100644 index 000000000..da56eeb4e --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx @@ -0,0 +1,339 @@ +import {Meta, Source} from '@storybook/addon-docs'; +import {colorPaletteLight} from './colorsData'; + + + +# Palette color + +Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. [radix-ui.com](https://www.radix-ui.com/colors) + +To use our colors scss variable add in your *.scss +`@import '~@ironsource/fusion-ui/style/v4/vars/_colors.scss';` + +Or import css variable for *.css +`@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` + + + + +
+ { + Object.entries(colorPaletteLight).map(colorGroup=>{ + return ( +
+
{ colorGroup[0] }
+
+
+
Name
+
Value
+
+ { + Object.entries(colorGroup[1]).map(token=>{ + return ( +
+
{ token[0] }
+
+
+ { token[1] } +
+
+ ) + }) + } +
+
+ ) + }) + } +
+ + +#### CSS variables +from `@ironsource/fusion-ui/style/v4/style-guide.css` + + + +#### SCSS variables +from `@ironsource/fusion-ui/style/v4/vars/_colors.scss` + + diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colorsData.ts b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colorsData.ts new file mode 100644 index 000000000..3d2a95983 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colorsData.ts @@ -0,0 +1,113 @@ +export const colorPaletteLight = { + background: { + default: '#FFFFFF', + paper: 'hsl(0, 0%, 99.0%)', + backdrop: 'hsla(0, 0%, 0%, 0.11)', + 'modal-elevation': '#FFFFFF', + 'modal-elevation-0': 'hsl(0, 0%, 97.5%)', + 'modal-elevation-1': 'hsl(0, 0%, 94.6%)', + 'modal-elevation-2': 'hsl(0, 0%, 92.0%)', + 'modal-elevation-3': 'hsl(0, 0%, 89.5%)', + 'modal-elevation-4': 'hsl(0, 0%, 86.8%)', + 'modal-elevation-5': 'hsl(0, 0%, 83.0%)', + 'modal-elevation-6': 'hsl(0, 0%, 73.2%)', + 'modal-elevation-7': 'hsl(0, 0%, 55.2%)', + 'modal-elevation-8': 'hsl(0, 0%, 50.3%)', + 'modal-elevation-9': 'hsl(0, 0%, 39.3%)' + }, + action: { + primary: 'hsl(0, 0%, 12.5%)', + active: 'hsl(0, 0%, 50.3%)', + hover: 'hsla(0, 0%, 0%, 0.05)', + selected: 'hsla(0, 0%, 92%, 1)', + disabled: 'hsla(0, 0%, 87%, 1)', + disabledBackground: 'hsla(0, 0%, 95%, 1)', + focus: 'hsl(0, 0%, 92.0%)', + outlinedBorder: 'hsla(0, 0%, 73%, 1)' + }, + default: { + light: 'hsl(0, 0%, 89.5%)', + main: 'hsl(0 0% 94.51%)', + dark: 'hsl(0, 0%, 92.0%)', + outlinedBorder: 'hsl(0, 0%, 73.2%)', + contrastText: 'hsl(0, 0%, 12.5%)', + buttonContrastText: 'hsla(0, 0%, 0%, 1)' + }, + common: { + white: '#FFFFFF', + black: '#000000', + inverseWhite: '#FFFFFF', + inverseBlack: '#000000', + divider: 'hsl(0, 0%, 86.8%)', + 'divider-elevation-0': 'hsla(0, 0%, 89%, 1)' + }, + text: { + primary: 'hsl(0, 0%, 12.5%)', + secondary: 'hsl(0, 0%, 39.3%)', + disabled: 'hsl(0 0% 73.33%)' + }, + primary: { + lighter: 'hsl(209, 100%, 96.5%)', + light: 'hsl(209, 95.0%, 90.1%)', + main: 'hsl(206, 100%, 50.0%)', + main8p: 'hsla(206, 100%, 50%, 0.08)', + main50p: 'hsla(206, 100%, 50%, 0.5)', + dark: 'hsl(208, 93.5%, 47.4%)', + darker: 'hsl(211, 90.0%, 42.0%)', + outlinedBorder: 'hsl(206, 100%, 50.0%)', + contrastText: 'hsl(216, 71.0%, 23.0%)', + buttonContrastText: 'hsla(0, 0%, 100%, 1)' + }, + info: { + lighter: 'hsl(223, 98.4%, 97.1%)', + light: 'hsl(224, 87.1%, 92.0%)', + main: 'hsl(226, 70.0%, 55.5%)', + main8p: 'hsla(226, 70%, 55.5%, 0.08)', + main50p: 'hsla(226, 70%, 55.5%, 0.5)', + dark: 'hsl(226, 58.6%, 51.3%)', + darker: 'hsl(226, 55.0%, 45.0%)', + outlinedBorder: 'hsl(226, 70.0%, 55.5%)', + contrastText: 'hsl(226, 50.0%, 24.0%)', + buttonContrastText: 'hsla(0, 0%, 100%, 1)' + }, + success: { + lighter: 'hsl(139, 55.2%, 94.5%)', + light: 'hsl(141, 43.7%, 86.0%)', + main: 'hsl(151, 55.0%, 41.5%)', + main8p: 'hsla(151, 55%, 41.5%, 0.08)', + main50p: 'hsla(151, 55%, 41.5%, 0.5)', + dark: 'hsl(152, 57.5%, 37.6%)', + darker: 'hsl(153, 67.0%, 28.5%)', + outlinedBorder: 'hsl(151, 55.0%, 41.5%)', + contrastText: 'hsl(155, 40.0%, 16.5%)', + buttonContrastText: 'hsla(0, 0%, 100%, 1)' + }, + warning: { + lighter: 'hsl(45, 100%, 90.8%)', + light: 'hsl(40, 100%, 81.5%)', + main: 'hsl(42, 100%, 62.0%)', + main8p: 'hsla(42, 100%, 62%, 0.08)', + main50p: 'hsla(42, 100%, 62%, 0.5)', + dark: 'hsl(42, 100%, 55.0%)', + darker: 'hsl(25, 50.0%, 38.0%)', + outlinedBorder: 'hsl(42, 100%, 62.0%)', + contrastText: 'hsl(25, 40.0%, 22.0%)', + buttonContrastText: 'hsla(24, 40%, 22%, 1)' + }, + error: { + lighter: 'hsl(360, 100%, 96.8%)', + light: 'hsl(360, 90.2%, 91.9%)', + main: 'hsl(358, 75.0%, 59.0%)', + main8p: 'hsla(358, 75%, 59%, 0.08)', + main50p: 'hsla(358, 75%, 59%, 0.5)', + dark: 'hsl(358, 67.4%, 54.6%)', + darker: 'hsl(358, 65.0%, 47.0%)', + outlinedBorder: 'hsl(358, 75.0%, 59.0%)', + contrastText: 'hsl(350, 63.0%, 24.0%)', + buttonContrastText: 'hsla(0, 0%, 100%, 1)' + }, + 'A/B test': { + 'A Control': '#FFC134', + 'B test': '#4F4FF5' + } +}; diff --git a/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx b/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx new file mode 100644 index 000000000..ecfb0edd2 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx @@ -0,0 +1,168 @@ +import {Meta} from '@storybook/addon-docs'; + + + +# Grid +The Grid layout is here to help you align blocks and widgets into columns and rows in a specific area. By following a pattern made of containers with CSS classes, you can easily design your customized tab content, keeping a visual consistency, readability, and adaptability between screens. + +Import style-guide.css file for css variables +```css +@import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +``` + +### Grid gap +Our grid columns have a 12px padding on either side that results in a 24px gutter between columns and a 12px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant. + + + + +
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
7
+
+
+
8
+
+
+
9
+
+
+
10
+
+
+
11
+
+
+
12
+
+
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
+
+
col-3
+
+
+
col-3
+
+
+
col-3
+
+
+
col-3
+
+
+
+
+
col-4
+
+
+
col-4
+
+
+
col-4
+
+
+
+
+
col-6
+
+
+
col-6
+
+
+
+
+
col-12
+
+
+
+ +### Grid offset +
+
+
+
.col-4
+
+
+
.col-4.offset-4
+
+
+
+
+
.col-3.offset-3
+
+
+
.col-3.offset-3
+
+
+
+
+
.col-6.offset-3
+
+
+
+ diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx new file mode 100644 index 000000000..fbf776945 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx @@ -0,0 +1,94 @@ +import {Meta, IconGallery, IconItem} from '@storybook/addon-docs'; +import {assetsPath, iconsData, iconsBrandedData, iconsADUnitData, iconsABTestData} from "./iconsData"; + + + + +# Icons + +**Phosphor** (v2.0.0) provides a set of commonly used interface icons you can use in your project. +
+ +
**View in Figma**
+
+ +In additional to the icons provided by Phosphor, we also provide a set of icons that are commonly used in our **V4 style** components. + +### Usage +Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` and +```imports: [CommonModule, IconModule,.....``` in your static component or module +`````` in your template. + +**ICON_NAME** here it path to icon, for example: `````` + +**Phosphor icons** use name prefix "ph". +For example: `````` + +**Monochrome icons** get current color of element-wrapper. + +**Colored icons**, like on **A/B test** section, need add class **"fu-colored"** to the icon component: ``````. + + +
Branded
(icon name prefix: "v4/branded")
+
+ + { + iconsBrandedData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
+ +
Ad Unit
(icon name prefix: "v4/ad-unit")
+
+ + { + iconsADUnitData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
+ +
A/B test
(icon name prefix: "v4/ab-test")
+
+ + { + iconsABTestData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts new file mode 100644 index 000000000..81ece3098 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts @@ -0,0 +1,175 @@ +export const assetsPath = 'https://fusion.ironsrc.net/assets/icons/'; + +/* todo: This icons that has on V4 CDN from Phosphor icons library. We start use it fo the new layout (sidebar, header, etc.) + * Add to the the task ISCT part about update this icons using from Phosphor and remove it from V4*/ +/*export const iconsData = [ + { + name: 'add', + path: 'v4/add.svg' + }, + { + name: 'arrow_square_out', + path: 'v4/arrow_square_out.svg' + }, + { + name: 'arrowLineLeft', + path: 'v4/arrowLineLeft.svg' + }, + { + name: 'arrowLineRight', + path: 'v4/arrowLineRight.svg' + }, + { + name: 'bank', + path: 'v4/bank.svg' + }, + { + name: 'caret_down', + path: 'v4/caret_down.svg' + }, + { + name: 'caret_right', + path: 'v4/caret_right.svg' + }, + { + name: 'chart_line_up', + path: 'v4/chart_line_up.svg' + }, + { + name: 'currency-circle-dollar', + path: 'v4/currency-circle-dollar.svg' + }, + { + name: 'dashboard', + path: 'v4/dashboard.svg' + }, + { + name: 'faders', + path: 'v4/faders.svg' + }, + { + name: 'house', + path: 'v4/house.svg' + }, + { + name: 'lightning', + path: 'v4/lightning.svg' + }, + { + name: 'logout', + path: 'v4/logout.svg' + }, + { + name: 'mail_outline', + path: 'v4/mail_outline.svg' + }, + { + name: 'medal', + path: 'v4/medal.svg' + }, + { + name: 'mediation', + path: 'v4/mediation.svg' + }, + { + name: 'placeholder', + path: 'v4/placeholder.svg' + }, + { + name: 'question', + path: 'v4/question.svg' + }, + { + name: 'rocket_launch', + path: 'v4/rocket_launch.svg' + }, + { + name: 'sketch-logo', + path: 'v4/sketch-logo.svg' + }, + { + name: 'userCircle', + path: 'v4/userCircle.svg' + }, + { + name: 'wrench', + path: 'v4/wrench.svg' + } +];*/ + +export const iconsBrandedData = [ + { + name: 'android', + path: 'v4/branded/android.svg' + }, + { + name: 'app-store', + path: 'v4/branded/app-store.svg' + }, + { + name: 'bidding', + path: 'v4/branded/bidding.svg' + }, + { + name: 'google-play', + path: 'v4/branded/google-play.svg' + }, + { + name: 'ios', + path: 'v4/branded/ios.svg' + }, + { + name: 'ironsource', + path: 'v4/branded/ironsource.svg' + }, + { + name: 'unity', + path: 'v4/branded/unity.svg' + }, + { + name: 'web-app.svg', + path: 'v4/branded/web-app.svg' + } +]; + +export const iconsADUnitData = [ + { + name: 'banner', + path: 'v4/ad-unit/banner.svg' + }, + { + name: 'interstitial', + path: 'v4/ad-unit/interstitial.svg' + }, + { + name: 'native', + path: 'v4/ad-unit/native.svg' + }, + { + name: 'offerwall', + path: 'v4/ad-unit/offerwall.svg' + }, + { + name: 'reworded-video', + path: 'v4/ad-unit/reworded-video.svg' + } +]; + +export const iconsABTestData = [ + { + name: 'ab', + path: 'v4/ab-test/ab.svg' + }, + { + name: '2a', + path: 'v4/ab-test/2a.svg' + }, + { + name: '2b', + path: 'v4/ab-test/2b.svg' + }, + { + name: 'ab-gray', + path: 'v4/ab-test/ab-gray.svg' + } +]; diff --git a/projects/fusion-ui/storybook-foundations/v4/shadows.mdx b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx new file mode 100644 index 000000000..fa75e4b47 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx @@ -0,0 +1,110 @@ +import {Meta} from '@storybook/addon-docs'; +import { Source } from '@storybook/blocks'; + + + +# Elevations (shadows) + +CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating. + +To use our shadows scss variables add in your *.scss +```css + @import '~@ironsource/fusion-ui/style/v4/vars/shadows'; +``` +Or Import css file for *.css with shadow classes +```css + @import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +``` + +## Elevations: +
+
+
+
xsmall
+
+
+
+
small
+
+
+
+
medium
+
+
+
+
large
+
+
+
+
xlarge
+
+
+
+
xxlarge
+
+
+
+
xxxlarge
+
+
+
+
slarge
+
+
+
+
+ +


+### CSS variables + + +


+### SCSS variables + + + diff --git a/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx new file mode 100644 index 000000000..9912f7e5c --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx @@ -0,0 +1,198 @@ +import {Meta, Source} from '@storybook/addon-docs'; +import {spacingData} from './spacingData'; + + + + + +# Spacing +Positioning UI should be with taught including the empty space between components. This is what creates relationships and hierarchy withing the visual controls. + +Import style-guide.css file for css variables +```css +@import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +``` + + +
+ { + spacingData.map(spacing => { + return ( +
+
+
 
+
+
{spacing.name}
+
{spacing.value}
+
+ ) + }) + } +
+ +### Example +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +


+### CSS variables +from `@ironsource/fusion-ui/style/v4/style-guide.css` + + diff --git a/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts b/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts new file mode 100644 index 000000000..69155efea --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts @@ -0,0 +1,87 @@ +export const spacingData = [ + { + name: '#25', + cssName: '--spacing-25', + value: '2px' + }, + { + name: '#50', + cssName: '--spacing-50', + value: '4px' + }, + { + name: '#75', + cssName: '--spacing-75', + value: '6px' + }, + { + name: '#100', + cssName: '--spacing-100', + value: '8px' + }, + { + name: '#125', + cssName: '--spacing-125', + value: '10px' + }, + { + name: '#150', + cssName: '--spacing-150', + value: '12px' + }, + { + name: '#200', + cssName: '--spacing-200', + value: '16px' + }, + { + name: '#250', + cssName: '--spacing-250', + value: '20px' + }, + { + name: '#300', + cssName: '--spacing-300', + value: '24px' + }, + { + name: '#400', + cssName: '--spacing-400', + value: '32px' + }, + { + name: '#500', + cssName: '--spacing-500', + value: '40px' + }, + { + name: '#600', + cssName: '--spacing-600', + value: '48px' + }, + { + name: '#700', + cssName: '--spacing-700', + value: '56px' + }, + { + name: '#800', + cssName: '--spacing-800', + value: '64px' + }, + { + name: '#900', + cssName: '--spacing-900', + value: '72px' + }, + { + name: '#1000', + cssName: '--spacing-1000', + value: '80px' + }, + { + name: '#tokenset', + cssName: '--spacing-tokenset', + value: '0px' + } +]; diff --git a/projects/fusion-ui/components/typography-v4.mdx b/projects/fusion-ui/storybook-foundations/v4/typography.mdx similarity index 96% rename from projects/fusion-ui/components/typography-v4.mdx rename to projects/fusion-ui/storybook-foundations/v4/typography.mdx index 8375eb67f..503cfbdb7 100644 --- a/projects/fusion-ui/components/typography-v4.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/typography.mdx @@ -1,6 +1,6 @@ import {Meta, Source} from '@storybook/addon-docs'; - + # Typography @@ -179,15 +179,45 @@ Or Import css file for *.css
-
table header
-
.font-v4-table-header
-
%font-v4-table-header
+
tableLabel
+
.font-v4-table-label
+
%font-v4-table-label
Semibold (600)
13px
20px
0.13px
+
+
inputLabel
+
.font-v4-input-label
+
%font-v4-input-label
+
Medium (500)
+
13px
+
16px
+
0.13px
+
+ +
+
tabLabel1
+
.font-v4-tab-label-1
+
%font-v4-tab-label-1
+
Medium (500)
+
14px
+
16px
+
---
+
+ +
+
tabLabel2
+
.font-v4-tab-label-2
+
%font-v4-tab-label-2
+
Bold (700)
+
14px
+
16px
+
---
+
+
chip label
.font-v4-chip-label
@@ -236,8 +266,11 @@ Or Import css file for *.css
Button
Overline
Caption
-
Table header
-
chip label
+
Table label
+
Input label
+
Tab label 1
+
Tab label 2
+
Chip label
Chart 1
chart 2
`} /> @@ -250,6 +283,7 @@ Or Import css file for *.css .font-v4-semibold {@extend %font-v4-semibold; } .font-v4-medium {@extend %font-v4-medium;} .font-v4-regular {@extend %font-v4-regular;} + .font-v4-title {@extend %font-v4-title;} .font-v4-heading-1 {@extend %font-v4-heading-1;} .font-v4-heading-2 {@extend %font-v4-heading-2;} @@ -268,8 +302,11 @@ Or Import css file for *.css .font-v4-caption {@extend %font-v4-caption;} .font-v4-table-header {@extend %font-v4-table-header;} .font-v4-input-label {@extend %font-v4-input-label;} -.font-v4-tab-label {@extend %font-v4-tab-label;} +.font-v4-tab-label-1 {@extend %font-v4-tab-label-1;} +.font-v4-tab-label-2 {@extend %font-v4-tab-label-2;} .font-v4-chip-label {@extend %font-v4-chip-label;} +.font-v4-chart-1 {@extend %font-v4-chart-1;} +.font-v4-chart-2 {@extend %font-v4-chart-2;} `} /> diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh index 21de162d9..98c0168a0 100644 --- a/scripts/build-styles.sh +++ b/scripts/build-styles.sh @@ -57,6 +57,12 @@ sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fon sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed +# copy and compile shadows v4 +sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed + +# common v4 style-guide +sass projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-guide.css -s compressed + echo -e "${GREEN}-- copy and compile default fonts and grid by last (v3) versions ${NOCOLOR}" # compile default fonts (last version default - 3 )