Nifty Pony Merchandise

    @workday/canvas-kit-css-core

    8.4.1 • Public • Published

    Canvas Kit Core

    Canvas Kit Core contains values and base styles that are shared across the kit.

    Mainenance Mode

    Includes:

    Installation

    yarn add @workday/canvas-kit-css

    or

    yarn add @workday/canvas-kit-css-core

    Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

    You may also import specific modules from /lib.

    @import '~@workday/canvas-kit-css-core/index.scss';
    @import '~@workday/canvas-kit-css-core/lib/colors.scss';

    Colors

    Workday Canvas color variables in weights from 100 - 600. Colors are in hex code format.

    See lib/colors.scss for the full list of available colors.

    $wdc-color-cinnamon-600: #a31c12;
    $wdc-color-cinnamon-500: #de2e21;
    $wdc-color-cinnamon-400: #ff5447;
    $wdc-color-cinnamon-300: #ff867d;
    $wdc-color-cinnamon-200: #fcc2bd;
    $wdc-color-cinnamon-100: #ffeeed;

    Colors
    Cinnamon
    Peach
    Chili Mango
    Cantaloupe
    Sour Lemon
    Juicy Pear
    Kiwi
    Green Apple
    Watermelon
    Jewel
    Toothpaste
    Blueberry
    Plum
    Berry Smoothie
    Blackberry
    Island Punch
    Grape Soda
    Pomegranate
    Fruit Punch
    Root Beer
    Toasted Marshmallow
    Coconut
    Cappuccino
    Soap
    Licorice
    French Vanilla
    Black Pepper

    Border Radius

    Border Radius variables in t-shirt size format. Spacing values are in px format.

    Variable Size
    $wdc-border-radius-zero 0
    $wdc-border-radius-s 2px
    $wdc-border-radius-m 4px
    $wdc-border-radius-l 8px
    $wdc-border-radius-circle 999px

    Spacing

    Spacing variables in t-shirt size format. Spacing values are in px format.

    Variable Size
    $wdc-spacing-xxxs 4px
    $wdc-spacing-xxs 8px
    $wdc-spacing-xs 12px
    $wdc-spacing-s 16px
    $wdc-spacing-m 24px
    $wdc-spacing-l 32px
    $wdc-spacing-xl 40px
    $wdc-spacing-xxl 64px
    $wdc-spacing-xxxl 80px

    Depth

    Five levels of depth available in CSS classes and SASS mixins.

    The CSS classes are implemented using the equivalent SASS mixin.

    HTML

    <div class="wdc-depth-1">
      <h4 class="wdc-type-h5">Depth 1</h4>
    </div>

    SCSS

    .standardItem {
      @include wdc-depth-1();
    }

    Depth -1: Inset card depth
    Class: .wdc-depth-inset
    Mixin: wdc-depth-inset

    Depth 1: Standard card depth
    Class: .wdc-depth-1
    Mixin: wdc-depth-1

    Depth 2: Increased card depth on hover
    Class: .wdc-depth-2
    Mixin: wdc-depth-2

    Depth 3: Active, Task Orch, Pop Ups, Async Notification
    Class: .wdc-depth-3
    Mixin: wdc-depth-3

    Depth 4: Cards on white backgrounds, Menus, Prompt window
    Class: .wdc-depth-4
    Mixin: wdc-depth-4

    Type

    Fonts

    To use the Canvas Kit font install and import the @workday/canvas-kit-css-fonts module. Note that this module sources fonts from the Workday CDN.

    Hierarchy

    Type styles are available as classes and mixins. Using the class is preferred. Use mixins to override CSS only if necessary,

    Base Type
    Applies base body and font styles. Any type styles must be descendants of .wdc-type for the Canvas fonts to be used.

    <div class="wdc-type">
      <h1 class="wdc-type-h1">Header</h1>
      <p class="wdc-type-body">Body text</p>
    </div>

    If you don't want to wrap your type elements with .wdc-type, you may also use the wdc-type mixin to set the default styling. For preset defaults (i.e. all headers, body font, links, etc.), simply apply .wdc to your body tag or a similar wrapper.

    body {
      @include wdc-type();
    }

    There are mixins provided so you can do this for all levels of the type hierarchy if you'd like:

    p {
      @include wdc-type-body();
    }
    h1 {
      @include wdc-type-h1();
    }
    h2 {
      @include wdc-type-h2();
    }
    ...

    Headings
    Modifies font size and weight.

    <h1 class="wdc-type-h1">H1 Header</h1>
    <h2 class="wdc-type-h2">H2 Header</h2>
    <h3 class="wdc-type-h3">H3 Header</h3>
    <h4 class="wdc-type-h4">H4 Header</h4>
    <h5 class="wdc-type-h5">H5 Header</h5>

    Body

    <p class="wdc-type-body">Body text</p>
    <p class="wdc-type-body-2">Smaller body text</p>

    Small

    <p class="wdc-type-small">Small text</p>

    Variations

    You can modify any of the type hierarchy with the below variations:

    Label

    <span class="wdc-type-variant-label">Label Text</span>

    Button

    <span class="wdc-type-variant-button">Button Text</span>

    Caps

    <span class="wdc-type-variant-caps">Caps Text</span>

    Hint

    <span class="wdc-type-variant-hint">Hint Text</span>

    Error

    <span class="wdc-type-variant-error">Error Text</span>

    Link

    <a href="#" class="wdc-type-variant-link">Link Text</a>

    Mono

    <span class="wdc-type-variant-mono">Mono Text</span>

    Inverse

    <button class="wdc-type-variant-inverse">White Text</button>

    Accessibility

    By default, browsers add an outline around focusable elements. This is great for keyboard accessibility but is not the best visual experience for users who don't need it. To provide the best visual experience for all users, canvas-kit-css-core uses what-input to prevent outlines on mouse events while showing outlines during keyboard navigation. To include what-input into your project please view the what-input github repository.

    Canvas-kit-css-core includes an accessibility.scss file that will target specific what-input styles. The elements within canvas-kit-css will prevent browser outlines from being shown during mouse events by default. You can apply the class .wdc-a11y to body or any other element to implement the same functionality for all focusable elements within a given element.

    If you want to control when the outlines are shown/hidden yourself, you can use the wdc-show-outlines() and wdc-hide-outlines() mixins.

    Install

    npm i @workday/canvas-kit-css-core

    DownloadsWeekly Downloads

    2,174

    Version

    8.4.1

    License

    Apache-2.0

    Unpacked Size

    55.7 kB

    Total Files

    26

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls