@adamjanicki/ui 1.5.6 → 1.5.7

package/style.css

@@ -1,287 +1,295 @@
 /* General styles */
 :root {
+  /* Sizing */
+  --aui-xxs: 1px;
+  --aui-xs: 2px;
+  --aui-s: 4px;
+  --aui-m: 8px;
+  --aui-l: 16px;
+  --aui-xl: 32px;
+  --aui-xxl: 64px;
   /* General colors */
-  --ajui-moon-gray: #ccc;
-  --ajui-dark-gray: #555;
-  --ajui-darkest-gray: #333;
-  --ajui-obsidian: #121212;
-  --ajui-focus-ring-color: #b2dbfa;
-  --ajui-default-text-color: #111;
-  --ajui-default-background: white;
-  --ajui-default-border: var(--ajui-moon-gray);
+  --aui-moon-gray: #ccc;
+  --aui-dark-gray: #555;
+  --aui-darkest-gray: #333;
+  --aui-obsidian: #121212;
+  --aui-focus-ring-color: #b2dbfa;
+  --aui-default-text-color: black;
+  --aui-default-background: white;
+  --aui-default-border: var(--aui-moon-gray);
   /* General values */
-  --ajui-disabled-opacity: 0.5;
-  --ajui-default-transition: 0.25s ease-in-out;
-  --ajui-default-opacity-dim: 0.75;
+  --aui-disabled-opacity: 0.5;
+  --aui-default-transition: 0.25s ease-in-out;
+  --aui-default-opacity-dim: 0.75;
   /* Corners */
-  --ajui-sharp-radius: 0;
-  --ajui-rounded-radius: 8px;
-  --ajui-pill-radius: 9999px;
+  --aui-sharp-radius: 0;
+  --aui-rounded-radius: 8px;
+  --aui-pill-radius: 9999px;
   /* Buttons */
-  --ajui-button-primary-background: black;
-  --ajui-button-primary-color: white;
-  --ajui-button-secondary-border-hover: var(--ajui-darkest-gray);
+  --aui-button-primary-background: black;
+  --aui-button-primary-color: white;
+  --aui-button-secondary-border-hover: var(--aui-darkest-gray);
+  --aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
+  --aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
   /* Content types */
-  --ajui-success-background: #dff2e1;
-  --ajui-success-color: #1b5e20;
-  --ajui-success-border: #b2dfb1;
+  --aui-success-background: #dff2e1;
+  --aui-success-color: #1b5e20;
+  --aui-success-border: #b2dfb1;
 
-  --ajui-warning-background: #fceeb6;
-  --ajui-warning-color: #b23904;
-  --ajui-warning-border: #e6d5a2;
+  --aui-warning-background: #fceeb6;
+  --aui-warning-color: #b23904;
+  --aui-warning-border: #e6d5a2;
 
-  --ajui-error-background: #fdecea;
-  --ajui-error-color: #b71c1c;
-  --ajui-error-border: #f5b7b7;
+  --aui-error-background: #fdecea;
+  --aui-error-color: #b71c1c;
+  --aui-error-border: #f5b7b7;
 
-  --ajui-info-background: #e3f2fd;
-  --ajui-info-color: #0d47a1;
-  --ajui-info-border: #90caf9;
+  --aui-info-background: #e3f2fd;
+  --aui-info-color: #0d47a1;
+  --aui-info-border: #90caf9;
 
-  --ajui-static-background: #e8e8e8;
+  --aui-static-background: #e8e8e8;
   /* Layer */
-  --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
+  --aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
-  --ajui-link-color: #0070ff;
+  --aui-link-color: #0070ff;
 }
 
 [data-theme="dark"] {
   /* General colors */
-  --ajui-focus-ring-color: #6699cc;
-  --ajui-default-text-color: white;
-  --ajui-default-background: var(--ajui-obsidian);
-  --ajui-default-border: var(--ajui-dark-gray);
+  --aui-focus-ring-color: #6699cc;
+  --aui-default-text-color: white;
+  --aui-default-background: var(--aui-obsidian);
+  --aui-default-border: var(--aui-dark-gray);
   /* Buttons */
-  --ajui-button-primary-background: white;
-  --ajui-button-primary-color: var(--ajui-obsidian);
-  --ajui-button-secondary-border-hover: var(--ajui-moon-gray);
+  --aui-button-primary-background: white;
+  --aui-button-primary-color: var(--aui-obsidian);
+  --aui-button-secondary-border-hover: var(--aui-moon-gray);
+  --aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);
   /* Content types */
