@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/buttons.css

@@ -8,15 +8,15 @@ All right reserved.
 
 /*
   .button
-  .button--label
-  .button--primary
-  .button--success
-  .button--warning
-  .button--danger
-  .button--white
-  .button--black
-  .button--clear
-  .button--dropdown
+  .button_label
+  .button_primary
+  .button_success
+  .button_warning
+  .button_danger
+  .button_white
+  .button_black
+  .button_clear
+  .button_dropdown
   .buttons-group
 */
 
@@ -67,202 +67,206 @@ All right reserved.
   */
 }
 
-.button, [type=submit] {
-  /* Computed on the element so var(--button-color) respects .button--primary etc. */
-  --button-color-hover: color-mix(
-      in oklab,
-      var(--button-color) calc(100% - var(--button-hover-lighten)),
-      white var(--button-hover-lighten)
-    );
-  --button-color-active: color-mix(
-      in oklab,
-      var(--button-color) calc(100% - var(--button-active-darken)),
-      black var(--button-active-darken)
-    );
-  --button-font-color-hover: var(--button-font-color);
-  --button-font-color-active: var(--button-font-color);
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  min-height: var(--button-height, calc(var(--button-font-size) * var(--button-height-coeff)));
-  padding: 0 var(--button-side-padding, calc(var(--button-font-size) * var(--button-side-padding-coeff)));
-  color: var(--button-font-color);
-  font-family: var(--button-font-family);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  line-height: 1;
-  vertical-align: bottom;
-  white-space: nowrap;
-  text-align: center;
-  text-shadow: none;
-  text-transform: none;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  overflow: hidden;
-  border: none;
-  border-radius: var(--button-border-radius);
-  background-color: var(--button-color);
-  transition: var(--button-transition);
-  transform: var(--button-transform);
-  transform-origin: var(--button-transform-origin);
-  user-select: none;
-  appearance: none;
-  box-shadow: var(--button-box-shadow);
+@layer buttons {
   
-  & svg {
-    transform: translateZ(0);
-  }
+  .button, [type=submit] {
+    /* Computed on the element so var(--button-color) respects .button_primary etc. */
+    --button-color-hover: color-mix(
+        in oklab,
+        var(--button-color) calc(100% - var(--button-hover-lighten)),
+        white var(--button-hover-lighten)
+      );
+    --button-color-active: color-mix(
+        in oklab,
+        var(--button-color) calc(100% - var(--button-active-darken)),
+        black var(--button-active-darken)
+      );
+    --button-font-color-hover: var(--button-font-color);
+    --button-font-color-active: var(--button-font-color);
   
-  &:link,
-  &:visited {
-    text-decoration: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    min-height: var(--button-height, calc(var(--button-font-size) * var(--button-height-coeff)));
+    padding: 0 var(--button-side-padding, calc(var(--button-font-size) * var(--button-side-padding-coeff)));
     color: var(--button-font-color);
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    vertical-align: bottom;
+    white-space: nowrap;
+    text-align: center;
+    text-shadow: none;
+    text-transform: none;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    overflow: hidden;
+    border: none;
+    border-radius: var(--button-border-radius);
     background-color: var(--button-color);
+    transition: var(--button-transition);
     transform: var(--button-transform);
+    transform-origin: var(--button-transform-origin);
+    user-select: none;
+    appearance: none;
+    box-shadow: var(--button-box-shadow);
+    
+    & svg {
+      transform: translateZ(0);
+    }
+    
+    &:link,
+    &:visited {
+      text-decoration: none;
+      color: var(--button-font-color);
+      background-color: var(--button-color);
+      transform: var(--button-transform);
+    }
+    
+    &:focus-visible {
+      outline: solid .2rem #8888;
+      transition: none;
+    }
+    
+    @media (any-hover: hover) {
+      &:focus-visible,
+      &:hover,
+      &.hover {
+        text-decoration: none;
+        color: var(--button-font-color-hover);
+        background-color: var(--button-color-hover);
+        transform: var(--button-transform-hover);
+        box-shadow: var(--button-box-shadow-hover);
+      }
+    }
+    
+    &:active,
+    &.active {
+      text-decoration: none;
+      color: var(--button-font-color-active);
+      background-color: var(--button-color-active);
+      transform: var(--button-transform-active);
+      box-shadow: var(--button-box-shadow-active);
+    }
+  
+    &[disabled],
+    &.disabled {
+      opacity: var(--button-disabled-opacity);
+      pointer-events: none;
+    }
   }
   
-  &:focus-visible {
-    outline: solid .2rem #8888;
-    transition: none;
+  
+  /* Predefined styles & colors */
+  
+  .button_spacy {
+    padding-top: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+    padding-bottom: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+    padding-left: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+    padding-right: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
   }
   
-  @media (any-hover: hover) {
-    &:focus-visible,
-    &:hover,
-    &.hover {
-      text-decoration: none;
-      color: var(--button-font-color-hover);
-      background-color: var(--button-color-hover);
-      transform: var(--button-transform-hover);
-      box-shadow: var(--button-box-shadow-hover);
-    }
+  .button_label {
+    --button-height: calc(var(--line-height) * 1em);
+    --button-side-padding: .5em;
+    --button-font-size: inherit;
+    --button-border-radius: .5em;
+    vertical-align: baseline;
   }
   
-  &:active,
-  &.active {
-    text-decoration: none;
-    color: var(--button-font-color-active);
-    background-color: var(--button-color-active);
-    transform: var(--button-transform-active);
-    box-shadow: var(--button-box-shadow-active);
+  .button_primary {
+    --button-color: var(--color-primary);
+    --button-font-color: #fff;
   }
-
-  &[disabled],
-  &.disabled {
-    opacity: var(--button-disabled-opacity);
-    pointer-events: none;
+  .button_success {
+    --button-color: var(--color-success);
+    --button-font-color: #fff;
   }
-}
-
-
-/* Predefined styles & colors */
-
-.button--spacy {
-  padding-top: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
-  padding-bottom: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
-  padding-left: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
-  padding-right: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
-}
-
-.button--label {
-  --button-height: calc(var(--line-height) * 1em);
-  --button-side-padding: .5em;
-  --button-font-size: inherit;
-  --button-border-radius: .5em;
-  vertical-align: baseline;
-}
-
-.button--primary {
-  --button-color: var(--color-primary);
-  --button-font-color: #fff;
-}
-.button--success {
-  --button-color: var(--color-success);
-  --button-font-color: #fff;
-}
-.button--warning {
-  --button-color: var(--color-warning);
-  --button-font-color: #fff;
-}
-.button--danger {
-  --button-color: var(--color-danger);
-  --button-font-color: #fff;
-}
-.button--white {
-  --button-color: #fff;
-  --button-font-color: #000;
-}
-.button--black {
-  --button-color: #111;
-  --button-font-color: #fff;
-}
-.button--clear {
-  --button-color: transparent;
-  --button-box-shadow: none;
-  --button-box-shadow-hover: none;
-  --button-box-shadow-active: none;
-}
-
-
-/* Group */
-
-.buttons-group {
-  display: flex;
-  gap: calc(var(--space-1) / 2);
-  
-  & .button {
-    border-radius: 0;
+  .button_warning {
+    --button-color: var(--color-warning);
+    --button-font-color: #fff;
+  }
+  .button_danger {
+    --button-color: var(--color-danger);
+    --button-font-color: #fff;
   }
+  .button_white {
+    --button-color: #fff;
+    --button-font-color: #000;
+  }
+  .button_black {
+    --button-color: #111;
+    --button-font-color: #fff;
+  }
+  .button_clear {
+    --button-color: transparent;
+    --button-box-shadow: none;
+    --button-box-shadow-hover: none;
+    --button-box-shadow-active: none;
+  }
+  
   
-  & .button:nth-child(1 of .button:not(.hidden)) {
-    border-top-left-radius: var(--button-border-radius);
-    border-bottom-left-radius: var(--button-border-radius);
+  /* Group */
+  
+  .buttons-group {
+    display: flex;
+    gap: calc(var(--space-1) / 2);
+    
+    & .button {
+      border-radius: 0;
+    }
+    
+    & .button:nth-child(1 of .button:not(.hidden)) {
+      border-top-left-radius: var(--button-border-radius);
+      border-bottom-left-radius: var(--button-border-radius);
+    }
+    
+    & .button:nth-last-child(1 of .button:not(.hidden)) {
+      border-top-right-radius: var(--button-border-radius);
+      border-bottom-right-radius: var(--button-border-radius);
+    }
   }
   
-  & .button:nth-last-child(1 of .button:not(.hidden)) {
-    border-top-right-radius: var(--button-border-radius);
-    border-bottom-right-radius: var(--button-border-radius);
+  
+  /* Dropdown button */
+  
+  .button_dropdown {
+    --temp: calc(var(--button-font-size) * var(--button-side-padding-coeff));
+    padding-right: calc(var(--button-side-padding, var(--temp)) * 1.8);
+  
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: var(
+        --button-side-padding,
+        calc(var(--button-font-size) * var(--button-side-padding-coeff)
+      ));
+      width: .5em;
+      height: .5em;
+      margin-top: -.05em;
+      border-bottom: solid .15rem var(--button-font-color);
+      border-right: solid .15rem var(--button-font-color);
+      transform: rotate(45deg);
+      transform-origin: center;
+      will-change: opacity;
+      opacity: .4;
+      transition: opacity .1s ease-out;
+    }
   }
-}
-
-
-/* Dropdown button */
-
-.button--dropdown {
-  --var: calc(var(--button-font-size) * var(--button-side-padding-coeff));
-  padding-right: calc(var(--button-side-padding, --var) * 1.8);
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    right: var(
-      --button-side-padding,
-      calc(var(--button-font-size) * var(--button-side-padding-coeff)
-    ));
-    width: .5em;
-    height: .5em;
-    margin-top: -.05em;
-    border-bottom: solid .15rem var(--button-font-color);
-    border-right: solid .15rem var(--button-font-color);
-    transform: rotate(45deg);
-    transform-origin: center;
-    will-change: opacity;
-    opacity: .4;
-    transition: opacity .1s ease-out;
+  .dropdown_bottom .button_dropdown::after {
+    transform: rotate(225deg);
+    margin-top: .35em;
   }
-}
-.dropdown--bottom .button--dropdown::after {
-  transform: rotate(225deg);
-  margin-top: .35em;
-}
-
-.button--dropdown.active {
-  &::after {
-    opacity: 1;
+  
+  .button_dropdown.active {
+    &::after {
+      opacity: 1;
+    }
   }
+
 }

package/src/components/x/colors.css

@@ -12,6 +12,8 @@ All right reserved.
   .color-warning
   .color-danger
   .color-error
+  .color-black
+  .color-white
   .color-grey
   
   .bg-primary
@@ -19,6 +21,8 @@ All right reserved.
   .bg-warning
   .bg-danger
   .bg-error
+  .bg-black
+  .bg-white
   .bg-grey
 */
 
@@ -28,43 +32,61 @@ All right reserved.
   --color-warning: #ff8800;
   --color-danger: #ee3333;
   --color-error: #ee3333;
+  --color-black: #fff;
+  --color-white: #000;
   --color-grey: #f4f5f6;
 }
 
-.color-primary {
-  color: var(--color-primary);
-}
-.color-success {
-  color: var(--color-success);
-}
-.color-warning {
-  color: var(--color-warning);
-}
-.color-danger {
-  color: var(--color-danger);
-}
-.color-error {
-  color: var(--color-error);
-}
-.color-grey {
-  color: var(--color-grey);
-}
+@layer colors {
+    
+  .color-primary {
+    color: var(--color-primary);
+  }
+  .color-success {
+    color: var(--color-success);
+  }
+  .color-warning {
+    color: var(--color-warning);
+  }
+  .color-danger {
+    color: var(--color-danger);
+  }
+  .color-error {
+    color: var(--color-error);
+  }
+  .color-black {
+    color: var(--color-black);
+  }
+  .color-white {
+    color: var(--color-white);
+  }
+  .color-grey {
+    color: var(--color-grey);
+  }
+  
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-success {
+    background-color: var(--color-success);
+  }
+  .bg-warning {
+    background-color: var(--color-warning);
+  }
+  .bg-danger {
+    background-color: var(--color-danger);
+  }
+  .bg-error {
+    background-color: var(--color-error);
+  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-grey {
+    background-color: var(--color-grey);
+  }
 
-.bg-primary {
-  background-color: var(--color-primary);
-}
-.bg-success {
-  background-color: var(--color-success);
-}
-.bg-warning {
-  background-color: var(--color-warning);
-}
-.bg-danger {
-  background-color: var(--color-danger);
-}
-.bg-error {
-  background-color: var(--color-error);
-}
-.bg-grey {
-  background-color: var(--color-grey);
 }