@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.21

package/src/styles/global/components/_checkbox.scss

@@ -1,78 +1,83 @@
-%checkbox {
-    appearance: none;
-    box-sizing: border-box;
-    position: relative;
-    display: inline-block;
-    vertical-align: baseline;
-    top: 0.08em;
-    margin: 0;
-    padding: 0;
-    height: 16px;
-    width: 16px;
-    border-radius: 4px;
-    border: 1px solid var(--blue500);
-    background: #fff;
+@use "../../utilities/functions" as u;
 
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
+@layer craftsman-base {
+    %checkbox {
+        appearance: none;
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        vertical-align: baseline;
+        top: 0.08em;
+        margin: 0;
+        padding: 0;
+        --checkbox-size: 1;
+        height: calc(#{u.width("gutter")} * var(--checkbox-size));
+        width: calc(#{u.width("gutter")} * var(--checkbox-size));
         border-radius: 4px;
-        background: transparent;
-        transition: background-color 0.15s ease;
-    }
-
-    &::after {
-        position: absolute;
-        left: 50%;
-        top: 45%;
-        width: 5px;
-        height: 8px;
-        content: "";
-        display: block;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: translate(-50%, -58%) rotate(45deg) scale(0);
-        transform-origin: center;
-        transition: transform 0.15s ease;
-    }
-
-    &:checked {
-        border-color: var(--blue500);
+        border: 1px solid var(--blue500);
+        background: #fff;
 
         &::before {
-        background-color: var(--blue500);
-        border-radius: unset;
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 4px;
+            background: transparent;
+            transition: background-color 0.15s ease;
         }
 
         &::after {
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            position: absolute;
+            left: 50%;
+            top: 45%;
+            width: calc(5px * var(--checkbox-size));
+            height: calc(8px * var(--checkbox-size));
+            content: "";
+            display: block;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: translate(-50%, -58%) rotate(45deg) scale(0);
+            transform-origin: center;
+            transition: transform 0.15s ease;
         }
-    }
 
-    &:disabled {
-        border-color: var(--gray500);
+        &:checked {
+            border-color: var(--blue500);
 
-        &::before {
-        background-color: var(--gray200);
-        }
+            &::before {
+            background-color: var(--blue500);
+            border-radius: unset;
+            }
 
-        &::after {
-        border-color: var(--gray200);
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            &::after {
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
-    }
 
-    &:checked:disabled {
-        border-color: var(--gray400);
+        &:disabled {
+            border-color: var(--gray500);
 
-        &::before {
-        background: var(--gray400);
+            &::before {
+            background-color: var(--gray200);
+            }
+
+            &::after {
+            border-color: var(--gray200);
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
 
-        &::after {
-        border-color: var(--white);
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        &:checked:disabled {
+            border-color: var(--gray400);
+
+            &::before {
+            background: var(--gray400);
+            }
+
+            &::after {
+            border-color: var(--white);
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
     }
 }

package/src/styles/global/components/_code.scss

@@ -1,19 +1,23 @@
-%code {
-    background-color: var(--gray200);
-    color: var(--gray800);
-    padding: calc(var(--w-gutter, 16px) * 0.125) calc(var(--w-gutter, 16px) * 0.25);
-    margin: calc(var(--w-gutter, 16px) * 0.125);
-    display: inline-block;
-    font-size: var(--w-text, 14px);
+@use "../../utilities/functions" as u;
 
-    &:has(pre) {
-    padding: var(--w-gutter, 16px);
-    border-radius: calc(var(--w-gutter, 16px) * 0.5);
-    background-color: var(--gray800);
-    color: var(--gray200);
-    }
+@layer craftsman-base {
+    %code {
+        background-color: var(--gray200);
+        color: var(--gray800);
+        padding: #{u.width(gutter, 0.125)} #{u.width(gutter, 0.25)};
+        margin: #{u.width(gutter, 0.125)};
+        display: inline-block;
+        font-size: var(--w-text, 14px);
+
+        &:has(pre) {
+        padding: #{u.width(gutter)};
+        border-radius: #{u.width(gutter, 0.5)};
+        background-color: var(--gray800);
+        color: var(--gray200);
+        }
 
-    &:has(pre) pre {
-    margin: 0;
+        &:has(pre) pre {
+        margin: 0;
+        }
     }
 }

package/src/styles/global/components/_input.scss

@@ -1,46 +1,38 @@
-%inside-input-label-base {
-  --react-international-phone-height: 50px;
-  --react-international-phone-border-radius: 8px;
-  --react-international-phone-border-color: #c0c0c0ff;
-  position: relative;
-}
+@use "../../utilities/functions" as u;
 
-%inside-input-label-floating {
-  top: -0.5rem;
-  left: calc(var(--w-gutter, 16px) * 0.25);
-  font-size: calc(var(--w-text, 14px) * 0.75);
-}
+@layer craftsman-base {
 
-%interactive-focus-reset {
-  &:focus {
-    outline: 0;
-    box-shadow: none;
+  %interactive-focus-reset {
+    &:focus {
+      outline: 0;
+      box-shadow: none;
+    }
   }
-}
 
-%input-base {
-  color: var(--text);
-  border-radius: 3px;
-  border: 1px solid var(--gray400);
-  padding: calc(var(--w-gutter, 16px) * 0.5);
-  background-color: var(--white);
+  %input-base {
+    color: var(--text);
+    border-radius: 6px;
+    border: 1px solid var(--gray400);
+    padding: #{u.width("gutter", 0.5)};
+    background-color: var(--white);
 
-  &[type="number"]::-webkit-outer-spin-button,
-  &[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+    &[type="number"]::-webkit-outer-spin-button,
+    &[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
 
-  &[type="number"] {
-    -moz-appearance: textfield;
-    appearance: textfield;
-  }
+    &[type="number"] {
+      -moz-appearance: textfield;
+      appearance: textfield;
+    }
 
-  &:disabled,
-  &.disabled {
-    border-color: var(--gray200);
-    background-color: var(--gray100);
-  }
+    &:disabled,
+    &.disabled {
+      border-color: var(--gray200);
+      background-color: var(--gray100);
+    }
 
-  @extend %interactive-focus-reset;
+    @extend %interactive-focus-reset;
+  }
 }

package/src/styles/global/components/_radioButton.scss

@@ -1,33 +1,37 @@
-%radio {
-    --radio-btn-size: 16px;
-    transition: border-color 0.2s ease;
-    appearance: none;
-    cursor: pointer;
-    position: relative;
-    display: inline-grid;
-    place-content: center;
-    padding: 0;
-    width: var(--radio-btn-size);
-    height: var(--radio-btn-size);
-    border: 1px solid var(--blue600);
-    border-radius: 50%;
-    box-sizing: border-box;
+@use "../../utilities/functions" as u;
 
-    &::before {
-        content: "";
-        width: calc(var(--radio-btn-size) * 0.5);
-        height: calc(var(--radio-btn-size) * 0.5);
+@layer craftsman-base {
+    %radio {
+        transition: border-color 0.2s ease;
+        appearance: none;
+        cursor: pointer;
+        position: relative;
+        display: inline-grid;
+        place-content: center;
+        padding: 0;
+        --radio-size: 1;
+        width: calc(#{u.width("gutter")} * var(--radio-size));
+        height: calc(#{u.width("gutter")} * var(--radio-size));
+        border: 1px solid var(--blue600);
         border-radius: 50%;
-        transform: scale(0);
-        transition: transform 0.2s ease;
-        background-color: var(--blue600);
-    }
-
-    &:checked {
-        border-color: var(--gray500);
+        box-sizing: border-box;
 
         &::before {
-        transform: scale(1);
+            content: "";
+            width: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            height: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            border-radius: 50%;
+            transform: scale(0);
+            transition: transform 0.2s ease;
+            background-color: var(--blue600);
+        }
+
+        &:checked {
+            border-color: var(--gray500);
+
+            &::before {
+            transform: scale(1);
+            }
         }
     }
 }

package/src/styles/global/components/_select.scss

@@ -0,0 +1,56 @@
+@use "../../utilities/functions" as u;
+@layer craftsman-base {
+    select,
+    ::picker(select) {
+        appearance: base-select;
+        background: #{u.color("white")};
+        color: #{u.color("text")};
+        border: 1px solid #{u.color("gray200")};
+        border-radius: 6px;
+    }
+    select {
+        padding: 10px 40px 10px 14px;
+        position: relative;
+        &:hover,
+        &:focus {
+            outline: none;
+            border-color: #{u.color("gray200")};
+        }
+        &:focus-visible {
+            outline: none;
+        }
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 #{u.color("text")};
+        }
+        &::picker-icon {
+            color: #999999;
+            transition: 0.2s rotate;
+            content: "";
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+            margin: 0px 2px 0 12px;
+            position: absolute;
+            right: 16px;
+            top: 12px;
+        }
+        &:open::picker-icon {
+            margin-top: 6px;
+            rotate: 180deg;
+        }
+        option {
+            padding: #{u.width("gutter", 0.5)};
+            &:hover,
+            &:focus {
+                background: #{u.color("gray100")};
+            }
+            &::checkmark {
+                content: "";
+            }
+        }
+    }
+}

package/src/styles/global/components/_typography.scss

@@ -1,7 +1,98 @@
-%body-typography {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  color: var(--text);
-  line-height: 1.5;
-  font-weight: 400;
-  font-size: var(--w-text, 14px);
+@use "../../utilities/functions" as u;
+
+@mixin body-typography {
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    color: var(--text);
+    line-height: 1.5;
+    font-weight: 400;
+    font-size: var(--w-text, 14px);
+}
+
+@mixin h1 {
+    font-size: #{u.width(text, 3.125)};
+    line-height: 1.2;
+    margin: 0 0 #{u.width(gutter)} 0;
+}
+@mixin h2 {
+    font-size: #{u.width(text, 2.625)};
+    font-weight: 625;
+    line-height: 1.1;
+    margin: 0 0 #{u.width(gutter)} 0;
+}
+@mixin h3 {
+    font-size: #{u.width(text, 1.625)};
+    line-height: 1.1;
+    margin: 0 0 #{u.width(gutter, 0.75)} 0;
+}
+@mixin h4 {
+    font-size: #{u.width(text, 1.25)};
+    line-height: 1.1;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
+}
+@mixin h5 {
+    font-size: var(--w-text);
+    line-height: 1.2;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
+}
+@mixin h6 {
+    font-size: #{u.width(text, 0.875)};
+    line-height: 1.2;
+    font-weight: 600;
+    margin: 0;
+}
+@mixin p {
+    font-style: normal;
+    font-size: var(--w-text);
+    line-height: 1.5;
+    margin: 0;
+}
+@mixin small {
+    font-size: #{u.width(text, 0.75)};
+}
+@mixin xsmall {
+    font-size: #{u.width(text, 0.5)};
+}
+
+@layer craftsman-base {
+    // TODO: These h* declarations need to be moved somewhere not-terrible
+    h1 {
+        @include h1;
+    }
+
+    h2 {
+        @include h2;
+    }
+
+    h3 {
+        @include h3;
+    }
+
+    h4 {
+        @include h4;
+    }
+
+    h5 {
+        @include h5;
+    }
+
+    h6 {
+        @include h6;
+    }
+
+    p {
+        @include p;
+    }
+    small {
+        @include small;
+    }
+
+    @include u.breakpoint(mobileMax) {
+        h4 {
+            font-size: var(--w-text, 14px);
+        }
+
+        p {
+            font-size: calc(var(--w-text, 14px) * 0.875);
+        }
+    }
 }

package/src/styles/global/globalStyles.module.scss

@@ -1,129 +1 @@
-@use "./components/typography";
-@use "./components/code";
-@use "./components/mixins" as mixins;
-@use "./components/checkbox";
-@use "./components/radioButton";
-@use "./components/button";
-@use "./components/input";
-
-:global {
-    :root {
-      color-scheme: light dark;
-      font-synthesis: none;
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    ::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: #ddd;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: #000;
-      border-radius: 6px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: #555;
-    }
-
-    body {
-        @extend %body-typography;
-    }
-    body,
-    ul {
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      background-color: #fff;
-      -webkit-overflow-scrolling: touch;
-      overscroll-behavior: contain;
-    }
-
-    fieldset {
-      padding: 0;
-      border: 0;
-    }
-
-    code {
-      @extend %code;
-    }
-
-    button {
-      @extend %button-styles;
-    }
-
-    input {
-      @extend %input-base;
-
-      &[type="radio"] {
-        @extend %radio;
-      }
-
-      &[type="checkbox"] {
-        @extend %checkbox;
-      }
-    }
-
-    a {
-      @extend %text-link;
-    }
-
-    h1 {
-      font-size: calc(var(--w-text, 14px) * 3.125);
-      line-height: 1.2;
-    }
-
-    h2 {
-      font-size: calc(var(--w-text, 14px) * 2.625);
-      font-weight: 625;
-      line-height: 1.1;
-    }
-
-    h3 {
-      font-size: calc(var(--w-text, 14px) * 1.625);
-      line-height: 1.1;
-    }
-
-    h4 {
-      font-size: calc(var(--w-text, 14px) * 1.25);
-      line-height: 1.1;
-      margin: calc(var(--w-gutter, 16px) * 0.5) 0;
-    }
-
-    h5 {
-      font-size: var(--w-text, 14px);
-      line-height: 1.2;
-    }
-
-    h6 {
-      font-size: calc(var(--w-text, 14px) * 0.875);
-      line-height: 1.2;
-      font-weight: 600;
-    }
-
-    p {
-      font-style: normal;
-      font-size: var(--w-text, 14px);
-      line-height: 1.5;
-      margin: 0;
-    }
-
-    @media (max-width: 659.99999px) {
-      h4 {
-        font-size: var(--w-text, 14px);
-      }
-
-      p {
-        font-size: calc(var(--w-text, 14px) * 0.875);
-      }
-    }
-}
+@use "./globalStyles.scss";

package/src/styles/global/globalStyles.scss

@@ -1 +1,87 @@
-@use "./globalStyles.module.scss";
+@use "../config";
+@use "./components/typography" as t;
+@use "./components/code";
+@use "./components/checkbox";
+@use "./components/radioButton";
+@use "./components/button";
+@use "./components/input";
+@use "./components/select";
+@layer craftsman-base, craftsman-component, craftsman-theme;
+
+@layer craftsman-base {
+    :root {
+        color-scheme: light dark;
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #ddd;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #000;
+        border-radius: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+    body,
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+    ul {
+        list-style: none;
+    }
+    body {
+        @include t.body-typography;
+        background-color: #fff;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+    }
+
+    fieldset {
+        padding: 0;
+        border: 0;
+    }
+
+    code {
+        @extend %code;
+    }
+
+    button {
+        @extend %button-styles;
+    }
+
+    input {
+        @extend %input-base;
+        &[type="checkbox"] {
+            @extend %checkbox;
+        }
+
+        &[type="radio"] {
+            @extend %radio;
+        }
+    }
+    figure {
+        margin: 0;
+        
+    }
+    textarea {
+        @extend %input-base;
+    }
+
+    a {
+        @extend %text-link;
+    }
+    
+}