diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html deleted file mode 100644 index da3b7f026..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
{{ colorGroup.key }}
-
-
-
Name
-
Value
-
-
-
-
- {{ token.key }} -
-
-
- {{ token.value }} -
-
-
-
-
diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss deleted file mode 100644 index 1a8def690..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss +++ /dev/null @@ -1,80 +0,0 @@ -@import '../../../src/style/scss/v4/fonts'; -@import '../../../src/style/scss/v4/colors'; - -.colors-wrapper { - display: flex; - flex-wrap: wrap; - gap: 32px; - margin: 32px; - padding-bottom: 32px; - .color-block { - width: 425px; - background-color: var(--background-default); - - .color-label { - padding: 1.5rem 1rem 0.75rem 1rem; - color: var(--text-primary); - border: solid 1px var(--common-divider); - @extend %font-v4-heading-1; - &:first-letter { - text-transform: uppercase; - } - } - .color-title { - display: flex; - color: var(--text-primary); - border: solid 1px var(--common-divider); - border-top: 0px; - div { - @extend %font-v4-table-label; - padding: 0.25rem 1rem; - width: 50%; - height: 2.5rem; - display: flex; - align-items: center; - } - } - .color-row { - display: flex; - color: var(--text-primary); - div { - border: solid 1px var(--common-divider); - border-top: 0px; - display: flex; - align-items: center; - height: 2.5rem; - padding: 0.25rem 1rem; - width: 50%; - @extend %font-v4-caption; - &:first-of-type { - display: flex; - gap: 0.5rem; - .icon-holder { - padding: 0; - margin: 0; - width: 16px; - height: 16px; - border: none; - - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='gray' d='M12.548 3.368A6.454 6.454 0 0 0 8 1.5h-.067A6.5 6.5 0 0 0 1.5 8c0 2.688 1.661 4.941 4.335 5.886A2 2 0 0 0 8.5 12a1 1 0 0 1 1-1h2.888a1.988 1.988 0 0 0 1.95-1.555c.112-.492.166-.995.162-1.5a6.457 6.457 0 0 0-1.952-4.577Zm.813 5.857a.993.993 0 0 1-.973.775H9.5a2 2 0 0 0-2 2 1 1 0 0 1-1.332.942C3.906 12.144 2.5 10.25 2.5 8a5.5 5.5 0 0 1 5.443-5.5H8a5.522 5.522 0 0 1 5.5 5.453c.004.428-.042.855-.136 1.272h-.002ZM8.75 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM6 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm5.5-3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - } - } - &:last-of-type { - border-left: 0px; - display: flex; - gap: 0.5rem; - } - .color-example { - padding: 0; - margin: 0; - width: 16px; - height: 16px; - border: solid 1px var(--common-divider); - border-radius: 0.1875rem; - } - } - } - } -} diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts deleted file mode 100644 index 4572bb324..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {colorPaletteLight} from './colorsData'; - -@Component({ - selector: 'fusion-colors-palette', - standalone: true, - imports: [CommonModule], - templateUrl: './colors-palette.component.html', - styleUrls: ['./colors-palette.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ColorsPaletteComponent { - colorPalette = colorPaletteLight; - - keepOrder = (a, b) => { - return a; - }; -} diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts deleted file mode 100644 index bacae4243..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type {Meta, StoryObj} from '@storybook/angular'; -import {moduleMetadata} from '@storybook/angular'; -import {CommonModule} from '@angular/common'; -import {ColorsPaletteComponent} from './colors-palette.component'; - -const meta: Meta = { - title: 'V4/Foundation/Palette colors', - component: ColorsPaletteComponent, - decorators: [ - moduleMetadata({ - declarations: [], - imports: [CommonModule] - }) - ] -}; - -export default meta; -type Story = StoryObj; - -export const Palette: Story = { - name: 'Palette colors' -}; diff --git a/projects/fusion-ui/storybook-foundations/v4/colors.mdx b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx similarity index 72% rename from projects/fusion-ui/storybook-foundations/v4/colors.mdx rename to projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx index 7993a6a27..da56eeb4e 100644 --- a/projects/fusion-ui/storybook-foundations/v4/colors.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx @@ -1,5 +1,5 @@ -import {Meta, Canvas, Source} from '@storybook/addon-docs'; -import * as ColorsPaletteComponent from './colors-palette/colors-palette.stories'; +import {Meta, Source} from '@storybook/addon-docs'; +import {colorPaletteLight} from './colorsData'; @@ -13,7 +13,118 @@ To use our colors scss variable add in your *.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`