@carbon/styles 0.16.2 → 0.17.0-rc.0

package/scss/__tests__/__snapshots__/colors-test.js.snap

@@ -1,404 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@carbon/styles/scss/colors Public API 1`] = `
-Object {
-  "black": "#000000",
-  "black-100": "#000000",
-  "black-hover": "#212121",
-  "blue-10": "#edf5ff",
-  "blue-10-hover": "#dbebff",
-  "blue-100": "#001141",
-  "blue-100-hover": "#001f75",
-  "blue-20": "#d0e2ff",
-  "blue-20-hover": "#b8d3ff",
-  "blue-30": "#a6c8ff",
-  "blue-30-hover": "#8ab6ff",
-  "blue-40": "#78a9ff",
-  "blue-40-hover": "#5c97ff",
-  "blue-50": "#4589ff",
-  "blue-50-hover": "#1f70ff",
-  "blue-60": "#0f62fe",
-  "blue-60-hover": "#0050e6",
-  "blue-70": "#0043ce",
-  "blue-70-hover": "#0053ff",
-  "blue-80": "#002d9c",
-  "blue-80-hover": "#0039c7",
-  "blue-90": "#001d6c",
-  "blue-90-hover": "#00258a",
-  "colors": Object {
-    "black": Object {
-      "100": "#000000",
-    },
-    "blue": Object {
-      "10": "#edf5ff",
-      "100": "#001141",
-      "20": "#d0e2ff",
-      "30": "#a6c8ff",
-      "40": "#78a9ff",
-      "50": "#4589ff",
-      "60": "#0f62fe",
-      "70": "#0043ce",
-      "80": "#002d9c",
-      "90": "#001d6c",
-    },
-    "cool-gray": Object {
-      "10": "#f2f4f8",
-      "100": "#121619",
-      "20": "#dde1e6",
-      "30": "#c1c7cd",
-      "40": "#a2a9b0",
-      "50": "#878d96",
-      "60": "#697077",
-      "70": "#4d5358",
-      "80": "#343a3f",
-      "90": "#21272a",
-    },
-    "cyan": Object {
-      "10": "#e5f6ff",
-      "100": "#061727",
-      "20": "#bae6ff",
-      "30": "#82cfff",
-      "40": "#33b1ff",
-      "50": "#1192e8",
-      "60": "#0072c3",
-      "70": "#00539a",
-      "80": "#003a6d",
-      "90": "#012749",
-    },
-    "gray": Object {
-      "10": "#f4f4f4",
-      "100": "#161616",
-      "20": "#e0e0e0",
-      "30": "#c6c6c6",
-      "40": "#a8a8a8",
-      "50": "#8d8d8d",
-      "60": "#6f6f6f",
-      "70": "#525252",
-      "80": "#393939",
-      "90": "#262626",
-    },
-    "green": Object {
-      "10": "#defbe6",
-      "100": "#071908",
-      "20": "#a7f0ba",
-      "30": "#6fdc8c",
-      "40": "#42be65",
-      "50": "#24a148",
-      "60": "#198038",
-      "70": "#0e6027",
-      "80": "#044317",
-      "90": "#022d0d",
-    },
-    "magenta": Object {
-      "10": "#fff0f7",
-      "100": "#2a0a18",
-      "20": "#ffd6e8",
-      "30": "#ffafd2",
-      "40": "#ff7eb6",
-      "50": "#ee5396",
-      "60": "#d02670",
-      "70": "#9f1853",
-      "80": "#740937",
-      "90": "#510224",
-    },
-    "orange": Object {
-      "10": "#fff2e8",
-      "100": "#231000",
-      "20": "#ffd9be",
-      "30": "#ffb784",
-      "40": "#ff832b",
-      "50": "#eb6200",
-      "60": "#ba4e00",
-      "70": "#8a3800",
-      "80": "#5e2900",
-      "90": "#3e1a00",
-    },
-    "purple": Object {
-      "10": "#f6f2ff",
-      "100": "#1c0f30",
-      "20": "#e8daff",
-      "30": "#d4bbff",
-      "40": "#be95ff",
-      "50": "#a56eff",
-      "60": "#8a3ffc",
-      "70": "#6929c4",
-      "80": "#491d8b",
-      "90": "#31135e",
-    },
-    "red": Object {
-      "10": "#fff1f1",
-      "100": "#2d0709",
-      "20": "#ffd7d9",
-      "30": "#ffb3b8",
-      "40": "#ff8389",
-      "50": "#fa4d56",
-      "60": "#da1e28",
-      "70": "#a2191f",
-      "80": "#750e13",
-      "90": "#520408",
-    },
-    "teal": Object {
-      "10": "#d9fbfb",
-      "100": "#081a1c",
-      "20": "#9ef0f0",
-      "30": "#3ddbd9",
-      "40": "#08bdba",
-      "50": "#009d9a",
-      "60": "#007d79",
-      "70": "#005d5d",
-      "80": "#004144",
-      "90": "#022b30",
-    },
-    "warm-gray": Object {
-      "10": "#f7f3f2",
-      "100": "#171414",
-      "20": "#e5e0df",
-      "30": "#cac5c4",
-      "40": "#ada8a8",
-      "50": "#8f8b8b",
-      "60": "#726e6e",
-      "70": "#565151",
-      "80": "#3c3838",
-      "90": "#272525",
-    },
-    "white": Object {
-      "0": "#ffffff",
-    },
-    "yellow": Object {
-      "10": "#fcf4d6",
-      "100": "#1c1500",
-      "20": "#fddc69",
-      "30": "#f1c21b",
-      "40": "#d2a106",
-      "50": "#b28600",
-      "60": "#8e6a00",
-      "70": "#684e00",
-      "80": "#483700",
-      "90": "#302400",
-    },
-  },
-  "cool-gray-10": "#f2f4f8",
-  "cool-gray-10-hover": "#e4e9f1",
-  "cool-gray-100": "#121619",
-  "cool-gray-100-hover": "#222a2f",
-  "cool-gray-20": "#dde1e6",
-  "cool-gray-20-hover": "#cdd3da",
-  "cool-gray-30": "#c1c7cd",
-  "cool-gray-30-hover": "#adb5bd",
-  "cool-gray-40": "#a2a9b0",
-  "cool-gray-40-hover": "#9199a1",
-  "cool-gray-50": "#878d96",
-  "cool-gray-50-hover": "#757b85",
-  "cool-gray-60": "#697077",
-  "cool-gray-60-hover": "#585e64",
-  "cool-gray-70": "#4d5358",
-  "cool-gray-70-hover": "#5d646a",
-  "cool-gray-80": "#343a3f",
-  "cool-gray-80-hover": "#434a51",
-  "cool-gray-90": "#21272a",
-  "cool-gray-90-hover": "#2b3236",
-  "cyan-10": "#e5f6ff",
-  "cyan-10-hover": "#cceeff",
-  "cyan-100": "#061727",
-  "cyan-100-hover": "#0b2947",
-  "cyan-20": "#bae6ff",
-  "cyan-20-hover": "#99daff",
-  "cyan-30": "#82cfff",
-  "cyan-30-hover": "#57beff",
-  "cyan-40": "#33b1ff",
-  "cyan-40-hover": "#059fff",
-  "cyan-50": "#1192e8",
-  "cyan-50-hover": "#0f7ec8",
-  "cyan-60": "#0072c3",
-  "cyan-60-hover": "#005fa3",
-  "cyan-70": "#00539a",
-  "cyan-70-hover": "#0066bd",
-  "cyan-80": "#003a6d",
-  "cyan-80-hover": "#00498a",
-  "cyan-90": "#012749",
-  "cyan-90-hover": "#013360",
-  "gray-10": "#f4f4f4",
-  "gray-10-hover": "#e8e8e8",
-  "gray-100": "#161616",
-  "gray-100-hover": "#292929",
-  "gray-20": "#e0e0e0",
-  "gray-20-hover": "#d1d1d1",
-  "gray-30": "#c6c6c6",
-  "gray-30-hover": "#b5b5b5",
-  "gray-40": "#a8a8a8",
-  "gray-40-hover": "#999999",
-  "gray-50": "#8d8d8d",
-  "gray-50-hover": "#7a7a7a",
-  "gray-60": "#6f6f6f",
-  "gray-60-hover": "#5e5e5e",
-  "gray-70": "#525252",
-  "gray-70-hover": "#636363",
-  "gray-80": "#393939",
-  "gray-80-hover": "#474747",
-  "gray-90": "#262626",
-  "gray-90-hover": "#333333",
-  "green-10": "#defbe6",
-  "green-10-hover": "#b6f6c8",
-  "green-100": "#071908",
-  "green-100-hover": "#0d300f",
-  "green-20": "#a7f0ba",
-  "green-20-hover": "#74e792",
-  "green-30": "#6fdc8c",
-  "green-30-hover": "#36ce5e",
-  "green-40": "#42be65",
-  "green-40-hover": "#3bab5a",
-  "green-50": "#24a148",
-  "green-50-hover": "#208e3f",
-  "green-60": "#198038",
-  "green-60-hover": "#166f31",
-  "green-70": "#0e6027",
-  "green-70-hover": "#11742f",
-  "green-80": "#044317",
-  "green-80-hover": "#05521c",
-  "green-90": "#022d0d",
-  "green-90-hover": "#033b11",
-  "magenta-10": "#fff0f7",
-  "magenta-10-hover": "#ffe0ef",
-  "magenta-100": "#2a0a18",
-  "magenta-100-hover": "#53142f",
-  "magenta-20": "#ffd6e8",
-  "magenta-20-hover": "#ffbdda",
-  "magenta-30": "#ffafd2",
-  "magenta-30-hover": "#ff94c3",
-  "magenta-40": "#ff7eb6",
-  "magenta-40-hover": "#ff57a0",
-  "magenta-50": "#ee5396",
-  "magenta-50-hover": "#e3176f",
-  "magenta-60": "#d02670",
-  "magenta-60-hover": "#b0215f",
-  "magenta-70": "#9f1853",
-  "magenta-70-hover": "#bf1d63",
-  "magenta-80": "#740937",
-  "magenta-80-hover": "#8e0b43",
-  "magenta-90": "#510224",
-  "magenta-90-hover": "#68032e",
-  "orange-10": "#fff2e8",
-  "orange-10-hover": "#ffe2cc",
-  "orange-100": "#231000",
-  "orange-100-hover": "#421e00",
-  "orange-20": "#ffd9be",
-  "orange-20-hover": "#ffc69e",
-  "orange-30": "#ffb784",
-  "orange-30-hover": "#ff9d57",
-  "orange-40": "#ff832b",
-  "orange-40-hover": "#fa6800",
-  "orange-50": "#eb6200",
-  "orange-50-hover": "#cc5500",
-  "orange-60": "#ba4e00",
-  "orange-60-hover": "#9e4200",
-  "orange-70": "#8a3800",
-  "orange-70-hover": "#a84400",
-  "orange-80": "#5e2900",
-  "orange-80-hover": "#753300",
-  "orange-90": "#3e1a00",
-  "orange-90-hover": "#522200",
-  "purple-10": "#f6f2ff",
-  "purple-10-hover": "#ede5ff",
-  "purple-100": "#1c0f30",
-  "purple-100-hover": "#341c59",
-  "purple-20": "#e8daff",
-  "purple-20-hover": "#dcc7ff",
-  "purple-30": "#d4bbff",
-  "purple-30-hover": "#c5a3ff",
-  "purple-40": "#be95ff",
-  "purple-40-hover": "#ae7aff",
-  "purple-50": "#a56eff",
-  "purple-50-hover": "#9352ff",
-  "purple-60": "#8a3ffc",
-  "purple-60-hover": "#7822fb",
-  "purple-70": "#6929c4",
-  "purple-70-hover": "#7c3dd6",
-  "purple-80": "#491d8b",
-  "purple-80-hover": "#5b24ad",
-  "purple-90": "#31135e",
-  "purple-90-hover": "#40197b",
-  "red-10": "#fff1f1",
-  "red-10-hover": "#ffe0e0",
-  "red-100": "#2d0709",
-  "red-100-hover": "#540d11",
-  "red-20": "#ffd7d9",
-  "red-20-hover": "#ffc2c5",
-  "red-30": "#ffb3b8",
-  "red-30-hover": "#ff99a0",
-  "red-40": "#ff8389",
-  "red-40-hover": "#ff6168",
-  "red-50": "#fa4d56",
-  "red-50-hover": "#ee0713",
-  "red-60": "#da1e28",
-  "red-60-hover": "#b81922",
-  "red-70": "#a2191f",
-  "red-70-hover": "#c21e25",
-  "red-80": "#750e13",
-  "red-80-hover": "#921118",
-  "red-90": "#520408",
-  "red-90-hover": "#66050a",
-  "teal-10": "#d9fbfb",
-  "teal-10-hover": "#acf6f6",
-  "teal-100": "#081a1c",
-  "teal-100-hover": "#0f3034",
-  "teal-20": "#9ef0f0",
-  "teal-20-hover": "#57e5e5",
-  "teal-30": "#3ddbd9",
-  "teal-30-hover": "#25cac8",
-  "teal-40": "#08bdba",
-  "teal-40-hover": "#07aba9",
-  "teal-50": "#009d9a",
-  "teal-50-hover": "#008a87",
-  "teal-60": "#007d79",
-  "teal-60-hover": "#006b68",
-  "teal-70": "#005d5d",
-  "teal-70-hover": "#007070",
-  "teal-80": "#004144",
-  "teal-80-hover": "#005357",
-  "teal-90": "#022b30",
-  "teal-90-hover": "#033940",
-  "warm-gray-10": "#f7f3f2",
-  "warm-gray-10-hover": "#f0e8e6",
-  "warm-gray-100": "#171414",
-  "warm-gray-100-hover": "#2c2626",
-  "warm-gray-20": "#e5e0df",
-  "warm-gray-20-hover": "#d8d0cf",
-  "warm-gray-30": "#cac5c4",
-  "warm-gray-30-hover": "#b9b3b1",
-  "warm-gray-40": "#ada8a8",
-  "warm-gray-40-hover": "#9c9696",
-  "warm-gray-50": "#8f8b8b",
-  "warm-gray-50-hover": "#7f7b7b",
-  "warm-gray-60": "#726e6e",
-  "warm-gray-60-hover": "#605d5d",
-  "warm-gray-70": "#565151",
-  "warm-gray-70-hover": "#696363",
-  "warm-gray-80": "#3c3838",
-  "warm-gray-80-hover": "#4c4848",
-  "warm-gray-90": "#272525",
-  "warm-gray-90-hover": "#343232",
-  "white": "#ffffff",
-  "white-0": "#ffffff",
-  "white-hover": "#e8e8e8",
-  "yellow-10": "#fcf4d6",
-  "yellow-10-hover": "#f8e6a0",
-  "yellow-100": "#1c1500",
-  "yellow-100-hover": "#332600",
-  "yellow-20": "#fddc69",
-  "yellow-20-hover": "#fccd27",
-  "yellow-30": "#f1c21b",
-  "yellow-30-hover": "#ddb00e",
-  "yellow-40": "#d2a106",
-  "yellow-40-hover": "#bc9005",
-  "yellow-50": "#b28600",
-  "yellow-50-hover": "#9e7700",
-  "yellow-60": "#8e6a00",
-  "yellow-60-hover": "#755800",
-  "yellow-70": "#684e00",
-  "yellow-70-hover": "#806000",
-  "yellow-80": "#483700",
-  "yellow-80-hover": "#5c4600",
-  "yellow-90": "#302400",
-  "yellow-90-hover": "#3d2e00",
-}
-`;

package/scss/__tests__/__snapshots__/config-test.js.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@carbon/styles/scss/config Public API 1`] = `
-Object {
-  "css--default-type": true,
-  "css--font-face": true,
-  "css--reset": true,
-  "flex-grid-columns": 16,
-  "font-display": "swap",
-  "font-path": "~@ibm/plex",
-  "prefix": "cds",
-  "use-flexbox-grid": false,
-  "use-google-fonts": false,
-}
-`;

