initial

layers/ui/components/checkbox/styles.scss

@@ -0,0 +1,98 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-checkbox {
+  $self: &;
+
+  --size: 16px;
+
+  display: flex;
+
+  &__wrapper {
+    display: inline-flex;
+    position: relative;
+  }
+
+  &__input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: -1;
+    margin: 0;
+  }
+
+  &__checkmark {
+    --border-color: var(--checkbox-border-color);
+    --border-width: 1px;
+
+    width: var(--size);
+    height: var(--size);
+    border-radius: 4px;
+    outline: var(--border-width) solid var(--border-color);
+    outline-offset: calc(var(--border-width) * -1);
+    color: transparent;
+    cursor: pointer;
+    transition: .2s ease-out;
+    transition-property: outline-color, background-color, color;
+
+    #{$self}.has-label & {
+      margin-top: 1px;
+    }
+
+    #{$self}__input:focus-visible + &,
+    #{$self}:not(.is-disabled):not(.is-checked) &:hover {
+      --border-width: 2px;
+    }
+
+    #{$self}.is-checked & {
+      --border-width: 0px;
+
+      color: var(--checkbox-checked-color);
+      background-color: var(--checkbox-checked-background);
+    }
+
+    #{$self}.is-checked #{$self}__input:focus-visible + &,
+    #{$self}:not(.is-disabled).is-checked &:hover {
+      color: var(--checkbox-checked-hover-color);
+    }
+
+    #{$self}.is-invalid & {
+      --border-color: var(--checkbox-invalid-border-color);
+    }
+
+    #{$self}.is-disabled & {
+      --border-color: var(--checkbox-disabled-border-color);
+
+      cursor: not-allowed;
+    }
+
+    #{$self}.is-disabled.is-checked & {
+      color: var(--checkbox-disabled-checked-color);
+    }
+  }
+
+  &__label {
+    @include txt-i-m;
+
+    margin-left: 8px;
+    color: var(--checkbox-label-color);
+
+    #{$self}.is-disabled & {
+      color: var(--checkbox-label-disabled-color);
+      cursor: not-allowed;
+    }
+  }
+
+  @include element-variant('checkbox', '', (
+          'border-color': $clr-grey-400,
+          'checked-color': $clr-grey-600,
+          'checked-background': $clr-grey-300,
+          'checked-hover-color': $clr-grey-500,
+          'invalid-border-color': $clr-red-500,
+          'disabled-border-color': $clr-grey-300,
+          'disabled-checked-color': $clr-grey-400,
+          'label-color': $clr-black,
+          'label-disabled-color': $clr-grey-400
+  ))
+}