@nightshadeui/stylesheets 2.0.0-dev.3

package/commons.css

@@ -0,0 +1,62 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    color-scheme: light dark;
+}
+
+[data-theme=light] {
+    color-scheme: light;
+}
+
+[data-theme=dark] {
+    color-scheme: dark;
+}
+
+html,
+body,
+img,
+form {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+html {
+    font-size: var(--font-size);
+    font-family: var(--font-main);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+
+    color: var(--text-color);
+    background: var(--base-color);
+
+    text-rendering: optimizeLegibility;
+}
+
+a {
+    color: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+button,
+input,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"],
+input[type="button"],
+input[type="submit"],
+button {
+    cursor: pointer;
+}
+
+b, strong {
+    font-weight: var(--font-weight-bold);
+}

package/index.css

@@ -0,0 +1,18 @@
+@import './variables/base.css';
+@import './variables/spacing.css';
+@import './variables/grid.css';
+@import './variables/font.css';
+@import './variables/palette.css';
+@import './variables/input.css';
+
+@import './commons.css';
+@import './input.css';
+@import './util.css';
+@import './kbd.css';
+
+@import './transitions/fade-directional.css';
+@import './transitions/fade-scale.css';
+@import './transitions/fade-shove.css';
+@import './transitions/fade-squash.css';
+@import './transitions/fade-swipe.css';
+@import './transitions/fade.css';

package/input.css

@@ -0,0 +1,103 @@
+.input-kind-base {
+    --input-z: 0;
+    --input-text-color: var(--color-base-900);
+    --input-surface-color: var(--color-base-100);
+    --input-surface-color-top: light-dark(var(--color-base-0), var(--color-base-200));
+    --input-surface-color-bottom: light-dark(var(--color-base-200), var(--color-base-0));
+    --input-surface-color-text: var(--color-base-900);
+    --input-border-color: var(--color-base-400);
+    --input-shadow-color: var(--shadow-color-light);
+    --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
+    --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
+}
+
+.input-kind-inverse {
+    --input-z: 1;
+    --input-text-color: var(--color-inverse-0);
+    --input-surface-color: var(--color-inverse-0);
+    --input-surface-color-top: light-dark(var(--color-inverse-0), var(--color-inverse-200));
+    --input-surface-color-bottom: light-dark(var(--color-inverse-200), var(--color-inverse-0));
+    --input-surface-color-text: var(--color-inverse-900);
+    --input-border-color: var(--color-inverse-0);
+    --input-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
+    --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
+    --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
+}
+
+.input-kind-primary {
+    --input-z: 5;
+    --input-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
+    --input-surface-color: var(--color-primary-500);
+    --input-surface-color-top: var(--color-primary-400);
+    --input-surface-color-bottom: var(--color-primary-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
+    --input-shadow-color: var(--color-primary-800);
+    --input-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
+    --input-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
+}
+
+.input-kind-secondary {
+    --input-z: 4;
+    --input-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
+    --input-surface-color: var(--color-secondary-500);
+    --input-surface-color-top: var(--color-secondary-400);
+    --input-surface-color-bottom: var(--color-secondary-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
+    --input-shadow-color: var(--color-secondary-800);
+    --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
+    --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
+}
+
+.input-kind-tertiary {
+    --input-z: 3;
+    --input-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
+    --input-surface-color: var(--color-tertiary-500);
+    --input-surface-color-top: var(--color-tertiary-400);
+    --input-surface-color-bottom: var(--color-tertiary-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
+    --input-shadow-color: var(--color-tertiary-800);
+    --input-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
+    --input-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
+}
+
+.input-kind-success {
+    --input-z: 3;
+    --input-text-color: light-dark(var(--color-success-500), var(--color-success-400));
+    --input-surface-color: var(--color-success-500);
+    --input-surface-color-top: var(--color-success-400);
+    --input-surface-color-bottom: var(--color-success-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-success-600), var(--color-success-400));
+    --input-shadow-color: var(--color-success-800);
+    --input-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
+    --input-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
+}
+
+.input-kind-warning {
+    --input-z: 3;
+    --input-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
+    --input-surface-color: var(--color-warning-500);
+    --input-surface-color-top: var(--color-warning-400);
+    --input-surface-color-bottom: var(--color-warning-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
+    --input-shadow-color: var(--color-warning-800);
+    --input-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
+    --input-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
+}
+
+.input-kind-danger {
+    --input-z: 3;
+    --input-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
+    --input-surface-color: var(--color-danger-500);
+    --input-surface-color-top: var(--color-danger-400);
+    --input-surface-color-bottom: var(--color-danger-600);
+    --input-surface-color-text: #fff;
+    --input-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
+    --input-shadow-color: var(--color-danger-800);
+    --input-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
+    --input-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
+}

package/kbd.css

@@ -0,0 +1,38 @@
+kbd {
+    --kbd-surface-top: light-dark(var(--color-base-0), var(--color-base-100));
+    --kbd-surface-bottom: light-dark(var(--color-base-100), var(--color-base-0));
+
+    position: relative;
+
+    display: inline-block;
+    text-align: center;
+
+    height: 1.5em;
+    min-width: 1.5em;
+    padding: 0 .25em;
+    margin: 0 2px;
+    border-radius: var(--border-radius-xs);
+
+    border: 1px solid var(--color-base-200);
+    border-bottom-color: var(--color-base-400);
+    box-shadow: 0 1px 0 var(--color-base-400);
+
+    font: inherit;
+    background: var(--color-base-0);
+    background: linear-gradient(
+        to bottom,
+        var(--kbd-surface-top) 0%,
+        var(--kbd-surface-bottom) 100%);
+}
+
+kbd::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    bottom: -4px;
+    left: -3px;
+    right: -3px;
+    border-radius: 4px;
+    border: 1px solid var(--color-base-300);
+    border-top: 0;
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@nightshadeui/stylesheets",
+    "version": "2.0.0-dev.3",
+    "description": "Nightshade UI CSS",
+    "author": "Boris Okunskiy",
+    "license": "ISC",
+    "sideEffects": false,
+    "exports": {
+        ".": "./index.css"
+    }
+}

package/transitions/fade-directional.css

@@ -0,0 +1,29 @@
+.fade-left-enter-active, .fade-left-leave-active,
+.fade-right-enter-active, .fade-right-leave-active,
+.fade-top-enter-active, .fade-top-leave-active,
+.fade-bottom-enter-active, .fade-bottom-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-left-enter-from, .fade-left-leave-to,
+.fade-right-enter-from, .fade-right-leave-to,
+.fade-top-enter-from, .fade-top-leave-to,
+.fade-bottom-enter-from , .fade-bottom-leave-to {
+    opacity: 0;
+}
+
+.fade-left-enter-from, .fade-left-leave-to {
+    transform: translate(16px, 0);
+}
+
+.fade-right-enter-from, .fade-right-leave-to {
+    transform: translate(-16px, 0);
+}
+
+.fade-top-enter-from, .fade-top-leave-to {
+    transform: translate(0, 16px);
+}
+
+.fade-bottom-enter-from, .fade-bottom-leave-to {
+    transform: translate(0, -16px);
+}

package/transitions/fade-scale.css

@@ -0,0 +1,14 @@
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+    transition: opacity .5s, transform .5s;
+}
+
+.fade-scale-enter-from {
+    transform: scale(.75);
+    opacity: 0;
+}
+
+.fade-scale-leave-to {
+    transform: scale(1.25);
+    opacity: 0;
+}

package/transitions/fade-shove.css

@@ -0,0 +1,13 @@
+.fade-shove-enter-active,
+.fade-shove-leave-active {
+    transition: opacity .3s, transform .3s;
+}
+
+.fade-shove-enter-from {
+    opacity: 0;
+}
+
+.fade-shove-leave-to {
+    transform: translate(16px, -16px) scale(.95);
+    opacity: 0;
+}

package/transitions/fade-squash.css

@@ -0,0 +1,10 @@
+.fade-squash-enter-active,
+.fade-squash-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-squash-enter-from,
+.fade-squash-leave-to {
+    transform: scale(10, .1);
+    opacity: 0;
+}

package/transitions/fade-swipe.css

@@ -0,0 +1,14 @@
+.fade-swipe-enter-active,
+.fade-swipe-leave-active {
+    transition: opacity .25s, transform .25s;
+}
+
+.fade-swipe-enter-from {
+    transform: translate(-96px, -32px);
+    opacity: 0;
+}
+
+.fade-swipe-leave-to {
+    transform: translate(96px, -32px);
+    opacity: 0;
+}

package/transitions/fade.css

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}

package/util.css

@@ -0,0 +1,36 @@
+.color-primary { color: var(--color-primary-500); }
+.color-secondary { color: var(--color-secondary-500); }
+.color-tertiary { color: var(--color-tertiary-500); }
+.color-success { color: var(--color-success-500); }
+.color-warning { color: var(--color-warning-500); }
+.color-danger { color: var(--color-danger-500); }
+
+.color-subtle { color: var(--color-base-700); }
+.color-sublime { color: var(--color-base-500); }
+
+.flex-1 { flex: 1 }
+.flex-2 { flex: 2 }
+.flex-3 { flex: 3 }
+.flex-4 { flex: 4 }
+.flex-5 { flex: 5 }
+.flex-6 { flex: 6 }
+.flex-7 { flex: 7 }
+.flex-8 { flex: 8 }
+.flex-9 { flex: 9 }
+.flex-10 { flex: 10 }
+.flex-11 { flex: 11 }
+.flex-12 { flex: 12 }
+
+.text-xxs { font-size: var(--font-size-xxs) }
+.text-xs { font-size: var(--font-size-xs) }
+.text-s { font-size: var(--font-size-s) }
+.text-l { font-size: var(--font-size-l) }
+.text-xl { font-size: var(--font-size-xl) }
+.text-xxl { font-size: var(--font-size-xxl) }
+.text-xxxl { font-size: var(--font-size-xxxl) }
+
+.nowrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/variables/base.css

@@ -0,0 +1,25 @@
+:root {
+
+    --text-color: var(--color-base-900);
+    --base-color: var(--color-base-0);
+
+    /* Border radius */
+
+    --border-radius: var(--border-radius-s);
+
+    --border-radius-none: 0;
+    --border-radius-xxs: var(--sp-xxs);
+    --border-radius-xs: var(--sp-xs);
+    --border-radius-s: var(--sp-s);
+    --border-radius-m: var(--sp-m);
+    --border-radius-l: var(--sp-l);
+    --border-radius-xl: var(--sp-xl);
+    --border-radius-xxl: var(--sp-xxl);
+
+    /* Shadows */
+
+    --shadow-color-light: light-dark(rgba(0,0,0,.16), rgba(0,0,0,.5));
+    --shadow-color-medium: light-dark(rgba(0,0,0,.32), rgba(0,0,0,.75));
+    --shadow-color-heavy: light-dark(rgba(0,0,0,.64), rgba(0,0,0,.9));
+
+}

package/variables/font.css

@@ -0,0 +1,22 @@
+:root {
+    --font-main: sans-serif;
+    --font-alt: var(--font-main);
+    --font-monospace: monospace;
+
+    --font-size: var(--font-size-m);
+    --font-size-xxs: 10px;
+    --font-size-xs: 12px;
+    --font-size-s: 14px;
+    --font-size-m: 16px;
+    --font-size-l: 18px;
+    --font-size-xl: 24px;
+    --font-size-xxl: 48px;
+    --font-size-xxxl: 64px;
+
+    --font-weight: var(--font-weight-normal);
+    --font-weight-normal: 400;
+    --font-weight-light: 300;
+    --font-weight-bold: 500;
+
+    --line-height: 1.5;
+}

package/variables/grid.css

@@ -0,0 +1,18 @@
+:root {
+
+    /* 12-column grid */
+
+    --gr1: calc(100% / 12);
+    --gr2: calc(2 * 100% / 12);
+    --gr3: calc(3 * 100% / 12);
+    --gr4: calc(4 * 100% / 12);
+    --gr5: calc(5 * 100% / 12);
+    --gr6: calc(6 * 100% / 12);
+    --gr7: calc(7 * 100% / 12);
+    --gr8: calc(8 * 100% / 12);
+    --gr9: calc(9 * 100% / 12);
+    --gr10: calc(10 * 100% / 12);
+    --gr11: calc(11 * 100% / 12);
+    --gr12: 100%;
+
+}

package/variables/input.css

@@ -0,0 +1,13 @@
+:root {
+    --input-size: var(--input-size-m);
+    --input-size-xs: var(--sp2);
+    --input-size-s: var(--sp3);
+    --input-size-m: var(--sp4);
+    --input-size-l: var(--sp5);
+    --input-size-xl: var(--sp6);
+
+    --input-border-size: 1px;
+    --input-outline-size: 2px;
+    --input-outline-offset: 0;
+    --input-z: 0;
+}

package/variables/palette.css

@@ -0,0 +1,107 @@
+:root {
+
+    --color-base-light-0: hsl(280deg, 5%, 100%);
+    --color-base-light-100: hsl(280deg, 5%, 96%);
+    --color-base-light-200: hsl(280deg, 5%, 92%);
+    --color-base-light-300: hsl(280deg, 5%, 88%);
+    --color-base-light-400: hsl(280deg, 5%, 80%);
+    --color-base-light-500: hsl(280deg, 5%, 75%);
+    --color-base-light-600: hsl(280deg, 5%, 64%);
+    --color-base-light-700: hsl(280deg, 5%, 48%);
+    --color-base-light-800: hsl(280deg, 5%, 32%);
+    --color-base-light-900: hsl(280deg, 5%, 16%);
+
+    --color-base-dark-0: hsl(280deg, 5%, 16%);
+    --color-base-dark-100: hsl(280deg, 5%, 24%);
+    --color-base-dark-200: hsl(280deg, 5%, 27%);
+    --color-base-dark-300: hsl(280deg, 5%, 32%);
+    --color-base-dark-400: hsl(280deg, 5%, 36%);
+    --color-base-dark-500: hsl(280deg, 5%, 44%);
+    --color-base-dark-600: hsl(280deg, 5%, 50%);
+    --color-base-dark-700: hsl(280deg, 5%, 72%);
+    --color-base-dark-800: hsl(280deg, 5%, 88%);
+    --color-base-dark-900: hsl(280deg, 5%, 92%);
+
+    --color-base-0: light-dark(var(--color-base-light-0), var(--color-base-dark-0));
+    --color-base-100: light-dark(var(--color-base-light-100), var(--color-base-dark-100));
+    --color-base-200: light-dark(var(--color-base-light-200), var(--color-base-dark-200));
+    --color-base-300: light-dark(var(--color-base-light-300), var(--color-base-dark-300));
+    --color-base-400: light-dark(var(--color-base-light-400), var(--color-base-dark-400));
+    --color-base-500: light-dark(var(--color-base-light-500), var(--color-base-dark-500));
+    --color-base-600: light-dark(var(--color-base-light-600), var(--color-base-dark-600));
+    --color-base-700: light-dark(var(--color-base-light-700), var(--color-base-dark-700));
+    --color-base-800: light-dark(var(--color-base-light-800), var(--color-base-dark-800));
+    --color-base-900: light-dark(var(--color-base-light-900), var(--color-base-dark-900));
+
+    --color-inverse-0: light-dark(var(--color-base-dark-0), var(--color-base-light-0));
+    --color-inverse-100: light-dark(var(--color-base-dark-100), var(--color-base-light-100));
+    --color-inverse-200: light-dark(var(--color-base-dark-200), var(--color-base-light-200));
+    --color-inverse-300: light-dark(var(--color-base-dark-300), var(--color-base-light-300));
+    --color-inverse-400: light-dark(var(--color-base-dark-400), var(--color-base-light-400));
+    --color-inverse-500: light-dark(var(--color-base-dark-500), var(--color-base-light-500));
+    --color-inverse-600: light-dark(var(--color-base-dark-600), var(--color-base-light-600));
+    --color-inverse-700: light-dark(var(--color-base-dark-700), var(--color-base-light-700));
+    --color-inverse-800: light-dark(var(--color-base-dark-800), var(--color-base-light-800));
+    --color-inverse-900: light-dark(var(--color-base-dark-900), var(--color-base-light-900));
+
+    --color-primary-100: hsl(310deg, 25%, 92%);
+    --color-primary-200: hsl(310deg, 25%, 88%);
+    --color-primary-300: hsl(310deg, 25%, 75%);
+    --color-primary-400: hsl(310deg, 25%, 64%);
+    --color-primary-500: hsl(310deg, 25%, 50%);
+    --color-primary-600: hsl(310deg, 25%, 44%);
+    --color-primary-700: hsl(310deg, 25%, 36%);
+    --color-primary-800: hsl(310deg, 25%, 28%);
+    --color-primary-900: hsl(310deg, 25%, 16%);
+
+    --color-secondary-100: hsl(176deg, 25%, 92%);
+    --color-secondary-200: hsl(176deg, 25%, 88%);
+    --color-secondary-300: hsl(176deg, 25%, 75%);
+    --color-secondary-400: hsl(176deg, 25%, 64%);
+    --color-secondary-500: hsl(176deg, 25%, 50%);
+    --color-secondary-600: hsl(176deg, 25%, 44%);
+    --color-secondary-700: hsl(176deg, 25%, 36%);
+    --color-secondary-800: hsl(176deg, 25%, 28%);
+    --color-secondary-900: hsl(176deg, 25%, 16%);
+
+    --color-tertiary-100: hsl(8deg, 12%, 92%);
+    --color-tertiary-200: hsl(8deg, 12%, 88%);
+    --color-tertiary-300: hsl(8deg, 12%, 75%);
+    --color-tertiary-400: hsl(8deg, 12%, 64%);
+    --color-tertiary-500: hsl(8deg, 12%, 50%);
+    --color-tertiary-600: hsl(8deg, 12%, 44%);
+    --color-tertiary-700: hsl(8deg, 12%, 36%);
+    --color-tertiary-800: hsl(8deg, 12%, 28%);
+    --color-tertiary-900: hsl(8deg, 12%, 16%);
+
+    --color-success-100: hsl(112deg, 36%, 92%);
+    --color-success-200: hsl(112deg, 36%, 88%);
+    --color-success-300: hsl(112deg, 36%, 75%);
+    --color-success-400: hsl(112deg, 36%, 64%);
+    --color-success-500: hsl(112deg, 36%, 50%);
+    --color-success-600: hsl(112deg, 36%, 44%);
+    --color-success-700: hsl(112deg, 36%, 36%);
+    --color-success-800: hsl(112deg, 36%, 28%);
+    --color-success-900: hsl(112deg, 36%, 16%);
+
+    --color-warning-100: hsl(40deg, 90%, 92%);
+    --color-warning-200: hsl(40deg, 90%, 88%);
+    --color-warning-300: hsl(40deg, 90%, 75%);
+    --color-warning-400: hsl(40deg, 90%, 64%);
+    --color-warning-500: hsl(40deg, 90%, 50%);
+    --color-warning-600: hsl(40deg, 90%, 44%);
+    --color-warning-700: hsl(40deg, 90%, 36%);
+    --color-warning-800: hsl(40deg, 90%, 28%);
+    --color-warning-900: hsl(40deg, 90%, 16%);
+
+    --color-danger-100: hsl(352deg, 64%, 92%);
+    --color-danger-200: hsl(352deg, 64%, 88%);
+    --color-danger-300: hsl(352deg, 64%, 75%);
+    --color-danger-400: hsl(352deg, 64%, 64%);
+    --color-danger-500: hsl(352deg, 64%, 50%);
+    --color-danger-600: hsl(352deg, 64%, 44%);
+    --color-danger-700: hsl(352deg, 64%, 36%);
+    --color-danger-800: hsl(352deg, 64%, 28%);
+    --color-danger-900: hsl(352deg, 64%, 16%);
+
+}

package/variables/spacing.css

@@ -0,0 +1,35 @@
+:root {
+
+    /* Fixed spacing */
+
+    --sp: 8px;
+    --sp0-25: calc(0.25 * var(--sp));
+    --sp0-5: calc(0.5 * var(--sp));
+    --sphalf: var(--sp0-5);
+    --sp1: var(--sp);
+    --sp1-5: calc(1.5 * var(--sp));
+    --sp2: calc(2 * var(--sp));
+    --sp2-5: calc(2.5 * var(--sp));
+    --sp3: calc(3 * var(--sp));
+    --sp4: calc(4 * var(--sp));
+    --sp5: calc(5 * var(--sp));
+    --sp6: calc(6 * var(--sp));
+    --sp7: calc(7 * var(--sp));
+    --sp8: calc(8 * var(--sp));
+    --sp9: calc(9 * var(--sp));
+    --sp10: calc(10 * var(--sp));
+    --sp12: calc(12 * var(--sp));
+    --sp16: calc(16 * var(--sp));
+    --sp24: calc(24 * var(--sp));
+    --sp32: calc(32 * var(--sp));
+
+    /* Semantic fixed spacing */
+
+    --sp-xxs: var(--sp0-25);
+    --sp-xs: var(--sp0-5);
+    --sp-s: var(--sp1);
+    --sp-m: var(--sp2);
+    --sp-l: var(--sp4);
+    --sp-xl: var(--sp8);
+    --sp-xxl: var(--sp16);
+}