@adamjanicki/ui 1.5.4 → 1.5.6

package/style.css

@@ -1,13 +1,12 @@
 /* General styles */
 :root {
   /* General colors */
-  --ajui-light-gray: #eee;
   --ajui-moon-gray: #ccc;
   --ajui-dark-gray: #555;
   --ajui-darkest-gray: #333;
   --ajui-obsidian: #121212;
   --ajui-focus-ring-color: #b2dbfa;
-  --ajui-default-color: #111;
+  --ajui-default-text-color: #111;
   --ajui-default-background: white;
   --ajui-default-border: var(--ajui-moon-gray);
   /* General values */
@@ -16,22 +15,12 @@
   --ajui-default-opacity-dim: 0.75;
   /* Corners */
   --ajui-sharp-radius: 0;
-  --ajui-rounded-radius: 0.5rem;
+  --ajui-rounded-radius: 8px;
   --ajui-pill-radius: 9999px;
-  --ajui-circle-radius: 50%;
   /* Buttons */
   --ajui-button-primary-background: black;
   --ajui-button-primary-color: white;
-  --ajui-button-secondary-background: white;
-  --ajui-button-secondary-color: #111;
-  --ajui-button-secondary-border: var(--ajui-moon-gray);
-  --ajui-button-transparent-background: transparent;
   --ajui-button-secondary-border-hover: var(--ajui-darkest-gray);
-  /* Input */
-  --ajui-input-selection-color: var(--ajui-focus-ring-color);
-  --ajui-input-border: var(--ajui-default-border);
-  /* Select */
-  --ajui-select-border: var(--ajui-moon-gray);
   /* Content types */
   --ajui-success-background: #dff2e1;
   --ajui-success-color: #1b5e20;
@@ -50,8 +39,6 @@
   --ajui-info-border: #90caf9;
 
   --ajui-static-background: #e8e8e8;
-  --ajui-static-color: var(--ajui-default-color);
-  --ajui-static-border: var(--ajui-default-border);
   /* Layer */
   --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
@@ -61,22 +48,13 @@
 [data-theme="dark"] {
   /* General colors */
   --ajui-focus-ring-color: #6699cc;
-  --ajui-default-color: white;
+  --ajui-default-text-color: white;
   --ajui-default-background: var(--ajui-obsidian);
   --ajui-default-border: var(--ajui-dark-gray);
   /* Buttons */
   --ajui-button-primary-background: white;
   --ajui-button-primary-color: var(--ajui-obsidian);
-  --ajui-button-secondary-background: var(--ajui-obsidian);
-  --ajui-button-secondary-color: white;
-  --ajui-button-secondary-border: var(--ajui-dark-gray);
-  --ajui-button-transparent-background: transparent;
   --ajui-button-secondary-border-hover: var(--ajui-moon-gray);
-  /* Input */
-  --ajui-input-selection-color: var(--ajui-focus-ring-color);
-  --ajui-input-border: var(--ajui-dark-gray);
-  /* Select */
-  --ajui-select-border: var(--ajui-dark-gray);
   /* Content types */
   --ajui-success-background: #2a5733;
   --ajui-success-color: #d9efd8;
@@ -95,74 +73,63 @@
   --ajui-info-border: #1d8ea4;
 
   --ajui-static-background: var(--ajui-darkest-gray);
-  --ajui-static-color: var(--ajui-default-color);
-  --ajui-static-border: var(--ajui-default-border);
   /* Layer */
   --ajui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
   --ajui-link-color: #009ef3;
 }
 
-a:focus:not(:focus-visible) {
-  outline: none;
-}
-
-a,
-button {
-  outline-color: var(--ajui-link-color);
-}
-
 .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;
 }
 