-  --ajui-success-background: #2a5733;
-  --ajui-success-color: #d9efd8;
-  --ajui-success-border: #439e4a;
+  --aui-success-background: #2a5733;
+  --aui-success-color: #d9efd8;
+  --aui-success-border: #439e4a;
 
-  --ajui-warning-background: #736230;
-  --ajui-warning-color: #fff6d1;
-  --ajui-warning-border: #927a3b;
+  --aui-warning-background: #736230;
+  --aui-warning-color: #fff6d1;
+  --aui-warning-border: #927a3b;
 
-  --ajui-error-background: #663232;
-  --ajui-error-color: #f9dadc;
-  --ajui-error-border: #8d2a2a;
+  --aui-error-background: #663232;
+  --aui-error-color: #f9dadc;
+  --aui-error-border: #8d2a2a;
 
-  --ajui-info-background: #335f72;
-  --ajui-info-color: #d4f1f5;
-  --ajui-info-border: #1d8ea4;
+  --aui-info-background: #335f72;
+  --aui-info-color: #d4f1f5;
+  --aui-info-border: #1d8ea4;
 
-  --ajui-static-background: var(--ajui-darkest-gray);
+  --aui-static-background: var(--aui-darkest-gray);
   /* Layer */
-  --ajui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
+  --aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
-  --ajui-link-color: #009ef3;
+  --aui-link-color: #33bfff;
 }
 