package/scss/__tests__/__snapshots__/motion-test.js.snap

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@carbon/styles/scss/motion Public API 1`] = `
-Object {
-  "functions": Object {
-    "motion": true,
-  },
-  "mixins": Object {
-    "motion": true,
-  },
-  "variables": Object {
-    "duration-fast-01": "70ms",
-    "duration-fast-02": "110ms",
-    "duration-moderate-01": "150ms",
-    "duration-moderate-02": "240ms",
-    "duration-slow-01": "400ms",
-    "duration-slow-02": "700ms",
-    "ease-in": "cubic-bezier(0.25, 0, 1, 1)",
-    "ease-out": "cubic-bezier(0, 0, 0.25, 1)",
-    "easings": Object {
-      "entrance": Object {
-        "expressive": "cubic-bezier(0, 0, 0.3, 1)",
-        "productive": "cubic-bezier(0, 0, 0.38, 0.9)",
-      },
-      "exit": Object {
-        "expressive": "cubic-bezier(0.4, 0.14, 1, 1)",
-        "productive": "cubic-bezier(0.2, 0, 1, 0.9)",
-      },
-      "standard": Object {
-        "expressive": "cubic-bezier(0.4, 0.14, 0.3, 1)",
-        "productive": "cubic-bezier(0.2, 0, 0.38, 0.9)",
-      },
-    },
-    "standard-easing": "cubic-bezier(0.5, 0, 0.1, 1)",
-    "transition-base": "250ms",
-    "transition-expansion": "300ms",
-  },
-}
-`;

package/scss/__tests__/breakpoint-test.js

@@ -1,42 +0,0 @@
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-
-'use strict';
-
-const { SassRenderer } = require('@carbon/test-utils/scss');
-
-const { render } = SassRenderer.create(__dirname);
-
-describe('@carbon/styles/scss/breakpoint', () => {
-  test('Public API', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../breakpoint';
-
-      $_: get('api', (
-        mixins: (
-          breakpoint: meta.mixin-exists('breakpoint', 'breakpoint'),
-          breakpoint-between: meta.mixin-exists('breakpoint-between', 'breakpoint'),
-          breakpoint-down: meta.mixin-exists('breakpoint-down', 'breakpoint'),
-          breakpoint-up: meta.mixin-exists('breakpoint-up', 'breakpoint'),
-        ),
-      ));
-    `);
-
-    const { value: api } = get('api');
-    expect(api).toEqual({
-      mixins: {
-        breakpoint: true,
-        'breakpoint-between': true,
-        'breakpoint-down': true,
-        'breakpoint-up': true,
-      },
-    });
-  });
-});

