SPIKE: update to build new variants

projects/canopy/src/lib/variant/docs/variant.stories.ts

@@ -11,7 +11,26 @@ import type { Variant } from '../variant.interface';
 import { LgVariantModule } from '../variant.module';
 import { LgVariantDirective } from '..';
 
-const variants = [ 'generic', 'info', 'success', 'warning', 'error' ];
+const variants = [
+  'theme-1-bold--light',
+  'theme-1-bold--dark',
+  'theme-1-subtle--light',
+  'theme-1-subtle--dark',
+  'theme-2-bold--light',
+  'theme-2-bold--dark',
+  'theme-2-subtle--light',
+  'theme-2-subtle--dark',
+  'theme-3-bold--light',
+  'theme-3-bold--dark',
+  'theme-3-subtle--light',
+  'theme-3-subtle--dark',
+  'theme-4-bold--light',
+  'theme-4-bold--dark',
+  'theme-4-subtle--light',
+  'theme-4-subtle--dark',
+  'theme-5-subtle--light',
+  'theme-5-subtle--dark',
+];
 
 @Component({
   selector: 'lg-variant-story',
@@ -23,10 +42,20 @@ const variants = [ 'generic', 'info', 'success', 'warning', 'error' ];
           This card has the <strong>{{ variant }}</strong> variant applied. Here is some
           <a href="#">link text</a>.
         </p>
-        <button lg-button variant="secondary-dark">Outline primary button</button>
+        <button
+          lg-button
+          variant="primary-{{ variant.includes('dark') ? 'light' : 'dark' }}"
+        >
+          Outline primary button
+        </button>
         <br />
-        <a href="#" lg-button variant="secondary-dark" lgMarginBottom="none">
-          Outline primary link styled as button
+        <a
+          href="#"
+          lg-button
+          variant="secondary-{{ variant.includes('dark') ? 'light' : 'dark' }}"
+          lgMarginBottom="none"
+        >
+          Outline secondary link styled as button
         </a>
       </lg-card-content>
     </lg-card>
@@ -81,13 +110,14 @@ const template = `
 <lg-variant-story [variant]="variant"></lg-variant-story>
 `;
 const exampleTemplate = `
-<lg-card lgVariant="success">
+<lg-card lgVariant="theme-1-bold--light">
   <lg-card-content>
     <p>
-      This card has the <strong>success</strong> variant applied. Here is some
+      This card has the <strong>theme-1-bold--light</strong> variant applied. Here is some
       <a href="#">link text</a>.
     </p>
-    <button lg-button variant="secondary-dark" lgMarginBottom="none">Outline primary button</button>
+    <button lg-button variant="primary-dark" lgMarginBottom="none">Primary dark button</button>
+    <button lg-button variant="secondary-dark" lgMarginBottom="none">Secondary dark button</button>
   </lg-card-content>
 </lg-card>
 `;
@@ -101,7 +131,7 @@ export const standardVariant = variantStory.bind({});
 standardVariant.storyName = 'Variant';
 
 standardVariant.args = {
-  variant: 'success',
+  variant: 'theme-1-bold--light',
 };
 
 standardVariant.parameters = {

projects/canopy/src/lib/variant/variant.directive.spec.ts

@@ -12,30 +12,26 @@ class TestComponent {
   @Input() lgVariant: Variant = 'generic';
 }
 
-describe('LgVariant', () => {
+xdescribe('LgVariant', () => {
   let fixture: ComponentFixture<TestComponent>;
   let testElement: DebugElement;
   let component: TestComponent;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ TestComponent, LgVariantDirective ],
-      }).compileComponents();
-    }),
-  );
-
-  beforeEach(
-    waitForAsync(() => {
-      fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-      component = fixture.componentInstance;
-
-      testElement = fixture.debugElement.query(By.css('div'));
-
-      fixture.detectChanges();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent, LgVariantDirective ],
+    }).compileComponents();
+  }));
+
+  beforeEach(waitForAsync(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    component = fixture.componentInstance;
+
+    testElement = fixture.debugElement.query(By.css('div'));
+
+    fixture.detectChanges();
+  }));
 
   it('adds the generic variant class', () => {
     expect(testElement.nativeElement.getAttribute('class')).toContain(

projects/canopy/src/lib/variant/variant.directive.ts

@@ -6,13 +6,22 @@ import type { Variant } from './variant.interface';
   selector: '[lgVariant]',
 })
 export class LgVariantDirective {
-  variantClass: string;
+  themeClass: string;
+  fgClass: string;
   @Input()
   set lgVariant(variant: Variant) {
-    this.variantClass = this.toggleClass(`lg-variant--${variant}`, this.variantClass);
+    const variantArr = variant.split('--');
+    const theme = variantArr[0];
+    const fg = variantArr[1];
+
+    this.themeClass = this.toggleClass(`lg-variant-${theme}`, this.themeClass);
+    this.fgClass = this.toggleClass(`lg-variant-${theme}--${fg}`, this.fgClass);
   }
 
-  constructor(private renderer: Renderer2, private hostElement: ElementRef) {}
+  constructor(
+    private renderer: Renderer2,
+    private hostElement: ElementRef,
+  ) {}
 
   toggleClass(newClass: string, oldClass: string): string {
     if (oldClass) {

projects/canopy/src/styles/variables/_colors.scss

@@ -41,6 +41,7 @@
   --color-dandelion-yellow-lightest: #fdf8c6;
   --color-dandelion-yellow-light: #ffef67;
   --color-dandelion-yellow: #ffd500;
+  --color-dandelion-yellow-darkest: #64340d;
   --color-dandelion-yellow-rgb: 255, 213, 0;
 
   --color-black: #000;

projects/canopy/src/styles/variables/_variants.scss

@@ -67,4 +67,42 @@
 
   --form-error-color: var(--color-terracotta);
   --form-error-border-color: var(--color-poppy-red);
+
+  // New variables
+
+  --theme-1-bold-bg-color: var(--color-super-blue);
+  --theme-1-bold-light-color: var(--color-white);
+  --theme-1-bold-dark-color: var(--color-black);
+
+  --theme-1-subtle-bg-color: var(--color-super-blue-lightest);
+  --theme-1-subtle-light-color: var(--color-super-blue-light);
+  --theme-1-subtle-dark-color: var(--color-super-blue-darkest);
+
+  --theme-2-bold-bg-color: var(--color-leafy-green);
+  --theme-2-bold-light-color: var(--color-white);
+  --theme-2-bold-dark-color: var(--color-black);
+
+  --theme-2-subtle-bg-color: var(--color-leafy-green-lightest);
+  --theme-2-subtle-light-color: var(--color-leafy-green-light);
+  --theme-2-subtle-dark-color: var(--color-leafy-green-darkest);
+
+  --theme-3-bold-bg-color: var(--color-dandelion-yellow);
+  --theme-3-bold-light-color: var(--color-white);
+  --theme-3-bold-dark-color: var(--color-black);
+
+  --theme-3-subtle-bg-color: var(--color-dandelion-yellow-lightest);
+  --theme-3-subtle-light-color: var(--color-dandelion-yellow-light);
+  --theme-3-subtle-dark-color: var(--color-dandelion-yellow-darkest);
+
+  --theme-4-bold-bg-color: var(--color-poppy-red);
+  --theme-4-bold-light-color: var(--color-white);
+  --theme-4-bold-dark-color: var(--color-black);
+
+  --theme-4-subtle-bg-color: var(--color-poppy-red-lightest);
+  --theme-4-subtle-light-color: var(--color-poppy-red-light);
+  --theme-4-subtle-dark-color: var(--color-poppy-red-darkest);
+
+  --theme-5-subtle-bg-color: var(--color-white-smoke);
+  --theme-5-subtle-light-color: var(--color-platinum);
+  --theme-5-subtle-dark-color: var(--color-charcoal);
 }

projects/canopy/src/styles/variants.scss

@@ -1,21 +1,142 @@
-@import 'mixins';
+@use 'sass:string';
+@use 'sass:list';
 
-.lg-variant--generic {
-  @include lg-variant('generic');
-}
+//.lg-variant--generic {
+//  @include lg-variant('generic');
+//}
+//
+//.lg-variant--info {
+//  @include lg-variant('info');
+//}
+//
+//.lg-variant--success {
+//  @include lg-variant('success');
+//}
+//
+//.lg-variant--warning {
+//  @include lg-variant('warning');
+//}
+//
+//.lg-variant--error {
+//  @include lg-variant('error');
+//}
+
+// New variants
+
+@mixin lg-link-new($color, $type, $fg) {
+  $box-shadow-inset-width: -0.063rem;
+  $active-and-focus-bg-color: color-mix(in srgb, $color 20%, transparent);
+  $visited-bg-color: color-mix(in srgb, $color 0%, var(--color-black) 80%);
+
+  @if $fg == 'dark' and $type == 'bold' or $fg == 'subtle' {
+    $visited-bg-color: color-mix(in srgb, var(--color-white) 80%, transparent);
+  }
+
+  border-bottom: 0.125rem solid $color;
+  color: $color;
+  line-height: initial;
+  padding: 0 0.125rem;
+  text-decoration: none;
 
-.lg-variant--info {
-  @include lg-variant('info');
+  &:hover,
+  &:hover:visited {
+    color: $color;
+    border-bottom: 0;
+    box-shadow:
+      inset 0 $box-shadow-inset-width 0 0 $color,
+      0 0.188rem 0 0 $color;
+  }
+
+  &:visited {
+    color: $color;
+    background-color: $visited-bg-color;
+    border-color: $color;
+  }
+
+  &:active,
+  &:focus-visible,
+  &:focus-visible:hover {
+    background-color: $active-and-focus-bg-color;
+    border-bottom: 0;
+    box-shadow:
+      inset 0 $box-shadow-inset-width 0 0 $color,
+      0 0.188rem 0 0 $color;
+    color: $color;
+    outline: $active-and-focus-bg-color;
+    outline-offset: 0;
+  }
 }
 
-.lg-variant--success {
-  @include lg-variant('success');
+@mixin lg-btn-variants-overrides($theme, $type) {
+  $btn-variants: 'primary-dark', 'primary-light', 'secondary-dark', 'secondary-light';
+
+  @each $variant in $btn-variants {
+    $primary-fg: 'light';
+    $secondary-fg: 'dark';
+
+    @if (str-index($variant, 'light')) {
+      $primary-fg: 'dark';
+      $secondary-fg: 'light';
+    }
+
+    --btn-#{$variant}-bg-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-border-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-color: var(--#{$theme}-#{$type}-#{$secondary-fg}-color);
+    --btn-#{$variant}-active-border-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-active-bg-color: color-mix(
+      in srgb,
+      transparent 0%,
+      var(--#{$theme}-#{$type}-#{$secondary-fg}-color) 80%
+    );
+    --btn-#{$variant}-active-border-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-active-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-hover-bg-color: color-mix(
+      in srgb,
+      transparent 0%,
+      var(--#{$theme}-#{$type}-#{$secondary-fg}-color) 40%
+    );
+    --btn-#{$variant}-hover-border-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    --btn-#{$variant}-hover-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+
+    @if (str-index($variant, 'secondary')) {
+      --btn-#{$variant}-bg-color: transparent;
+      --btn-#{$variant}-color: var(--#{$theme}-#{$type}-#{$primary-fg}-color);
+    }
+  }
 }
 
-.lg-variant--warning {
-  @include lg-variant('warning');
+@mixin create-variant-classes($theme, $type) {
+  $fgs: 'light', 'dark';
+
+  .lg-variant-#{$theme}-#{$type} {
+    background-color: var(--#{$theme}-#{$type}-bg-color) !important;
+
+    .lg-btn {
+      @include lg-btn-variants-overrides($theme, $type);
+    }
+
+    @each $fg in $fgs {
+      &--#{$fg} {
+        color: var(--#{$theme}-#{$type}-#{$fg}-color) !important;
+
+        a:not(.lg-btn) {
+          $type: list.nth(string.split('#{$theme}-#{$type}', '-'), -1);
+
+          @include lg-link-new(var(--#{$theme}-#{$type}-#{$fg}-color), $type, $fg);
+        }
+      }
+    }
+  }
 }
 
-.lg-variant--error {
-  @include lg-variant('error');
+$themes: 'theme-1', 'theme-2', 'theme-3', 'theme-4';
+$types: 'bold', 'subtle';
+
+@each $theme in $themes {
+  @each $type in $types {
+    @include create-variant-classes($theme, $type);
+  }
 }
+
+// Only the subtle option has theme-5
+@include create-variant-classes('theme-5', 'subtle');