@bitrise/bitkit 9.5.4-alpha-chakra.1 → 9.5.4

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.5.4-alpha-chakra.1",
+  "version": "9.5.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
     "build": "yarn build:lib && yarn build:site",
-    "build:css": "postcss src/{*.css,**/*.css} --base src",
     "build:docs": "ts-node ./scripts/build-docs",
     "build:icons": "svgr src/Icon/svg && yarn lint:fix-icons",
     "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
-    "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn && yarn build:css --dir lib/esn",
-    "build:lib:cjs": "tsc -p src --outDir lib/cjs && yarn build:css --dir lib/cjs",
+    "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
+    "build:lib:cjs": "tsc -p src --outDir lib/cjs",
     "build:site": "rm -rf ./dist && rm -rf ./public && yarn build:docs && parcel build site/index.html -d dist",
     "commitlint": "commitlint",
-    "lint": "yarn lint:js && yarn lint:css",
-    "lint:css": "stylelint src/**/*.css site/**/*.css",
+    "lint": "yarn lint:js",
     "lint:js": "eslint src/**/*.tsx",
     "lint:fix-icons": "eslint --fix src/Icon/tsx/**",
     "semantic-release": "semantic-release",
@@ -114,8 +112,6 @@
     "lodash.shuffle": "^4.2.0",
     "node-watch": "^0.7.3",
     "parcel-bundler": "^1.12.0",
-    "postcss-cli": "^6.1.3",
-    "postcss-preset-env": "^6.7.1",
     "prettier": "^2.6.2",
     "prismjs": "^1.27.0",
     "react": "^17.0.2",
@@ -124,8 +120,6 @@
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "semantic-release": "^19.0.2",
-    "stylelint": "^14.6.1",
-    "stylelint-order": "^5.0.0",
     "superstatic": "^7.1.0",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.7.0",

package/src/Base/Base.css

@@ -1,10 +1,10 @@
 .Base {
   margin: 0;
-
-  &:first-child { margin-top: 0; }
-  &:last-child { margin-bottom: 0; }
 }
 
+.Base:first-child { margin-top: 0; }
+.Base:last-child { margin-bottom: 0; }
+
 .Base--container { position: relative; }
 
 .Base--absolute {

package/src/Button/Button.css

@@ -18,15 +18,15 @@
   transition-property: border-color, background-color, color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
+}
 
-  &:hover {
-    cursor: pointer;
-  }
+.Button:hover {
+  cursor: pointer;
+}
 
-  &:disabled,
-  &[disabled] {
-    cursor: default;
-  }
+.Button:disabled,
+.Button[disabled] {
+  cursor: not-allowed;
 }
 
 .Button--full-width {
@@ -65,42 +65,51 @@
   position: relative;
   overflow: hidden;
   z-index: 0;
+}
+
+.Button--level-primary::before,
+.Button--level-primary::after,
+.Button--level-secondary::before,
+.Button--level-secondary::after {
+  content: '';
+  position: absolute;
+  top: -0.125rem;
+  right: -0.125rem;
+  bottom: -0.125rem;
+  left: -0.125rem;
+  z-index: -1;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -0.125rem;
-    right: -0.125rem;
-    bottom: -0.125rem;
-    left: -0.125rem;
-    z-index: -1;
-    transition-property: opacity;
-    transition-duration: var(--transition-duration--base);
-    transition-timing-function: var(--transition-timing-function);
-  }
-
-  &::before { opacity: 1; }
-  &::after { opacity: 0; }
-
-  &:disabled::before,
-  &:hover:not(:disabled)::before,
-  &[disabled]::before,
-  &:hover:not([disabled])::before {
-    opacity: 0;
-  }
-
-  &:hover:not(:disabled)::after,
-  &:hover:not([disabled])::after {
-    opacity: 1;
-  }
-
-  &:disabled::after,
-  &:active:not(:disabled)::after,
-  &[disabled]::after,
-  &:active:not([disabled])::after {
-    opacity: 0;
-  }
+.Button--level-primary:disabled::before,
+.Button--level-primary:hover:not(:disabled)::before,
+.Button--level-primary[disabled]::before,
+.Button--level-primary:hover:not([disabled])::before,
+.Button--level-secondary:disabled::before,
+.Button--level-secondary:hover:not(:disabled)::before,
+.Button--level-secondary[disabled]::before,
+.Button--level-secondary:hover:not([disabled])::before {
+  opacity: 0;
+}
+
+.Button--level-primary:hover:not(:disabled)::after,
+.Button--level-primary:hover:not([disabled])::after,
+.Button--level-secondary:hover:not(:disabled)::after,
+.Button--level-secondary:hover:not([disabled])::after {
+  opacity: 1;
+}
+
+.Button--level-primary:disabled::after,
+.Button--level-primary:active:not(:disabled)::after,
+.Button--level-primary[disabled]::after,
+.Button--level-primary:active:not([disabled])::after,
+.Button--level-secondary:disabled::after,
+.Button--level-secondary:active:not(:disabled)::after,
+.Button--level-secondary[disabled]::after,
+.Button--level-secondary:active:not([disabled])::after {
+  opacity: 0;
 }
 
 .Button--level-primary {
@@ -108,88 +117,95 @@
   background-color: var(--color-grape--5);
   color: var(--color-gray--1);
   font-weight: var(--font-weight--bold);
+}
 