-.corners--rounded {
+.ajui-corners--rounded {
   border-radius: var(--ajui-rounded-radius);
 }
 
-.corners--pill {
+.ajui-corners--pill {
   border-radius: var(--ajui-pill-radius);
 }
 
-.corners--sharp {
+.ajui-corners--sharp {
   border-radius: var(--ajui-sharp-radius);
 }
 
-.content--success {
+.ajui-content--success {
   background-color: var(--ajui-success-background);
   color: var(--ajui-success-color);
   border-color: var(--ajui-success-border);
 }
 
-.content--warning {
+.ajui-content--warning {
   background-color: var(--ajui-warning-background);
   color: var(--ajui-warning-color);
   border-color: var(--ajui-warning-border);
 }
 
-.content--error {
+.ajui-content--error {
   background-color: var(--ajui-error-background);
   color: var(--ajui-error-color);
   border-color: var(--ajui-error-border);
 }
 
-.content--info {
+.ajui-content--info {
   background-color: var(--ajui-info-background);
   color: var(--ajui-info-color);
   border-color: var(--ajui-info-border);
 }
 
-.content--static {
+.ajui-content--static {
   background-color: var(--ajui-static-background);
-  color: var(--ajui-static-color);
-  border-color: var(--ajui-static-border);
+  color: var(--ajui-default-text-color);
+  border-color: var(--ajui-default-border);
 }
 
 /* Alert */
 .ajui-alert {
-  padding: 1rem;
+  padding: 16px;
   border-style: solid;
   border-width: 1px;
   font-weight: 400;
@@ -180,17 +147,22 @@ button {
 
 /* Banner */
 .ajui-banner {
-  padding: 1.5rem 2rem;
+  padding: 24px 32px;
   border: none;
   font-weight: 400;
-  width: 100vw;
+  width: 100%;
 }
 
-/* Link */
-a {
+/* Action (link/button) */
+.ajui-action {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
+  outline-color: var(--ajui-link-color);
+}
+
+.ajui-action:focus:not(:focus-visible) {
+  outline: none;
 }
 
 /* Button */
@@ -199,13 +171,12 @@ a {
   color: inherit;
   border: none;
   padding: 0;
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: 16px;
 }
 
 .ajui-button-size--regular {
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
+  font-weight: 600;
 }
 
 .ajui-button-size--small {
@@ -219,11 +190,11 @@ a {
   justify-content: center;
   align-items: center;
   transition: opacity var(--ajui-default-transition);
-  padding: 0.25rem;
+  padding: 4px;
 }
 
 .ajui-button-base:disabled {
-  cursor: not-allowed !important;
+  cursor: default !important;
   opacity: var(--ajui-disabled-opacity);
 }
 
@@ -233,17 +204,17 @@ a {
   transition: opacity var(--ajui-default-transition);
 }
 
-.ajui-button--transparent,
 .ajui-button--secondary {
-  box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border);
+  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
   transition: box-shadow var(--ajui-default-transition);
 }
 
 .ajui-button--secondary {
-  background-color: var(--ajui-button-secondary-background);
+  background-color: var(--ajui-default-background);
 }
 
 .ajui-link-default {
+  font-weight: 600;
   color: var(--ajui-link-color);
   transition: opacity var(--ajui-default-transition);
 }
@@ -255,7 +226,6 @@ a {
     opacity: var(--ajui-default-opacity-dim);
   }
 
-  .ajui-button--transparent:not([disabled]):hover,
   .ajui-button--secondary:not([disabled]):hover {
     box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border-hover);
   }
@@ -267,13 +237,13 @@ a {
   border: none;
   background-color: inherit;
   color: inherit;
-  padding: 0.75rem 0.5rem;
-  font-size: 1rem;
+  padding: 12px 8px;
+  font-size: 16px;
   font-weight: 400;
 }
 
 .ajui-input-base::selection {
-  background-color: var(--ajui-input-selection-color);
+  background-color: var(--ajui-focus-ring-color);
 }
 
 .ajui-icon-input {
@@ -292,11 +262,12 @@ a {
   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);
 }
 
 .ajui-input-default:disabled {
   opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed;
+  cursor: default;
 }
 
 /* Select */
@@ -306,13 +277,8 @@ a {
   width: fit-content;
   transition: outline var(--ajui-default-transition);
   outline: 0px solid transparent;
-  box-shadow: inset 0 0 0 1px var(--ajui-select-border);
-  background-color: inherit;
-}
-
-.ajui-select-disabled {
-  opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed !important;
+  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
+  background-color: var(--ajui-default-background);
 }
 
 .ajui-select-base {
@@ -323,22 +289,27 @@ a {
   box-shadow: none;
   cursor: pointer;
   background-color: transparent;
-  padding: 0.75rem 1.75rem 0.75rem 0.5rem;
-  font-size: 1rem;
+  padding: 12px 28px 12px 8px;
+  font-size: 16px;
   font-weight: 400;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
+.ajui-select-disabled * {
+  opacity: var(--ajui-disabled-opacity);
+  cursor: default;
+}
+
 .ajui-select-triangle {
-  --size: 0.75rem;
+  --size: 12px;
   width: var(--size);
   height: var(--size);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: calc(var(--size) - 0.25rem);
+  right: calc(var(--size) - 4px);
   pointer-events: none;
 }
 
@@ -360,7 +331,7 @@ a {
 .ajui-spinner {
   animation: ajui-spinner-animation 1s linear infinite;
   transform-origin: center;
-  height: 1.5rem;
+  height: 24px;
 }
 
 @keyframes ajui-spinner-animation {
@@ -371,3 +342,79 @@ a {
     transform: rotate(360deg);
   }
 }
+
+/* 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 {
+  max-width: 100%;
+  position: relative;
+  overflow: hidden;
+  min-height: 64px;
+  min-width: 64px;
+  width: fit-content;
+}
+
+.ajui-carousel-slider {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.ajui-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;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  font-weight: 800;
+}
+
+.ajui-carousel-arrow-prev {
+  left: 8px;
+}
+.ajui-carousel-arrow-next {
+  right: 8px;
+}
+
+.ajui-carousel-dots {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: 8px;
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+.ajui-carousel-dot {
+  width: 16px;
+  height: 8px;
+  padding: 0;
+  margin: 0 2px;
+}

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * The type of corner to display, controlling the border radius property.
  */
@@ -6,3 +7,11 @@ export type CornerType = "pill" | "rounded" | "sharp";
  * The type of message associated with a piece of content.
  */
 export type ContentType = "success" | "warning" | "error" | "info" | "static";
+/**
+ * Standard style object to apply inline styling to components.
+ */
+export type Style = React.CSSProperties;
+/**
+ * Default props for a div element
+ */
+export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;