feat(design): create theming CSS custom properties (#1836)

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({

apps/design-land/src/app/app.component.html

@@ -4,6 +4,7 @@
       <div daffLinkSetHeading>Foundations</div>
       <a daff-link-set-item routerLink="color">Color</a>
       <a daff-link-set-item routerLink="typography">Typography</a>
+      <a daff-link-set-item routerLink="variables">Variables</a>
     </daff-link-set>
     <daff-link-set>
       <div daffLinkSetHeading>Atoms</div>

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 {}

apps/design-land/src/app/foundations/variables/variables.component.html

@@ -0,0 +1,57 @@
+<daff-article>
+	<h1 daffArticleTitle>Variables</h1>
+	<p daffArticleLead>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.</p>
+
+	<h2>CSS Custom Properties</h2>
+	<p>Our custom properties are prefixed with <code>daff-</code> to avoid conflicts with third party variables.</p>
+	<table>
+		<thead>
+			<tr>
+				<th>Variable</th>
+				<th>Description</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>--daff-theme-rgb</td>
+				<td>The theme's base color in RGB</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-contrast-rgb</td>
+				<td>The theme's base contrast color in RGB</td>
+			</tr>
+			<tr>
+				<td>--daff-theme</td>
+				<td>The theme's base color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-contrast</td>
+				<td>The theme's base contrast color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-primary</td>
+				<td>The theme's primary color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-secondary</td>
+				<td>The theme's secondary color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-tertiary</td>
+				<td>The theme's tertiary color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-warn</td>
+				<td>The theme's warning color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-success</td>
+				<td>The theme's success color</td>
+			</tr>
+			<tr>
+				<td>--daff-theme-danger</td>
+				<td>The theme's danger color</td>
+			</tr>
+		</tbody>
+	</table>
+</daff-article>

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);
+	}
+}

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<DesignLandVariablesComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DesignLandVariablesComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignLandVariablesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {}

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 {}

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: (

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)};
+	}
+};

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);