-  &:disabled,
-  &[disabled] {
-    border-color: var(--color-gray--5);
-    background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
-  }
+.Button--level-primary:disabled,
+.Button--level-primary[disabled] {
+  border-color: var(--color-gray--5);
+  background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
+}
 
-  &::before {
-    background-image: linear-gradient(to bottom, #6C0EB2, #450674);
-  }
+.Button--level-primary::before {
+  opacity: 1;
+  background-image: linear-gradient(to bottom, #6C0EB2, #450674);
+}
 
-  &::after {
-    background-image: linear-gradient(to bottom, #50167B, #3D125D);
-  }
+.Button--level-primary::after {
+  opacity: 0;
+  background-image: linear-gradient(to bottom, #50167B, #3D125D);
 }
 
 .Button--level-secondary {
   border-color: var(--color-gray--3);
   background-color: var(--color-gray--2);
   color: var(--color-grape--5);
+}
 
-  &:disabled,
-  &[disabled] {
-    border-color: var(--color-gray--3);
-    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-    color: var(--color-gray--5);
-  }
+.Button--level-secondary:disabled,
+.Button--level-secondary[disabled] {
+  border-color: var(--color-gray--3);
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+  color: var(--color-gray--5);
+}
 
-  &:active:not(:disabled) {
-    border-color: var(--color-eggplant);
-    background-color: var(--color-grape--5);
-    color: var(--color-gray--1);
-  }
+.Button--level-secondary:active:not(:disabled) {
+  border-color: var(--color-eggplant);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+}
 
-  &::before {
-    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-  }
+.Button--level-secondary::before {
+  opacity: 1;
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+}
 
-  &::after {
-    content: none;
-  }
+.Button--level-secondary::after {
+  content: none;
+  opacity: 0;
 }
 
 .Button--level-tertiary {
   border-color: transparent;
   background-color: transparent;
   color: var(--color-grape--3);
+}
 
-  &:disabled,
-  &[disabled] {
-    color: var(--color-gray--5);
-  }
+.Button--level-tertiary:disabled,
+.Button--level-tertiary[disabled] {
+  color: var(--color-gray--5);
+}
 
-  &:hover:not(:disabled),
-  &:hover:not([disabled]) {
-    background-color: var(--color-grape--1);
-  }
+.Button--level-tertiary:hover:not(:disabled),
+.Button--level-tertiary:hover:not([disabled]) {
+  background-color: var(--color-grape--1);
+}
 
-  &:active:not(:disabled),
-  &:active:not([disabled]) {
-    background-color: var(--color-grape--5);
-    color: var(--color-gray--1);
-  }
+.Button--level-tertiary:active:not(:disabled),
+.Button--level-tertiary:active:not([disabled]) {
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
 }
 
 .Button--variant-danger.Button--level-primary:not(:disabled),
 .Button--variant-danger.Button--level-primary:not([disabled]) {
   border-color: #D4093C;
   background-color: #C90032;
+}
 
-  &:active {
-    border-color: #D4093C;
-    background-color: var(--color-red--5);
-  }
+.Button--variant-danger.Button--level-primary:not(:disabled):active,
+.Button--variant-danger.Button--level-primary:not([disabled]):active {
+  border-color: #D4093C;
+  background-color: var(--color-red--5);
+}
 
-  &::before {
-    background-image: linear-gradient(to bottom, #FF2158, #E41447);
-  }
+.Button--variant-danger.Button--level-primary:not(:disabled)::before,
+.Button--variant-danger.Button--level-primary:not([disabled])::before {
+  background-image: linear-gradient(to bottom, #FF2158, #E41447);
+}
 
-  &::after {
-    content: none;
-  }
+.Button--variant-danger.Button--level-primary:not(:disabled)::after,
+.Button--variant-danger.Button--level-primary:not([disabled])::after {
+  content: none;
 }
 
 .Button--variant-danger.Button--level-secondary:not(:disabled),
@@ -197,35 +213,37 @@
   border-color: var(--color-gray--3);
   background-color: var(--color-red--1);
   color: var(--color-red--3);
+}
 
-  &:hover {
-    border-color: var(--color-red--2);
-  }
+.Button--variant-danger.Button--level-secondary:not(:disabled):hover,
+.Button--variant-danger.Button--level-secondary:not([disabled]):hover {
+  border-color: var(--color-red--2);
+}
 
-  &:active {
-    border-color: #D4093C;
-    background-color: var(--color-red--5);
-    color: var(--color-gray--1);
-  }
+.Button--variant-danger.Button--level-secondary:not(:disabled):active,
+.Button--variant-danger.Button--level-secondary:not([disabled]):active {
+  border-color: #D4093C;
+  background-color: var(--color-red--5);
+  color: var(--color-gray--1);
+}
 
-  &::before {
-    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-  }
+.Button--variant-danger.Button--level-secondary:not(:disabled)::before,
+.Button--variant-danger.Button--level-secondary:not([disabled])::before {
+  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+}
 
-  &::after {
-    content: none;
-  }
+.Button--variant-danger.Button--level-secondary:not(:disabled)::after,
+.Button--variant-danger.Button--level-secondary:not([disabled])::after {
+  content: none;
 }
 
-.Buttons--joined {
-  & .Button:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+.Buttons--joined .Button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 
-  & .Button:not(:last-child) {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+.Buttons--joined .Button:not(:last-child) {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }

package/src/DatePicker/DatePicker.css

@@ -9,22 +9,22 @@
   transition-property: color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
+}
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: scale(0);
-    opacity: 0;
-    border-radius: 50%;
-    background-color: var(--color-grape--4);
-    transition-property: transform, opacity, background-color;
-    transition-duration: var(--transition-duration--fast);
-    transition-timing-function: var(--transition-timing-function);
-  }
+.DatePicker__day::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: scale(0);
+  opacity: 0;
+  border-radius: 50%;
+  background-color: var(--color-grape--4);
+  transition-property: transform, opacity, background-color;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .DatePicker__day-inner {
@@ -39,20 +39,20 @@
   color: var(--color-gray--1);
 }
 
-.DatePicker__day--selected,
-.DatePicker__day--selectable.DatePicker__day--unselected:hover {
-  &::before {
-    transform: scale(calc(2.5 / 3));
-    opacity: 1;
-    background-color: var(--color-grape--4);
-  }
-}
-
 .DatePicker__day--selected::before {
+  transform: scale(calc(2.5 / 3));
+  opacity: 1;
+  background-color: var(--color-grape--4);
   transform: scale(1);
   background-color: var(--color-aqua--3);
 }
 
+.DatePicker__day--selectable.DatePicker__day--unselected:hover::before {
+  transform: scale(calc(2.5 / 3));
+  opacity: 1;
+  background-color: var(--color-grape--4);
+}
+
 .DatePicker__day--selected-from,
 .DatePicker__day--selected-between,
 .DatePicker__day--selected-to {

package/src/Hamburger/Hamburger.css

@@ -39,19 +39,17 @@
   opacity: 0;
 }
 
-.Hamburger--active {
-  &::before,
-  &::after {
-    transform: translateY(-50%);
-    opacity: 0;
-  }
-
-  & .Hamburger--bar {
-    transform: translateY(-50%) rotate(45deg);
-  }
-
-  & .Hamburger--bar::before {
-    transform: translateY(-50%) rotate(-90deg);
-    opacity: 1;
-  }
+.Hamburger--active::before,
+.Hamburger--active::after {
+  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.Hamburger--active .Hamburger--bar {
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.Hamburger--active .Hamburger--bar::before {
+  transform: translateY(-50%) rotate(-90deg);
+  opacity: 1;
 }

package/src/Input/Input.css

@@ -11,11 +11,11 @@
   text-overflow: ellipsis;
   line-height: inherit;
   appearance: none;
-
-  &:focus { outline: none; }
-  &::placeholder { color: var(--color-gray--7); }
 }
 
+.Input:focus { outline: none; }
+.Input::placeholder { color: var(--color-gray--7); }
+
 .Input__container {
   border: var(--Input--border) solid var(--color-gray--3);
   border-radius: var(--size--x1);
@@ -34,24 +34,24 @@
   transition-property: border-color, color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
+}
 
-  &:last-child {
-    border-right: 0;
-  }
+.Input__content:last-child {
+  border-right: 0;
 }
 
 .Input__content--outside {
   background-color: var(--color-white);
+}
 
-  &:first-child {
-    border-top-left-radius: var(--size--x1);
-    border-bottom-left-radius: var(--size--x1);
-  }
+.Input__content--outside:first-child {
+  border-top-left-radius: var(--size--x1);
+  border-bottom-left-radius: var(--size--x1);
+}
 
-  &:last-child {
-    border-top-right-radius: var(--size--x1);
-    border-bottom-right-radius: var(--size--x1);
-  }
+.Input__content--outside:last-child {
+  border-top-right-radius: var(--size--x1);
+  border-bottom-right-radius: var(--size--x1);
 }
 
 .Input__container--disabled,
@@ -75,9 +75,9 @@
 .Input__container:focus-within {
   border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
+}
 
-  & .Input__content {
-    border-color: var(--color-grape--3);
-    color: var(--color-grape--5);
-  }
+.Input__container:focus-within .Input__content {
+  border-color: var(--color-grape--3);
+  color: var(--color-grape--5);
 }

package/src/Link/Link.css

@@ -11,30 +11,30 @@
 
 .Link--color-grape-3 {
   color: var(--color-grape--3);
-
-  &:hover { color: var(--color-grape--4); }
 }
 
+.Link--color-grape-3:hover { color: var(--color-grape--4); }
+
 .Link--color-grape-5 {
   color: var(--color-grape--5);
-
-  &:hover { color: var(--color-grape--3); }
 }
 
+.Link--color-grape-5:hover { color: var(--color-grape--3); }
+
 .Link--color-gray-1 {
   color: var(--color-gray--1);
-
-  &:hover { color: var(--color-gray--2); }
 }
 
+.Link--color-gray-1:hover { color: var(--color-gray--2); }
+
 .Link--color-gray-5 {
   color: var(--color-gray--5);
-
-  &:hover { color: var(--color-gray--6); }
 }
 
+.Link--color-gray-5:hover { color: var(--color-gray--6); }
+
 .Link--color-white {
   color: var(--color-white);
-
-  &:hover { color: var(--color-gray--1); }
 }
+
+.Link--color-white:hover { color: var(--color-gray--1); }

package/src/Modal/Modal.css

@@ -31,14 +31,13 @@
   animation-duration: var(--transition-duration--fast);
   animation-fill-mode: forwards;
   animation-timing-function: var(--transition-timing-function);
+}
 
-  /* Nested, for workaround of Base margin flow */
-  &,
-  &:first-child,
-  &:last-child {
-    margin-top: auto;
-    margin-bottom: auto;
-  }
+.Modal__content,
+.Modal__content:first-child,
+.Modal__content:last-child {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .Modal--visible {

package/src/Sidebar/Sidebar.css

@@ -19,53 +19,52 @@
   position: relative;
   overflow: hidden;
   z-index: 0;
+}
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: var(--size--x1);
-    opacity: 0;
-    border-radius: 0 var(--size--x1) var(--size--x1) 0;
-    background-color: var(--color-aqua--3);
-    transition-property: opacity;
-    transition-duration: var(--transition-duration--slow);
-    transition-timing-function: var(--transition-timing-function);
-  }
+.Sidebar__menu-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--size--x1);
+  opacity: 0;
+  border-radius: 0 var(--size--x1) var(--size--x1) 0;
+  background-color: var(--color-aqua--3);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration--slow);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .Sidebar__menu-item-link {
   position: relative;
   padding: var(--size--x4) var(--size--x6);
   cursor: pointer;
+}
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: var(--size--x2);
-    z-index: -1;
-    transition-property: transform, border-radius, background-color;
-    transition-duration: var(--transition-duration--base);
-    transition-timing-function: var(--transition-timing-function);
-  }
-}
-
-.Sidebar__menu-item--active,
-.Sidebar__menu-item--active:hover {
-  &::before {
-    opacity: 1;
-  }
-
-  & .Sidebar__menu-item-link::before {
-    transform: scale(1.2);
-    border-radius: 0;
-  }
+.Sidebar__menu-item-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--size--x2);
+  z-index: -1;
+  transition-property: transform, border-radius, background-color;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Sidebar__menu-item--active::before,
+.Sidebar__menu-item--active:hover::before {
+  opacity: 1;
+}
+
+.Sidebar__menu-item--active .Sidebar__menu-item-link::before,
+.Sidebar__menu-item--active:hover .Sidebar__menu-item-link::before {
+  transform: scale(1.2);
+  border-radius: 0;
 }
 
 .Sidebar__sub-menu-item {
@@ -81,46 +80,46 @@
 .Sidebar--theme-dark {
   background-color: var(--color-grape--5);
   color: var(--color-gray--1);
+}
 
-  & .Sidebar__header,
-  & .Sidebar__menu {
-    border-bottom-color: var(--color-grape--4);
-  }
+.Sidebar--theme-dark .Sidebar__header,
+.Sidebar--theme-dark .Sidebar__menu {
+  border-bottom-color: var(--color-grape--4);
+}
 
-  & .Sidebar__menu:first-child {
-    border-top-color: var(--color-grape--4);
-  }
+.Sidebar--theme-dark .Sidebar__menu:first-child {
+  border-top-color: var(--color-grape--4);
+}
 
-  & .Sidebar__sub-menu-item {
-    border-top-color: var(--color-grape--5);
-  }
+.Sidebar--theme-dark .Sidebar__sub-menu-item {
+  border-top-color: var(--color-grape--5);
 }
 
 .Sidebar--theme-light {
   background-color: var(--color-white);
   color: var(--color-grape-5);
+}
+
+.Sidebar--theme-light .Sidebar__header,
+.Sidebar--theme-light .Sidebar__menu {
+  border-bottom-color: var(--color-gray--2);
+}
+
+.Sidebar--theme-light .Sidebar__menu:first-child {
+  border-top-color: var(--color-gray--2);
+}
+
+.Sidebar--theme-light .Sidebar__sub-menu-item,
+.Sidebar--theme-light .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
+.Sidebar--theme-light .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
+  background-color: var(--color-gray--1);
+}
+
+.Sidebar--theme-light .Sidebar__sub-menu-item {
+  border-top-color: var(--color-gray--2);
+}
 
-  & .Sidebar__header,
-  & .Sidebar__menu {
-    border-bottom-color: var(--color-gray--2);
-  }
-
-  & .Sidebar__menu:first-child {
-    border-top-color: var(--color-gray--2);
-  }
-
-  & .Sidebar__sub-menu-item,
-  & .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
-  & .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-    background-color: var(--color-gray--1);
-  }
-
-  & .Sidebar__sub-menu-item {
-    border-top-color: var(--color-gray--2);
-  }
-
-  & .Sidebar__sub-menu-item--active,
-  & .Sidebar__sub-menu-item:hover {
-    background-color: var(--color-gray--2);
-  }
+.Sidebar--theme-light .Sidebar__sub-menu-item--active,
+.Sidebar--theme-light .Sidebar__sub-menu-item:hover {
+  background-color: var(--color-gray--2);
 }

package/src/Skeleton/Skeleton.css

@@ -6,24 +6,24 @@
 .Skeleton {
   position: relative;
   overflow: hidden;
+}
 
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background:
-      linear-gradient(
-        to left,
-        rgba(var(--Skeleton--color), 0),
-        rgba(var(--Skeleton--color), 0.63) 35%,
-        rgba(var(--Skeleton--color), 1) 48%,
-        rgba(var(--Skeleton--color), 0.57) 55%,
-        rgba(var(--Skeleton--color), 0)
-      );
-    pointer-events: none;
-  }
+.Skeleton::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background:
+    linear-gradient(
+      to left,
+      rgba(var(--Skeleton--color), 0),
+      rgba(var(--Skeleton--color), 0.63) 35%,
+      rgba(var(--Skeleton--color), 1) 48%,
+      rgba(var(--Skeleton--color), 0.57) 55%,
+      rgba(var(--Skeleton--color), 0)
+    );
+  pointer-events: none;
 }
 
 .Skeleton--active::after {

package/src/Table/Table.css

@@ -42,14 +42,20 @@
   box-shadow: var(--shadow-elevation--x2);
 }
 
-.Table--type-card .Table__row:first-child .Table__cell {
-  &:first-child { border-top-left-radius: var(--size--x2); }
-  &:last-child { border-top-right-radius: var(--size--x2); }
+.Table--type-card .Table__row:first-child .Table__cell:first-child {
+  border-top-left-radius: var(--size--x2);
 }
 
-.Table--type-card .Table__row:last-child .Table__cell {
-  &:first-child { border-bottom-left-radius: var(--size--x2); }
-  &:last-child { border-bottom-right-radius: var(--size--x2); }
+.Table--type-card .Table__row:first-child .Table__cell:last-child {
+  border-top-right-radius: var(--size--x2);
+}
+
+.Table--type-card .Table__row:last-child .Table__cell:first-child {
+  border-bottom-left-radius: var(--size--x2);
+}
+
+.Table--type-card .Table__row:last-child .Table__cell:last-child {
+  border-bottom-right-radius: var(--size--x2);
 }
 
 .Table--type-card .Table__header-cell,

package/src/Tabs/Tabs.css

@@ -23,8 +23,8 @@
 
 .Tabs__tab--active {
   color: var(--color-grape--5);
+}
 
-  &::before {
-    background-color: var(--color-aqua--3);
-  }
+.Tabs__tab--active::before {
+  background-color: var(--color-aqua--3);
 }

package/src/Text/Text.css

@@ -28,6 +28,6 @@
 
 .Text--monospace {
   font-family: var(--font-family-monospace);
-
-  &.Text--weight-bold { font-weight: var(--font-weight-monospace--bold); }
 }
+
+.Text--monospace.Text--weight-bold { font-weight: var(--font-weight-monospace--bold); }

package/src/Textarea/Textarea.css

@@ -13,26 +13,27 @@
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
   appearance: none;
-
-  &::placeholder { color: var(--color-gray--7); }
-  &:disabled { background-color: var(--color-gray--2); }
 }
 
+.TextArea::placeholder { color: var(--color-gray--7); }
+.TextArea:disabled { background-color: var(--color-gray--2); }
+
 .TextArea--invalid {
   border-color: var(--color-red--3);
   color: var(--color-red--3);
-
-  &::placeholder { color: var(--color-red--3); }
 }
 
+.TextArea--invalid::placeholder { color: var(--color-red--3); }
+
 .TextArea:focus,
 .TextArea--invalid:focus {
   outline: none;
   border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
   color: var(--color-grape--5);
+}
 
-  &::placeholder {
-    color: transparent;
-  }
+.TextArea:focus::placeholder,
+.TextArea--invalid:focus::placeholder {
+  color: transparent;
 }

package/src/Toggle/Toggle.css

@@ -69,10 +69,10 @@
 
 .Toggle__input:checked + .Toggle__control {
   background-color: var(--color-aqua--3);
+}
 
-  & .Toggle__knob {
-    transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);
-  }
+.Toggle__input:checked + .Toggle__control .Toggle__knob {
+  transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);
 }
 
 .Toggle__container--disabled .Toggle__input:checked + .Toggle__control {

package/src/variables.css

@@ -9,7 +9,7 @@
   --size--x10: 2.5rem;
   --size--x12: 3rem;
   --size--x16: 4rem;
-/*
+
   --color-white: #FFFFFF;
   --color-black: #222222;
 
@@ -148,7 +148,7 @@
 
   --color-overlay--black: rgba(34, 34, 34, 0.8);
   --color-overlay--grape: rgba(53, 29, 72, 0.8);
-*/
+/*
   --color-white: var(--colors-neutral-100);
   --color-black: var(--colors-neutral-10);
 
@@ -230,6 +230,7 @@
   --rgb-blue--2: 134, 193, 230;
   
   --color-overlay--black: rgba(34, 34, 34, 0.8);
+  */
 
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;