From 1ee580ebf1e278c452099a49dfdd496a9b8bac86 Mon Sep 17 00:00:00 2001 From: Elain T Date: Mon, 20 Sep 2021 13:38:10 -0400 Subject: [PATCH] feat(design): create theming CSS custom properties (#1836) --- .../design-land/src/app/app-routing.module.ts | 1 + apps/design-land/src/app/app.component.html | 1 + .../variables/variables-routing.module.ts | 21 +++++++ .../variables/variables.component.html | 57 +++++++++++++++++++ .../variables/variables.component.scss | 8 +++ .../variables/variables.component.spec.ts | 31 ++++++++++ .../variables/variables.component.ts | 7 +++ .../foundations/variables/variables.module.ts | 21 +++++++ .../src/scss/theming/_configure-theme.scss | 4 +- .../scss/theming/_theme-css-variables.scss | 29 ++++++++++ libs/design/src/scss/theming/_theme.scss | 9 ++- 11 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 apps/design-land/src/app/foundations/variables/variables-routing.module.ts create mode 100644 apps/design-land/src/app/foundations/variables/variables.component.html create mode 100644 apps/design-land/src/app/foundations/variables/variables.component.scss create mode 100644 apps/design-land/src/app/foundations/variables/variables.component.spec.ts create mode 100644 apps/design-land/src/app/foundations/variables/variables.component.ts create mode 100644 apps/design-land/src/app/foundations/variables/variables.module.ts create mode 100644 libs/design/src/scss/theming/_theme-css-variables.scss diff --git a/apps/design-land/src/app/app-routing.module.ts b/apps/design-land/src/app/app-routing.module.ts index e5516f046a..9fbc794f63 100644 --- a/apps/design-land/src/app/app-routing.module.ts +++ b/apps/design-land/src/app/app-routing.module.ts @@ -36,6 +36,7 @@ export const appRoutes: Routes = [ { path: 'sidebar', loadChildren: () => import('./sidebar/sidebar.module').then(m => m.DesignLandSidebarModule) }, { path: 'radio', loadChildren: () => import('./radio/radio.module').then(m => m.DesignLandRadioModule) }, { path: 'typography', loadChildren: () => import('./typography/typography.module').then(m => m.DesignLandTypographyModule) }, + { path: 'variables', loadChildren: () => import('./foundations/variables/variables.module').then(m => m.DesignLandVariablesModule) }, ]; @NgModule({ diff --git a/apps/design-land/src/app/app.component.html b/apps/design-land/src/app/app.component.html index 85335a9fa9..f3e5c56baa 100644 --- a/apps/design-land/src/app/app.component.html +++ b/apps/design-land/src/app/app.component.html @@ -4,6 +4,7 @@
Foundations
Color Typography + Variables
Atoms
diff --git a/apps/design-land/src/app/foundations/variables/variables-routing.module.ts b/apps/design-land/src/app/foundations/variables/variables-routing.module.ts new file mode 100644 index 0000000000..7168f55b4c --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { + Routes, + RouterModule, +} from '@angular/router'; + +import { DesignLandVariablesComponent } from './variables.component'; + +export const variablesRoutes: Routes = [ + { path: '', component: DesignLandVariablesComponent }, +]; + +@NgModule({ + imports: [ + RouterModule.forChild(variablesRoutes), + ], + exports: [ + RouterModule, + ], +}) +export class DesignLandVariablesRoutingModule {} diff --git a/apps/design-land/src/app/foundations/variables/variables.component.html b/apps/design-land/src/app/foundations/variables/variables.component.html new file mode 100644 index 0000000000..4bee0950b9 --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables.component.html @@ -0,0 +1,57 @@ + +

Variables

+

Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.

+ +

CSS Custom Properties

+

Our custom properties are prefixed with daff- to avoid conflicts with third party variables.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDescription
--daff-theme-rgbThe theme's base color in RGB
--daff-theme-contrast-rgbThe theme's base contrast color in RGB
--daff-themeThe theme's base color
--daff-theme-contrastThe theme's base contrast color
--daff-theme-primaryThe theme's primary color
--daff-theme-secondaryThe theme's secondary color
--daff-theme-tertiaryThe theme's tertiary color
--daff-theme-warnThe theme's warning color
--daff-theme-successThe theme's success color
--daff-theme-dangerThe theme's danger color
+ \ No newline at end of file diff --git a/apps/design-land/src/app/foundations/variables/variables.component.scss b/apps/design-land/src/app/foundations/variables/variables.component.scss new file mode 100644 index 0000000000..f4cef96b07 --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables.component.scss @@ -0,0 +1,8 @@ +@import 'utilities'; +@import 'theme'; + +.variables { + &__custom { + background: var(--daff-theme-primary); + } +} \ No newline at end of file diff --git a/apps/design-land/src/app/foundations/variables/variables.component.spec.ts b/apps/design-land/src/app/foundations/variables/variables.component.spec.ts new file mode 100644 index 0000000000..078f022550 --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables.component.spec.ts @@ -0,0 +1,31 @@ +import { + waitForAsync, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; + +import { DesignLandVariablesComponent } from './variables.component'; + +describe('DesignLandVariablesComponent', () => { + let component: DesignLandVariablesComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + DesignLandVariablesComponent, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DesignLandVariablesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/design-land/src/app/foundations/variables/variables.component.ts b/apps/design-land/src/app/foundations/variables/variables.component.ts new file mode 100644 index 0000000000..a8c7306217 --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'design-land-variables', + templateUrl: './variables.component.html', +}) +export class DesignLandVariablesComponent {} diff --git a/apps/design-land/src/app/foundations/variables/variables.module.ts b/apps/design-land/src/app/foundations/variables/variables.module.ts new file mode 100644 index 0000000000..55255e4a35 --- /dev/null +++ b/apps/design-land/src/app/foundations/variables/variables.module.ts @@ -0,0 +1,21 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { DaffArticleModule } from '@daffodil/design'; + +import { DesignLandExampleViewerModule } from '../../core/code-preview/container/example-viewer.module'; +import { DesignLandVariablesRoutingModule } from './variables-routing.module'; +import { DesignLandVariablesComponent } from './variables.component'; + +@NgModule({ + declarations: [ + DesignLandVariablesComponent, + ], + imports: [ + CommonModule, + DesignLandExampleViewerModule, + DesignLandVariablesRoutingModule, + DaffArticleModule, + ], +}) +export class DesignLandVariablesModule {} diff --git a/libs/design/src/scss/theming/_configure-theme.scss b/libs/design/src/scss/theming/_configure-theme.scss index 0434de1714..9f065ac80e 100644 --- a/libs/design/src/scss/theming/_configure-theme.scss +++ b/libs/design/src/scss/theming/_configure-theme.scss @@ -8,7 +8,7 @@ $daff-light-theme: ( 'base-contrast': daff-color($daff-gray, 110), 'white': daff-color($daff-gray, 0), 'black': daff-color($daff-gray, 110), - 'gray': $daff-gray + 'gray': daff-configure-palette($daff-gray, 60) ); $daff-dark-theme: ( @@ -17,7 +17,7 @@ $daff-dark-theme: ( 'base-contrast': daff-color($daff-gray, 0), 'white': daff-color($daff-gray, 0), 'black': daff-color($daff-gray, 110), - 'gray': $daff-gray + 'gray': daff-configure-palette($daff-gray, 60) ); $supported-theme-types: ( diff --git a/libs/design/src/scss/theming/_theme-css-variables.scss b/libs/design/src/scss/theming/_theme-css-variables.scss new file mode 100644 index 0000000000..d02c2964fa --- /dev/null +++ b/libs/design/src/scss/theming/_theme-css-variables.scss @@ -0,0 +1,29 @@ +@mixin daff-theme-css-variables($theme) { + $base: daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-map-deep-get($theme, 'core.base-contrast'); + $primary: map-get($theme, primary); + $secondary: map-get($theme, secondary); + $tertiary: map-get($theme, tertiary); + $white: daff-map-deep-get($theme, 'core.white'); + $black: daff-map-deep-get($theme, 'core.black'); + $gray: daff-map-deep-get($theme, 'core.gray'); + + // @docs + // + // Global theming css variables + :root { + --daff-theme-rgb: #{red($base), green($base), blue($base)}; + --daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast), blue($base-contrast)}; + --daff-theme: #{$base}; + --daff-theme-contrast: #{$base-contrast}; + --daff-theme-primary: #{daff-color($primary)}; + --daff-theme-secondary: #{daff-color($secondary)}; + --daff-theme-tertiary: #{daff-color($tertiary)}; + --daff-theme-warn: #{daff-color($daff-bronze, 60)}; + --daff-theme-success: #{daff-color($daff-green, 60)}; + --daff-theme-danger: #{daff-color($daff-red, 60)}; + --daff-theme-white: #{$white}; + --daff-theme-black: #{$black}; + --daff-theme-gray: #{daff-color($gray)}; + } +}; diff --git a/libs/design/src/scss/theming/_theme.scss b/libs/design/src/scss/theming/_theme.scss index 8e7525f1d6..524d4b30fd 100644 --- a/libs/design/src/scss/theming/_theme.scss +++ b/libs/design/src/scss/theming/_theme.scss @@ -1,3 +1,5 @@ +@import './theme-css-variables'; + @import '../../atoms/button/button-theme'; @import '../../atoms/form/error-message/error-message-theme'; @import '../../atoms/form/form-field/form-field/form-field-theme'; @@ -27,7 +29,10 @@ // @include daff-theme($theme); // ``` @mixin daff-theme($theme) { - //Atoms + // CSS variables + @include daff-theme-css-variables($theme); + + // Atoms @include daff-button-theme($theme); @include daff-error-message-theme($theme); @include daff-form-field-theme($theme); @@ -36,7 +41,7 @@ @include daff-progress-indicator-theme($theme); @include daff-loading-icon-theme($theme); - //Molecules + // Molecules @include daff-accordion-item-theme($theme); @include daff-article-theme($theme); @include daff-callout-theme($theme);