@carbon/styles 0.17.0-rc.0 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.17.0-rc.0",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -16,22 +16,35 @@
     "components",
     "react"
   ],
+  "files": [
+    "scss",
+    "index.scss"
+  ],
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "sass": "^1.33.0"
+  },
   "dependencies": {
-    "@carbon/colors": "^10.37.0",
+    "@carbon/colors": "^11.0.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.43.0",
-    "@carbon/layout": "^10.37.0",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.54.0-rc.0",
-    "@carbon/type": "^10.44.0-rc.0",
+    "@carbon/grid": "^11.0.0",
+    "@carbon/layout": "^11.0.0",
+    "@carbon/motion": "^11.0.0",
+    "@carbon/themes": "^11.0.0",
+    "@carbon/type": "^11.0.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.21.0",
-    "css": "^3.0.0"
+    "@carbon/test-utils": "^10.22.0",
+    "css": "^3.0.0",
+    "sass": "^1.45.0"
   },
-  "gitHead": "87d754dca2c558fb53b3439d047255ca75982516"
+  "sideEffects": [
+    "index.scss",
+    "scss/**/*.scss",
+    "scss/**/*.css"
+  ],
+  "gitHead": "c88ac3391e9583e6e10e2de2c509b006f0d60cac"
 }

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

@@ -0,0 +1,404 @@
+// 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

@@ -0,0 +1,44 @@
+// 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",
+  "grid-breakpoints": Object {
+    "lg": Object {
+      "columns": 16,
+      "margin": "1rem",
+      "width": "66rem",
+    },
+    "max": Object {
+      "columns": 16,
+      "margin": "1.5rem",
+      "width": "99rem",
+    },
+    "md": Object {
+      "columns": 8,
+      "margin": "1rem",
+      "width": "42rem",
+    },
+    "sm": Object {
+      "columns": 4,
+      "margin": 0,
+      "width": "20rem",
+    },
+    "xlg": Object {
+      "columns": 16,
+      "margin": "1rem",
+      "width": "82rem",
+    },
+  },
+  "grid-gutter": "2rem",
+  "grid-gutter-condensed": "0.0625rem",
+  "prefix": "cds",
+  "use-akamai-cdn": false,
+  "use-flexbox-grid": false,
+}
+`;

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

@@ -0,0 +1,39 @@
+// 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

@@ -0,0 +1,42 @@
+/**
+ * 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

@@ -0,0 +1,28 @@
+/**
+ * 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

@@ -0,0 +1,53 @@
+/**
+ * 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',
+    });
+  });
+});