package/scss/__tests__/colors-test.js

@@ -1,28 +0,0 @@
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-
-'use strict';
-
-const { SassRenderer } = require('@carbon/test-utils/scss');
-
-const { render } = SassRenderer.create(__dirname);
-
-describe('@carbon/styles/scss/colors', () => {
-  test('Public API', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../colors';
-
-      $_: get('variables', meta.module-variables('colors'));
-    `);
-
-    // Colors only exports variables at the moment
-    expect(get('variables').value).toMatchSnapshot();
-  });
-});

package/scss/__tests__/config-test.js

@@ -1,53 +0,0 @@
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-
-'use strict';
-
-const { SassRenderer } = require('@carbon/test-utils/scss');
-
-const { render } = SassRenderer.create(__dirname);
-
-describe('@carbon/styles/scss/config', () => {
-  test('Public API', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../config';
-      $_: get('variables', meta.module-variables('config'));
-    `);
-
-    // Config only exports variables at the moment
-    expect(get('variables').value).toMatchSnapshot();
-  });
-
-  test('overrides', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../config' with (
-        $prefix: 'test',
-        $css--font-face: false,
-        $css--reset: false,
-        $css--default-type: false,
-      );
-
-      $_: get('config', (
-        css--default-type: config.$css--default-type,
-        css--font-face: config.$css--font-face,
-        css--reset: config.$css--reset,
-        prefix: config.$prefix,
-      ));
-    `);
-
-    expect(get('config').value).toEqual({
-      'css--default-type': false,
-      'css--font-face': false,
-      'css--reset': false,
-      prefix: 'test',
-    });
-  });
-});

package/scss/__tests__/grid-test.js

@@ -1,48 +0,0 @@
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-
-'use strict';
-
-const { SassRenderer } = require('@carbon/test-utils/scss');
-
-const { render } = SassRenderer.create(__dirname);
-
-describe('@carbon/styles/scss/grid', () => {
-  test('Public API', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../grid' as *;
-
-      $_: get('api', (
-        variables: (
-          grid-gutter: meta.variable-exists('grid-gutter'),
-          grid-gutter-condensed: meta.variable-exists('grid-gutter-condensed'),
-          grid-breakpoints: meta.variable-exists('grid-breakpoints'),
-        ),
-        mixins: (
-          css-grid: meta.mixin-exists('css-grid'),
-          flex-grid: meta.mixin-exists('flex-grid'),
-        ),
-      ));
-    `);
-
-    const { value: api } = get('api');
-    expect(api).toEqual({
-      variables: {
-        'grid-gutter': true,
-        'grid-gutter-condensed': true,
-        'grid-breakpoints': true,
-      },
-      mixins: {
-        'css-grid': true,
-        'flex-grid': true,
-      },
-    });
-  });
-});