-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(isct-97): add colors v4 scss and base story
- Loading branch information
Showing
13 changed files
with
483 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| @import './vars/colors'; | ||
|
|
||
| /* region css variables */ | ||
| .fusion-v4 { | ||
| --background-default: #{$color-v4-background-default}; | ||
| --background-paper: #{$color-v4-background-paper}; | ||
| --background-model-elevation: #{$color-v4-background-model-elevation}; | ||
| --background-backdrop: #{$color-v4-background-backdrop}; | ||
| --background-paper-elevation-0: #{$color-v4-background-paper-elevation-0}; | ||
| --background-paper-elevation-1: #{$color-v4-background-paper-elevation-1}; | ||
| --background-paper-elevation-2: #{$color-v4-background-paper-elevation-2}; | ||
| --background-paper-elevation-3: #{$color-v4-background-paper-elevation-3}; | ||
| --background-paper-elevation-4: #{$color-v4-background-paper-elevation-4}; | ||
| --background-paper-elevation-5: #{$color-v4-background-paper-elevation-5}; | ||
| --background-paper-elevation-6: #{$color-v4-background-paper-elevation-6}; | ||
| --background-paper-elevation-7: #{$color-v4-background-paper-elevation-7}; | ||
| --background-paper-elevation-8: #{$color-v4-background-paper-elevation-8}; | ||
| --background-paper-elevation-9: #{$color-v4-background-paper-elevation-9}; | ||
|
|
||
| --action-primary: #{$color-v4-action-primary}; | ||
| --action-active: #{$color-v4-action-active}; | ||
| --action-hover: #{$color-v4-action-hover}; | ||
| --action-selected: #{$color-v4-action-selected}; | ||
| --action-disabled: #{$color-v4-action-disabled}; | ||
| --action-disabled-background: #{$color-v4-action-disabled-background}; | ||
| --action-focus: #{$color-v4-action-focus}; | ||
| --action-outlined-border: #{$color-v4-action-outlined-border}; | ||
|
|
||
| --default-light: #{$color-v4-default-light}; | ||
| --default-main: #{$color-v4-default-main}; | ||
| --default-dark: #{$color-v4-default-dark}; | ||
| --default-outlined-border: #{$color-v4-default-outlined-border}; | ||
| --default-contrast-text: #{$color-v4-default-contrast-text}; | ||
| --default-button-contrast-text: #{$color-v4-default-button-contrast-text}; | ||
|
|
||
| --common-white: #{$color-v4-common-white}; | ||
| --common-black: #{$color-v4-common-black}; | ||
| --common-inverse-white: #{$color-v4-common-inverse-white}; | ||
| --common-inverse-black: #{$color-v4-common-inverse-black}; | ||
| --common-divider: #{$color-v4-common-divider}; | ||
| --common-divider-elevation-0: #{$color-v4-common-divider-elevation-0}; | ||
|
|
||
| --text-primary: #{$color-v4-text-primary}; | ||
| --text-secondary: #{$color-v4-text-secondary}; | ||
| --text-disabled: #{$color-v4-text-disabled}; | ||
|
|
||
| --primary-lighter: #{$color-v4-primary-lighter}; | ||
| --primary-light: #{$color-v4-primary-light}; | ||
| --primary-main: #{$color-v4-primary-main}; | ||
| --primary-main-8-p: #{$color-v4-primary-main-8-p}; | ||
| --primary-main-50-p: #{$color-v4-primary-main-50-p}; | ||
| --primary-dark: #{$color-v4-primary-dark}; | ||
| --primary-darker: #{$color-v4-primary-darker}; | ||
| --primary-outlined-border: #{$color-v4-primary-outlined-border}; | ||
| --primary-contrast-text: #{$color-v4-primary-contrast-text}; | ||
| --primary-button-contrast-text: #{$color-v4-primary-button-contrast-text}; | ||
|
|
||
| --info-lighter: #{$color-v4-info-lighter}; | ||
| --info-light: #{$color-v4-info-light}; | ||
| --info-main: #{$color-v4-info-main}; | ||
| --info-main-8-p: #{$color-v4-info-main-8-p}; | ||
| --info-main-50-p: #{$color-v4-info-main-50-p}; | ||
| --info-dark: #{$color-v4-info-dark}; | ||
| --info-darker: #{$color-v4-info-darker}; | ||
| --info-outlined-border: #{$color-v4-info-outlined-border}; | ||
| --info-contrast-text: #{$color-v4-info-contrast-text}; | ||
| --info-button-contrast-text: #{$color-v4-info-button-contrast-text}; | ||
|
|
||
| --success-lighter: #{$color-v4-success-lighter}; | ||
| --success-light: #{$color-v4-success-light}; | ||
| --success-main: #{$color-v4-success-main}; | ||
| --success-main-8-p: #{$color-v4-success-main-8-p}; | ||
| --success-main-50-p: #{$color-v4-success-main-50-p}; | ||
| --success-dark: #{$color-v4-success-dark}; | ||
| --success-darker: #{$color-v4-success-darker}; | ||
| --success-outlined-border: #{$color-v4-success-outlined-border}; | ||
| --success-contrast-text: #{$color-v4-success-contrast-text}; | ||
| --success-button-contrast-text: #{$color-v4-success-button-contrast-text}; | ||
|
|
||
| --warning-lighter: #{$color-v4-warning-lighter}; | ||
| --warning-light: #{$color-v4-warning-light}; | ||
| --warning-main: #{$color-v4-warning-main}; | ||
| --warning-main-8-p: #{$color-v4-warning-main-8-p}; | ||
| --warning-main-50-p: #{$color-v4-warning-main-50-p}; | ||
| --warning-dark: #{$color-v4-warning-dark}; | ||
| --warning-darker: #{$color-v4-warning-darker}; | ||
| --warning-outlined-border: #{$color-v4-warning-outlined-border}; | ||
| --warning-contrast-text: #{$color-v4-warning-contrast-text}; | ||
| --warning-button-contrast-text: #{$color-v4-warning-button-contrast-text}; | ||
|
|
||
| --error-lighter: #{$color-v4-error-lighter}; | ||
| --error-light: #{$color-v4-error-light}; | ||
| --error-main: #{$color-v4-error-main}; | ||
| --error-main-8-p: #{$color-v4-error-main-8-p}; | ||
| --error-main-50-p: #{$color-v4-error-main-50-p}; | ||
| --error-dark: #{$color-v4-error-dark}; | ||
| --error-darker: #{$color-v4-error-darker}; | ||
| --error-outlined-border: #{$color-v4-error-outlined-border}; | ||
| --error-contrast-text: #{$color-v4-error-contrast-text}; | ||
| --error-button-contrast-text: #{$color-v4-error-button-contrast-text}; | ||
|
|
||
| --aba: #{$color-v4-aba}; | ||
| --abb: #{$color-v4-abb}; | ||
| } | ||
| /* endregion css variables */ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| @import './fonts'; | ||
| @import './colors'; | ||
| @import './shadows'; | ||
| @import './grid'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <div class="colors-wrapper fusion-v4"> | ||
| <div *ngFor="let colorGroup of colorPalette | keyvalue: keepOrder" class="color-block"> | ||
| <div class="color-label">{{ colorGroup.key }}</div> | ||
| <div class="colors-holder"> | ||
| <div class="color-title"> | ||
| <div>Name</div> | ||
| <div>Value</div> | ||
| </div> | ||
| <div *ngFor="let token of colorGroup.value | keyvalue: keepOrder" class="color-row"> | ||
| <div> | ||
| <div class="icon-holder"></div> | ||
| {{ token.key }} | ||
| </div> | ||
| <div> | ||
| <div class="color-example" [style.background-color]="token.value"></div> | ||
| {{ token.value }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
80 changes: 80 additions & 0 deletions
80
projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| @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; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
19 changes: 19 additions & 0 deletions
19
projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| 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; | ||
| }; | ||
| } |
Oops, something went wrong.