@drivy/cobalt 0.30.0 → 0.31.0

package/components/Form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;AAkEA,MAAM,MAAM,GAAG,CAAC,EACd,YAAY,EACZ,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACI,KAAI;AACpB,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,EAAA,GACN,SAAS,EAAA,YAAA,EACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,KAAI;gBACrB,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;MAO1B,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AACpE,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\" | \"onChange\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;AAkEA,MAAM,MAAM,GAAG,CAAC,EACd,YAAY,EACZ,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACI,KAAI;AACpB,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,EAAA,GACN,SAAS,EAAA,YAAA,EACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,KAAI;gBACrB,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;MAO1B,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AACpE,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,7 +31,7 @@
     "date-fns": "2.29.3",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "4.0.0",
+    "nanoid": "4.0.1",
     "postcss": "8.4.21",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
@@ -49,11 +49,11 @@
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "6.0.0",
     "@rushstack/eslint-patch": "1.2.0",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
     "@svgr/cli": "6.5.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -65,9 +65,9 @@
     "@types/react": "18.0.26",
     "@whitespace/storybook-addon-html": "^5.1.1",
     "autoprefixer": "10.4.13",
-    "core-js": "3.27.2",
+    "core-js": "3.28.0",
     "css-loader": "6.7.3",
-    "eslint": "8.32.0",
+    "eslint": "8.34.0",
     "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
@@ -87,7 +87,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.34.1",
-    "sass": "1.57.1",
+    "sass": "1.58.1",
     "sass-loader": "13.2.0",
     "sharp": "0.31.3",
     "sharp-cli": "4.1.0",
@@ -97,7 +97,7 @@
     "svgo": "3.0.2",
     "ts-jest": "29.0.5",
     "ts-node": "10.9.1",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "scripts": {
     "build": "./scripts/build.sh",

package/styles/components/Accordion/index.scss

@@ -46,7 +46,7 @@
       &::before,
       &::after {
         // This element is actually an icon but animated, so we can use icon colors here
-        @include semantic-color(subdued, icon, background-color);
+        @include semantic-color(icon, subdued, background-color);
         position: absolute;
 
         content: "";

package/styles/components/Buttons/DefaultButton/index.scss

@@ -1,19 +1,19 @@
 .cob-Button__default {
   @include semantic-color(
-    secondaryInteractive,
     buttonBackground,
+    secondaryInteractive,
     background-color
   );
-  @include semantic-color(baseInteractive, stroke, border-color);
-  @include semantic-color(secondaryInteractive, buttonLabel, color);
+  @include semantic-color(stroke, baseInteractive, border-color);
+  @include semantic-color(buttonLabel, secondaryInteractive, color);
 
   &--primary {
     @include semantic-color(
-      primaryInteractive,
       buttonBackground,
+      primaryInteractive,
       background-color
     );
-    @include semantic-color(primaryInteractive, buttonLabel, color);
+    @include semantic-color(buttonLabel, primaryInteractive, color);
 
     border-color: transparent;
 
@@ -25,24 +25,24 @@
 
     &.cob-Button__default--destructive {
       @include semantic-color(
-        destructiveInteractive,
         buttonBackground,
+        destructiveInteractive,
         background-color
       );
-      @include semantic-color(destructiveInteractive, buttonLabel, color);
+      @include semantic-color(buttonLabel, destructiveInteractive, color);
 
       border-color: transparent;
     }
   }
 
   &--destructive {
-    @include semantic-color(error, text, color);
+    @include semantic-color(text, error, color);
 
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(error, text, color);
-      @include semantic-color(error, stroke, border-color);
+      @include semantic-color(text, error, color);
+      @include semantic-color(stroke, error, border-color);
     }
   }
 
@@ -50,8 +50,8 @@
   &--selected:focus,
   &--selected:active,
   &--selected {
-    @include semantic-color(selected, buttonBackground, background-color);
-    @include semantic-color(selected, buttonLabel, color);
+    @include semantic-color(buttonBackground, selected, background-color);
+    @include semantic-color(buttonLabel, selected, color);
     @include border-color(accent);
   }
 }

package/styles/components/Buttons/GhostButton/index.scss

@@ -1,8 +1,8 @@
 .cob-Button__ghost {
-  @include semantic-color(tertiaryInteractive, buttonLabel, color);
+  @include semantic-color(buttonLabel, tertiaryInteractive, color);
   @include semantic-color(
-    tertiaryInteractive,
     buttonBackground,
+    tertiaryInteractive,
     background-color
   );
   border-color: transparent;
@@ -18,7 +18,7 @@
   }
 
   &.cob-Button__ghost--destructive {
-    @include semantic-color(error, text, color);
+    @include semantic-color(text, error, color);
   }
 
   &.cob-Button__ghost--standalone {
@@ -35,8 +35,8 @@
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
     @include semantic-color(
-      tertiaryInteractive,
       buttonBackground,
+      tertiaryInteractive,
       background-color
     );
     border-color: transparent;

package/styles/components/Buttons/InversedButton/index.scss

@@ -1,6 +1,6 @@
 .cob-Button__inversed {
-  @include semantic-color(inversed, text, color);
-  @include semantic-color(base, stroke, border-color);
+  @include semantic-color(text, inversed, color);
+  @include semantic-color(stroke, base, border-color);
 
   background-color: transparent;
   box-shadow: none;

package/styles/components/Buttons/index.scss

@@ -97,9 +97,9 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    @include semantic-color(disabled, buttonBackground, background-color);
-    @include semantic-color(disabled, buttonLabel, color);
-    @include semantic-color(subdued, stroke, border-color);
+    @include semantic-color(buttonBackground, disabled, background-color);
+    @include semantic-color(buttonLabel, disabled, color);
+    @include semantic-color(stroke, subdued, border-color);
 
     opacity: 1;
     cursor: not-allowed;
@@ -110,9 +110,9 @@
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(disabled, buttonBackground, background-color);
-      @include semantic-color(disabled, buttonLabel, color);
-      @include semantic-color(subdued, stroke, border-color);
+      @include semantic-color(buttonBackground, disabled, background-color);
+      @include semantic-color(buttonLabel, disabled, color);
+      @include semantic-color(stroke, subdued, border-color);
       box-shadow: none;
     }
   }

package/styles/components/Cell/index.scss

@@ -12,7 +12,7 @@
 
     &--softDivided {
       &::before {
-        @include semantic-color(base, stroke, background-color);
+        @include semantic-color(stroke, base, background-color);
 
         position: absolute;
         top: 0;

package/styles/components/Form/Autocomplete/index.scss

@@ -87,7 +87,7 @@
     cursor: pointer;
 
     .cobalt-Icon {
-      @include semantic-color(accent, icon, fill);
+      @include semantic-color(icon, accent, fill);
     }
   }
 

package/styles/components/Form/CheckablePill.scss

@@ -92,14 +92,14 @@
 
   &--with-icon {
     .cobalt-Icon {
-      @include semantic-color(base, icon, fill);
+      @include semantic-color(icon, base, fill);
       margin-right: spacing(xs);
 
       transition: fill $animation-duration ease-in-out;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
-      @include semantic-color(accentAlt, icon, fill);
+      @include semantic-color(icon, accentAlt, fill);
     }
   }
 
@@ -110,7 +110,7 @@
       @include bg-color(secondary);
 
       .cobalt-Icon {
-        @include semantic-color(base, icon, fill);
+        @include semantic-color(icon, base, fill);
       }
     }
 
@@ -120,7 +120,7 @@
       @include border-color(errorAlt);
 
       .cobalt-Icon {
-        @include semantic-color(errorAlt, icon, fill);
+        @include semantic-color(icon, errorAlt, fill);
       }
     }
   }