-.ajui-input-default:not([disabled]):focus-within,
-.ajui-select-container:not([disabled]):focus-within {
-  outline: 3px solid var(--ajui-focus-ring-color);
-  outline-offset: 0;
+/* General */
+.aui-corners--rounded {
+  border-radius: var(--aui-rounded-radius);
 }
 
-.ajui-corners--rounded {
-  border-radius: var(--ajui-rounded-radius);
+.aui-corners--pill {
+  border-radius: var(--aui-pill-radius);
 }
 
-.ajui-corners--pill {
-  border-radius: var(--ajui-pill-radius);
+.aui-corners--sharp {
+  border-radius: var(--aui-sharp-radius);
 }
 
-.ajui-corners--sharp {
-  border-radius: var(--ajui-sharp-radius);
+.aui-content--success {
+  background-color: var(--aui-success-background);
+  color: var(--aui-success-color);
+  border-color: var(--aui-success-border);
 }
 
-.ajui-content--success {
-  background-color: var(--ajui-success-background);
-  color: var(--ajui-success-color);
-  border-color: var(--ajui-success-border);
+.aui-content--warning {
+  background-color: var(--aui-warning-background);
+  color: var(--aui-warning-color);
+  border-color: var(--aui-warning-border);
 }
 
-.ajui-content--warning {
-  background-color: var(--ajui-warning-background);
-  color: var(--ajui-warning-color);
-  border-color: var(--ajui-warning-border);
+.aui-content--error {
+  background-color: var(--aui-error-background);
+  color: var(--aui-error-color);
+  border-color: var(--aui-error-border);
 }
 
-.ajui-content--error {
-  background-color: var(--ajui-error-background);
-  color: var(--ajui-error-color);
-  border-color: var(--ajui-error-border);
+.aui-content--info {
+  background-color: var(--aui-info-background);
+  color: var(--aui-info-color);
+  border-color: var(--aui-info-border);
 }
 
-.ajui-content--info {
-  background-color: var(--ajui-info-background);
-  color: var(--ajui-info-color);
-  border-color: var(--ajui-info-border);
-}
-
-.ajui-content--static {
-  background-color: var(--ajui-static-background);
-  color: var(--ajui-default-text-color);
-  border-color: var(--ajui-default-border);
+.aui-content--static {
+  background-color: var(--aui-static-background);
+  color: var(--aui-default-text-color);
+  border-color: var(--aui-default-border);
 }
 
 /* Alert */
-.ajui-alert {
-  padding: 16px;
+.aui-alert {
+  padding: var(--aui-l);
   border-style: solid;
   border-width: 1px;
   font-weight: 400;
 }
 
 /* Badge */
-.ajui-badge {
+.aui-badge {
   padding: 2px 6px;
   border-style: solid;
   border-width: 1px;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   width: fit-content;
 }
 
 /* Banner */
-.ajui-banner {
-  padding: 24px 32px;
+.aui-banner {
+  padding: 24px var(--aui-xl);
   border: none;
   font-weight: 400;
   width: 100%;
 }
 
 /* Action (link/button) */
-.ajui-action {
+.aui-action {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
-  outline-color: var(--ajui-link-color);
+  outline-color: var(--aui-link-color);
 }
 
-.ajui-action:focus:not(:focus-visible) {
+.aui-action:focus:not(:focus-visible) {
   outline: none;
 }
 
 /* Button */
-.ajui-button-base {
+.aui-button-base {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
-  font-size: 16px;
 }
 
-.ajui-button-size--regular {
-  padding: 8px 16px;
+.aui-button-size--regular {
+  padding: var(--aui-m);
   font-weight: 600;
 }
 
-.ajui-button-size--small {
-  padding: 4px 6px;
+.aui-button-size--small {
+  padding: var(--aui-s);
   font-size: 12px;
   font-weight: 600;
 }
 
-.ajui-icon-button {
+.aui-icon-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: opacity var(--ajui-default-transition);
-  padding: 4px;
+  transition: opacity var(--aui-default-transition);
+  padding: var(--aui-m);
 }
 
-.ajui-button-base:disabled {
+.aui-button-base:disabled {
   cursor: default !important;
-  opacity: var(--ajui-disabled-opacity);
+  opacity: var(--aui-disabled-opacity);
 }
 
-.ajui-button--primary {
-  background-color: var(--ajui-button-primary-background);
-  color: var(--ajui-button-primary-color);
-  transition: opacity var(--ajui-default-transition);
+.aui-button--primary {
+  background-color: var(--aui-button-primary-background);
+  color: var(--aui-button-primary-color);
+  box-shadow: var(--aui-button-primary-box-shadow);
+  transition: opacity var(--aui-default-transition);
 }
 
-.ajui-button--secondary {
-  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
-  transition: box-shadow var(--ajui-default-transition);
+.aui-button--secondary {
+  background-color: var(--aui-default-background);
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-subtle-box-shadow);
+  transition: box-shadow var(--aui-default-transition);
 }
 
-.ajui-button--secondary {
-  background-color: var(--ajui-default-background);
-}
-
-.ajui-link-default {
+.aui-link-default {
   font-weight: 600;
-  color: var(--ajui-link-color);
-  transition: opacity var(--ajui-default-transition);
+  color: var(--aui-link-color);
+  transition: opacity var(--aui-default-transition);
 }
 
 @media (hover: hover) {
-  .ajui-button--primary:not([disabled]):hover,
-  .ajui-icon-button:not([disabled]):hover,
-  .ajui-link-default:hover {
-    opacity: var(--ajui-default-opacity-dim);
+  .aui-button--primary:not([disabled]):hover,
+  .aui-icon-button:not([disabled]):hover,
+  .aui-link-default:hover {
+    opacity: var(--aui-default-opacity-dim);
   }
 
-  .ajui-button--secondary:not([disabled]):hover {
-    box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border-hover);
+  .aui-button--secondary:not([disabled]):hover {
+    box-shadow: 0 0 0 1px var(--aui-button-secondary-border-hover) inset,
+      var(--aui-subtle-box-shadow);
   }
 }
 
 /* Input */
-.ajui-input-base {
-  outline: 0px solid transparent;
+.aui-input-base {
+  outline: none;
   border: none;
   background-color: inherit;
   color: inherit;
-  padding: 12px 8px;
-  font-size: 16px;
+  padding: var(--aui-m);
   font-weight: 400;
 }
 
-.ajui-input-base::selection {
-  background-color: var(--ajui-focus-ring-color);
+.aui-input-base::selection {
+  background-color: var(--aui-focus-ring-color);
 }
 
-.ajui-icon-input {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
+.aui-icon-input {
   overflow: scroll;
 }
 
-.ajui-icon-input input {
+.aui-icon-input input {
   background-color: transparent;
   width: 100%;
 }
 
-.ajui-input-default {
-  transition: outline var(--ajui-default-transition);
-  outline: 0px solid transparent;
-  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
-  background-color: var(--ajui-default-background);
+.aui-input-default {
+  transition: box-shadow var(--aui-default-transition);
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-subtle-box-shadow);
+  background-color: var(--aui-default-background);
 }
 
-.ajui-input-default:disabled {
-  opacity: var(--ajui-disabled-opacity);
+.aui-input-default:disabled {
+  opacity: var(--aui-disabled-opacity);
   cursor: default;
 }
 
+.aui-input-default:not([disabled]):focus-within,
+.aui-select-container:not([disabled]):focus-within {
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-subtle-box-shadow), 0 0 0 3px var(--aui-focus-ring-color);
+}
+
 /* Select */
-.ajui-select-container {
+.aui-select-container {
   position: relative;
   padding: 0;
   width: fit-content;
-  transition: outline var(--ajui-default-transition);
-  outline: 0px solid transparent;
-  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
-  background-color: var(--ajui-default-background);
+  transition: box-shadow var(--aui-default-transition);
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-subtle-box-shadow);
+  background-color: var(--aui-default-background);
 }
 
-.ajui-select-base {
+.aui-select-base {
   width: 100%;
   color: inherit;
   border: none;
@@ -289,20 +297,19 @@
   box-shadow: none;
   cursor: pointer;
   background-color: transparent;
-  padding: 12px 28px 12px 8px;
-  font-size: 16px;
-  font-weight: 400;
+  padding: var(--aui-m) 28px var(--aui-m) var(--aui-m);
+  font-weight: 600;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
-.ajui-select-disabled * {
-  opacity: var(--ajui-disabled-opacity);
+.aui-select-disabled * {
+  opacity: var(--aui-disabled-opacity);
   cursor: default;
 }
 
-.ajui-select-triangle {
+.aui-select-triangle {
   --size: 12px;
   width: var(--size);
   height: var(--size);
@@ -314,27 +321,24 @@
 }
 
 /* Layer */
-.ajui-layer-backdrop {
+.aui-layer-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 10000;
-  background: var(--ajui-layer-backdrop-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  background: var(--aui-layer-backdrop-background);
 }
 
 /* Spinner */
-.ajui-spinner {
-  animation: ajui-spinner-animation 1s linear infinite;
+.aui-spinner {
+  animation: aui-spinner-animation 1s linear infinite;
   transform-origin: center;
   height: 24px;
 }
 
-@keyframes ajui-spinner-animation {
+@keyframes aui-spinner-animation {
   0% {
     transform: rotate(0deg);
   }
@@ -343,50 +347,29 @@
   }
 }
 
-/* Inline Code */
-.ajui-inline-code {
-  background-color: var(--ajui-default-border);
-  color: var(--ajui-default-text-color);
-  border-radius: var(--ajui-rounded-radius);
-  transition: background-color var(--ajui-default-transition);
-  word-wrap: break-word;
-}
-
-.ajui-copy-cursor {
-  cursor: copy;
-}
-
-.ajui-inline-code-copied {
-  background-color: var(--ajui-success-background);
-}
-
 /* Carousel */
-.ajui-carousel {
+.aui-carousel {
   max-width: 100%;
   position: relative;
   overflow: hidden;
-  min-height: 64px;
-  min-width: 64px;
+  min-height: var(--aui-xxl);
+  min-width: var(--aui-xxl);
   width: fit-content;
 }
 
-.ajui-carousel-slider {
+.aui-carousel-slider {
   width: 100%;
   height: 100%;
   display: flex;
 }
 
-.ajui-carousel-item {
+.aui-carousel-item {
   flex: 0 0 100%;
   width: 100%;
   height: 100%;
 }
 
-.ajui-carousel-arrow-prev,
-.ajui-carousel-arrow-next {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.aui-carousel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -396,25 +379,161 @@
   font-weight: 800;
 }
 
-.ajui-carousel-arrow-prev {
-  left: 8px;
+.aui-carousel-dots {
+  position: absolute;
+  bottom: var(--aui-m);
+  transform: translateX(-50%);
+  left: 50%;
 }
-.ajui-carousel-arrow-next {
-  right: 8px;
+
+.aui-carousel-dot {
+  width: var(--aui-l);
+  height: var(--aui-m);
+  padding: 0;
 }
 
-.ajui-carousel-dots {
-  position: absolute;
+/* Layout */
+.aui-flex-x,
+.aui-flex-y {
   display: flex;
+  max-width: 100%;
+}
+
+.aui-flex-x {
+  flex-direction: row;
+}
+
+.aui-flex-y {
+  flex-direction: column;
+}
+
+.aui-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.aui-align-start {
+  align-items: flex-start;
+}
+
+.aui-align-center {
   align-items: center;
-  bottom: 8px;
-  transform: translateX(-50%);
-  left: 50%;
 }
 
-.ajui-carousel-dot {
-  width: 16px;
-  height: 8px;
+.aui-align-end {
+  align-items: flex-end;
+}
+
+.aui-justify-start {
+  justify-content: flex-start;
+}
+
+.aui-justify-center {
+  justify-content: center;
+}
+
+.aui-justify-between {
+  justify-content: space-between;
+}
+
+.aui-justify-end {
+  justify-content: flex-end;
+}
+
+/* Gap */
+.aui-gap-none {
+  gap: 0;
+}
+
+.aui-gap-xxs {
+  gap: var(--aui-xxs);
+}
+
+.aui-gap-xs {
+  gap: var(--aui-xs);
+}
+
+.aui-gap-s {
+  gap: var(--aui-s);
+}
+
+.aui-gap-m {
+  gap: var(--aui-m);
+}
+
+.aui-gap-l {
+  gap: var(--aui-l);
+}
+
+.aui-gap-xl {
+  gap: var(--aui-xl);
+}
+
+.aui-gap-xxl {
+  gap: var(--aui-xxl);
+}
+
+/* Padding */
+.aui-pa-none {
   padding: 0;
-  margin: 0 2px;
+}
+
+.aui-pa-xxs {
+  padding: var(--aui-xxs);
+}
+
+.aui-pa-xs {
+  padding: var(--aui-xs);
+}
+
+.aui-pa-s {
+  padding: var(--aui-s);
+}
+
+.aui-pa-m {
+  padding: var(--aui-m);
+}
+
+.aui-pa-l {
+  padding: var(--aui-l);
+}
+
+.aui-pa-xl {
+  padding: var(--aui-xl);
+}
+
+.aui-pa-xxl {
+  padding: var(--aui-xxl);
+}
+
+/* Margin */
+.aui-ma-none {
+  margin: 0;
+}
+
+.aui-ma-xxs {
+  margin: var(--aui-xxs);
+}
+
+.aui-ma-xs {
+  margin: var(--aui-xs);
+}
+
+.aui-ma-s {
+  margin: var(--aui-s);
+}
+
+.aui-ma-m {
+  margin: var(--aui-m);
+}
+
+.aui-ma-l {
+  margin: var(--aui-l);
+}
+
+.aui-ma-xl {
+  margin: var(--aui-xl);
+}
+
+.aui-ma-xxl {
+  margin: var(--aui-xxl);
 }