fix(core): high contrast support

- high contrast support in themes and shim
- update docs and demo for contrast

Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>

packages/core/.storybook/main.js

@@ -1,6 +1,7 @@
 const rollupStorybook = require('../rollup.storybook');
 
 module.exports = {
+  staticDirs: ['./public'],
   stories: ['../src/**/*.stories.{ts,mdx}', '../docs/**/*.stories.{ts,mdx}'],
   rollupConfig(config) {
     return rollupStorybook.getConfig(config);

packages/core/.storybook/preview.js

@@ -81,7 +81,7 @@ export const parameters = {
           'Internationalization',
         ],
         'Themes',
-        ['Getting Started', 'Dark Theme', 'Low Motion Theme', 'Dynamic Themes'],
+        ['Getting Started', 'Dark Theme', 'Low Motion Theme', 'High Contrast', 'Dynamic Themes', 'Clarity UI'],
         'Layout',
         ['Get Started', 'Horizontal', 'Vertical', 'Grid', 'Spacing', 'Utilities', 'Patterns', 'All'],
         'Components',
@@ -145,6 +145,8 @@ export const globalTypes = {
       items: [
         { value: '', title: 'Light Theme' },
         { value: 'dark', title: 'Dark Theme' },
+        { value: 'low-motion', title: 'Low Motion Theme' },
+        { value: 'high-contrast', title: 'High Contrast Theme' },
       ],
     },
   },

packages/core/.storybook/public/preview.css

@@ -3,6 +3,7 @@
 @import './../../dist/core/global.css';
 @import './../../dist/core/styles/theme.dark.css';
 @import './../../dist/core/styles/theme.low-motion.css';
+@import './../../dist/core/styles/theme.high-contrast.css';
 @import './../../dist/core/list/list.css';
 @import './../../dist/core/table/table.css';
 

packages/core/build/tokens.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -507,9 +507,9 @@ const aliases = {
       300: token('hsla(0, 0%, 0%, 0.6)'),
     },
     interaction: {
-      outline: token('Highlight solid 2px'),
-      outlineWebkit: token('5px auto -webkit-focus-ring-color'), // https://coryrylan.com/blog/dont-override-css-outline-focus-styles
-      outlineOffset: token('1px'),
+      outline: token('Highlight solid 2px', { raw: true, static: true }),
+      outlineWebkit: token('5px auto -webkit-focus-ring-color', { raw: true, static: true }), // https://coryrylan.com/blog/dont-override-css-outline-focus-styles
+      outlineOffset: token('1px', { raw: true, static: true }),
       touchTarget: token(36),
       borderColor: token(color.construction[500]),
       background: {

packages/core/docs/angular.stories.mdx

@@ -11,27 +11,31 @@ You can try out Core in Angular today. To get the best experience building
 with Clarity we recommend using <a href="https://clarity.design/documentation/get-started" target="_blank" rel="noopener">Clarity Angular</a>
 which provides a suite of feature rich native Angular components.
 
-To use Clarity Core with Angular follow the package <a href="./?path=/docs/documentation-getting-started--page">installation instructions</a>.
-Once installed add <code>CUSTOM_ELEMENTS_SCHEMA</code> to your application
-module.
+To use Clarity with Angular follow the package <a href="./?path=/docs/documentation-getting-started--page">installation instructions</a>.
+Once installed add the `@cds/angular` package from npm.
+
+```bash
+npm install @cds/angular --save
+```
+
+Add the appropriate component modules needed for your aplication.
 
 ```typescript
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-import '@cds/core/alert/register.js';
+import { CdsAlertModule } from '@cds/angular/alert';
 
 @NgModule({
-  imports: [BrowserModule],
+  imports: [BrowserModule, CdsAlertModule],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}
 ```
 
-To set properties on a Web Component use the Angular <code>[property]</code> binding syntax.
-To listen to events use the Angular <code>(event)</code> binding syntax.
+To set properties on a Component use the <code>[property]</code> binding syntax.
+To listen to events use the <code>(event)</code> binding syntax.
 
 ```html
 <!--

packages/core/docs/getting-started.stories.mdx

@@ -43,10 +43,10 @@ base light theme.
 </body>
 ```
 
-### 3. Use Web Components with JavaScript or framework of choice
+### 3. Use Clarity Components with JavaScript or framework of choice
 
-Currently Core requires a JavaScript bundler to import the required dependencies.
-Core is compatible with tools such as Webpack, RollupJS, Parcel as well
+Currently Clarity requires a JavaScript bundler to import the required dependencies.
+Clarity is compatible with tools such as Webpack, RollupJS, Parcel as well
 as most Framework CLIs. Additional documentation and examples will be added
 soon for no build step prototyping.
 

packages/core/docs/welcome.stories.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -16,37 +16,26 @@ export default {
 
 export const core = () => {
   return html`
-    <section cds-layout="vertical gap:xxl align:center m-t:xxxl" cds-text="center">
+    <section cds-layout="vertical gap:xl align:center m-t:xxxl p-t:xxl" cds-text="center">
       <img
         src="${img}"
         alt="Clarity Core"
         cds-layout="fill"
         style="max-width: calc(var(--cds-global-layout-space-xxl) * 3)"
       />
       <h1 cds-text="display">
-        Clarity Core
+        Clarity Design System
       </h1>
-      <h2 cds-text="section">Web Component Implementation of the Clarity Design System</h2>
-
-      <div cds-layout="vertical gap:lg container:xs" cds-text="left">
-        <p cds-text="body">
-          Clarity Core is a Web Component implementation of the
-          <a href="https://clarity.design" cds-text="link">Clarity Design System</a>. Clarity Core provides a set of
-          reusable UI components that work in any JavaScript framework or no framework at all.
+      <div cds-layout="vertical gap:xl container:xs">
+        <p cds-text="section center">
+          Reusable components, Design Tokens and Themes for any Web framework or standalone UI.
         </p>
 
-        <p cds-text="body">
+        <p cds-text="body left">
           Some of our components and utilities are currently offered as previews. This means that these components and
           utilities are in active development but ready to try out! We are hoping you will share your
           <a href="https://github.com/vmware/clarity/issues/new/choose" cds-text="link">feedback</a> on these new
-          components. You can read more about Core and its goals in our
-          <a
-            href="https://medium.com/claritydesignsystem/clarity-core-72f6d3a029bc"
-            target="_blank"
-            rel="noopener"
-            cds-text="link"
-            >Medium blog post</a
-          >.
+          components.
         </p>
       </div>
       <div cds-layout="horizontal gap:xs align:horizontal-center">

packages/core/npm.json

@@ -3,7 +3,7 @@
   "version": "6.0.0-next.6",
   "license": "MIT",
   "author": "clarity",
-  "description": "Clarity Design System Web Components",
+  "description": "Clarity Design System - common components, themes, and utilties",
   "homepage": "https://clarity.design",
   "customElements": "./custom-elements.json",
   "keywords": [

packages/core/package.json

@@ -35,7 +35,7 @@
     "clarity",
     "ui"
   ],
-  "description": "Clarity Design System Web Components",
+  "description": "Clarity Design System - common components, themes, and utilties",
   "homepage": "https://clarity.design",
   "repository": {
     "type": "git",

packages/core/rollup.config.js

@@ -40,6 +40,7 @@ const config = {
     './src/styles/module.typography.scss',
     './src/styles/theme.dark.scss',
     './src/styles/theme.low-motion.scss',
+    './src/styles/theme.high-contrast.scss',
     './src/list/list.scss',
     './src/table/table.scss',
   ],

packages/core/src/button/button.element.ts

@@ -93,7 +93,7 @@ export class CdsButton extends CdsBaseButton {
 
   update(props: PropertyValues<this>) {
     if (props.has('loadingState')) {
-      if (this.isDefaultLoadingState(props.get('loadingState'))) {
+      if (this.isDefaultLoadingState(props.get('loadingState') as string)) {
         // track prior disabled state to set prior value after button is re-enabled from a loading state
         this._disabled = this.disabled;
       }

packages/core/src/global.d.ts

@@ -12,3 +12,8 @@ declare module '*.svg' {
   const value: any;
   export default value;
 }
+
+declare module '*.png' {
+  const value: any;
+  export default value;
+}

packages/core/src/internal/base/base.element.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+// Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
 
@@ -74,16 +74,7 @@ slot {
 :host([_focused]) [focusable],
 :host([_focused]) .input,
 [tabindex='0'][focusable]:focus {
-  outline: #{$cds-alias-object-interaction-outline};
+  outline: #{$cds-alias-object-interaction-outline-static};
+  outline: #{$cds-alias-object-interaction-outline-webkit-static};
   outline-offset: #{$cds-alias-object-interaction-outline-offset};
 }
-
-@media (-webkit-min-device-pixel-ratio: 0) {
-  :host([tabindex='0']:focus),
-  :host([tabindex='0']:focus) [focusable],
-  :host([_focused]) [focusable],
-  :host([_focused]) .input,
-  [tabindex='0'][focusable]:focus {
-    outline: #{$cds-alias-object-interaction-outline-webkit};
-  }
-}

packages/core/src/internal/motion/utils.ts

@@ -452,7 +452,7 @@ export function getPropertyAnimations(
   }
 
   const hidingAndOtherAnimationsAsTuple = getHidingAndNonHidingPropertyAnimations(activeAnimations);
-  const isHiding = updatingProps.get(CLARITY_MOTION_ENTER_LEAVE_PROPERTY);
+  const isHiding = updatingProps.get(CLARITY_MOTION_ENTER_LEAVE_PROPERTY) as boolean;
 
   return flattenAndSortAnimations(hidingAndOtherAnimationsAsTuple, isHiding);
 }

packages/core/src/internal/utils/supports.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -10,6 +10,5 @@ describe('browser support feature checks', () => {
   it('should check browser support value strings in cds-support attr', () => {
     const supportValues = document.body.getAttribute('cds-supports');
     expect(supportValues).toContain('js');
-    expect(supportValues).toContain('flex-gap');
   });
 });

packages/core/src/internal/utils/supports.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -8,13 +8,11 @@ import { camelCaseToKebabCase } from './string.js';
 
 export interface FeatureSupportMatrix {
   js?: boolean;
-  flexGap?: boolean;
 }
 
 class BrowserFeatures {
   supports = {
     js: true,
-    flexGap: supportsFlexGap(),
   };
 
   constructor() {
@@ -31,20 +29,3 @@ class BrowserFeatures {
 }
 
 export const browserFeatures = new BrowserFeatures();
-
-function supportsFlexGap(): boolean {
-  const flex = document.createElement('div');
-  flex.style.display = 'flex';
-  flex.style.flexDirection = 'column';
-  flex.style.rowGap = '1px';
-
-  // create two, elements inside it
-  flex.appendChild(document.createElement('div'));
-  flex.appendChild(document.createElement('div'));
-
-  // append to the DOM (needed to obtain scrollHeight)
-  document.body.appendChild(flex);
-  const isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
-  (flex.parentNode as Element).removeChild(flex);
-  return isSupported;
-}

packages/core/src/radio/radio.element.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+// Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
 
@@ -8,38 +8,38 @@
   --width: #{$cds-global-space-7};
   --height: #{$cds-global-space-7};
   --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-interaction-border-color};
-  --fill-box-shadow: none;
+  --background: none;
 }
 
 .input {
   width: var(--width);
   height: var(--height);
   min-width: var(--width); // for compact forms with long text
   border: var(--border);
-  box-shadow: var(--fill-box-shadow);
-  display: inline-block;
+  background: var(--background);
   border-radius: #{$cds-alias-object-border-radius-300};
   content: '';
   cursor: pointer;
-}
-
-.input::after {
-  width: var(--width);
-  height: var(--height);
-  border-radius: #{$cds-alias-object-border-radius-300};
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 :host([status='error']) {
   --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-status-danger};
 }
 
 :host([_checked]) {
-  --fill-box-shadow: inset 0 0 0 #{$cds-global-space-4} #{$cds-alias-status-info};
   --border: 0 !important;
+  --background: #{$cds-alias-status-info};
+}
+
+:host([_checked]) .input::after {
+  border-radius: #{$cds-alias-object-border-radius-300};
+  content: '';
+  background: #{$cds-global-typography-color-100};
+  width: #{$cds-global-space-3};
+  height: #{$cds-global-space-3};
 }
 
 :host([_disabled]) {
@@ -51,6 +51,6 @@
 }
 
 :host([_disabled][_checked]) {
-  --fill-box-shadow: inset 0 0 0 #{$cds-global-space-4} #{$cds-alias-status-disabled-tint};
   --border: 0 !important;
+  --background: #{$cds-alias-status-disabled-tint};
 }

packages/core/src/range/range.element.scss

@@ -1,11 +1,11 @@
-// Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+// Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
 
 @import './../styles/tokens/generated/index';
 
 :host {
-  --track-background: #{$cds-alias-object-border-color};
+  --track-background: #{$cds-alias-status-neutral};
   --track-fill-background: #{$cds-alias-status-info};
   --track-height: #{$cds-alias-object-border-width-400};
   --track-width: 50%;

packages/core/src/styles/shim.clr-ui.scss

@@ -4,7 +4,6 @@
 
 /* This shim file maps the custom properties of @clr/ui to Core tokens. Thus, it is only needed for apps currently dependent on @clr/ui and wanting to apply Core look and feel. */
 
-:root,
 [cds-theme] {
   /* Global */