package/styles/components/Form/RadioWithDetails.scss

@@ -89,7 +89,7 @@
     }
 
     &:focus-visible + #{ $self }__inner {
-      @include semantic-color(accentAlt, stroke, outline-color);
+      @include semantic-color(stroke, accentAlt, outline-color);
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
       outline-style: dashed;
       outline-width: 1px;
@@ -102,7 +102,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input {
-      @include semantic-color(accentAlt, icon, border-color);
+      @include semantic-color(icon, accentAlt, border-color);
     }
 
     &:checked + #{ $self }__inner #{ $self }__title,
@@ -130,7 +130,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input::after {
-      @include semantic-color(accentAlt, icon, border-color);
+      @include semantic-color(icon, accentAlt, border-color);
 
       opacity: 1;
 

package/styles/components/Form/TextInput.scss

@@ -9,7 +9,7 @@
     position: relative;
 
     &__Icon {
-      @include semantic-color(base, icon, fill);
+      @include semantic-color(icon, base, fill);
       position: absolute;
       top: 0;
       left: spacing(xs);
@@ -37,22 +37,22 @@
       }
 
       #{ $self }__Input + #{ $self }__Icon {
-        @include semantic-color(accent, icon, fill);
+        @include semantic-color(icon, accent, fill);
         pointer-events: none;
       }
 
       #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
-        @include semantic-color(subdued, icon, fill);
+        @include semantic-color(icon, subdued, fill);
         opacity: 0.7;
       }
 
       #{ $self }__Input:focus + #{ $self }__Icon,
       #{ $self }__Input:focus:placeholder-shown + #{ $self }__Icon {
-        @include semantic-color(accent, icon, fill);
+        @include semantic-color(icon, accent, fill);
       }
 
       #{ $self }__Input:disabled + #{ $self }__Icon {
-        @include semantic-color(subdued, icon, fill);
+        @include semantic-color(icon, subdued, fill);
         opacity: 0.7;
       }
     }

package/styles/components/Form/ToggleSwitch.scss

@@ -120,7 +120,7 @@ $toggle-switch-size-large: 28px;
     }
 
     &__ToggleSwitchSlider {
-      @include semantic-color(base, stroke, background-color);
+      @include semantic-color(stroke, base, background-color);
       display: inline-block;
 
       transition: $animation-duration;

package/styles/components/TabBar/index.scss

@@ -41,7 +41,7 @@
   }
 
   &TabScroller--underlined:after {
-    @include semantic-color(base, stroke, background);
+    @include semantic-color(stroke, base, background);
     position: absolute;
     bottom: 0;