css-zero 1.1.15 → 2.0.0

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css

@@ -1,24 +1,21 @@
 .alert {
-  border: 1px solid var(--alert-border-color, var(--color-border));
+  background-color: var(--alert-background, var(--color-bg));
   border-radius: var(--rounded-lg);
+  border: 1px solid var(--alert-border-color, var(--color-border));
   color: var(--alert-color, var(--color-text));
   font-size: var(--text-sm);
   inline-size: var(--size-full);
   padding: var(--size-4);
-
-  img {
-    filter: var(--alert-icon-color, var(--color-filter-text));
-  }
 }
 
 .alert--positive {
-  --alert-border-color: var(--color-positive);
-  --alert-color: var(--color-positive);
-  --alert-icon-color: var(--color-filter-positive);
+  --alert-background: var(--color-positive);
+  --alert-border-color: transparent;
+  --alert-color: white;
 }
 
 .alert--negative {
-  --alert-border-color: var(--color-negative);
-  --alert-color: var(--color-negative);
-  --alert-icon-color: var(--color-filter-negative);
+  --alert-background: var(--color-negative);
+  --alert-border-color: transparent;
+  --alert-color: white;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css

@@ -10,7 +10,6 @@
   overflow: hidden;
 
   &:is(.btn) {
-    --btn-icon-color: none;
     --btn-inline-size: var(--size);
     --btn-padding: 0;
     --btn-radius: var(--radius);
@@ -21,14 +20,13 @@
   }
 
   img {
-    align-content: center;
     aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
     inline-size: var(--size-full);
     object-fit: cover;
   }
 
-  span[role=img] {
+  span[role="img"] {
     align-items: center;
     background-color: var(--color-border-light);
     block-size: var(--size-full);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css

@@ -1,14 +1,18 @@
 .badge {
+  align-items: center;
   background-color: var(--badge-background, var(--color-bg));
-  border-radius: var(--rounded-md);
+  border-radius: var(--badge-radius, var(--rounded-md));
   border: 1px solid var(--badge-border-color, var(--color-border));
   box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
+  column-gap: var(--size-1);
   display: inline-flex;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
+  justify-content: center;
   line-height: var(--leading-4);
-  padding: var(--size-0_5) var(--size-2_5);
+  min-inline-size: var(--badge-min-inline-size, 0);
+  padding: var(--badge-padding, .125rem .5rem);
 }
 
 .badge--primary {
@@ -38,3 +42,8 @@
   --badge-box-shadow: var(--shadow-sm);
   --badge-color: white;
 }
+
+.badge--number {
+  --badge-min-inline-size: var(--size-5);
+  --badge-radius: var(--rounded-full);
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css

@@ -1,4 +1,4 @@
-.breadcrumb {
+:where(.breadcrumb) {
   align-items: center;
   color: var(--color-text-subtle);
   column-gap: var(--size-1);
@@ -7,14 +7,6 @@
   font-size: var(--text-sm);
   overflow-wrap: break-word;
 
-  a {
-    padding-block-end: 2px;
-  }
-
-  img {
-    filter: var(--color-filter-text);
-  }
-
   a:hover {
     color: var(--color-text);
   }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -1,9 +1,6 @@
 .btn {
-  --btn-background: var(--color-bg);
-  --hover-color: oklch(from var(--btn-background) calc(l * .95) c h);
-
   align-items: center;
-  background-color: var(--btn-background);
+  background-color: var(--btn-background, var(--color-bg));
   block-size: var(--btn-block-size, auto);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
@@ -18,22 +15,17 @@
   justify-content: var(--btn-justify-content, center);
   padding: var(--btn-padding, .375rem 1rem);
   position: relative;
-  text-align: var(--btn-text-align, center);
   white-space: nowrap;
 
-  img:not([class]) {
-    filter: var(--btn-icon-color, var(--color-filter-text));
-  }
-
   &:hover {
-    background-color: var(--btn-hover-color, var(--hover-color));
+    background-color: var(--btn-hover-color, var(--color-border-light));
   }
 
   &:focus-visible {
     outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark);
   }
 
-  &:is(:disabled, [aria-disabled=true]) {
+  &:is(:disabled, [aria-disabled="true"]) {
     opacity: var(--opacity-50);
     pointer-events: none;
   }
@@ -43,12 +35,13 @@
   --btn-background: var(--color-primary);
   --btn-border-color: transparent;
   --btn-color: var(--color-text-reversed);
-  --btn-icon-color: var(--color-filter-text-reversed);
+  --btn-hover-color: rgb(from var(--color-primary) r g b / .9);
 }
 
 .btn--secondary {
   --btn-background: var(--color-secondary);
   --btn-border-color: transparent;
+  --btn-hover-color: rgb(from var(--color-secondary) r g b / .8);
 }
 
 .btn--borderless {
@@ -60,41 +53,41 @@
   --btn-background: var(--color-positive);
   --btn-border-color: transparent;
   --btn-color: white;
-  --btn-icon-color: invert(1);
+  --btn-hover-color: rgb(from var(--color-positive) r g b / .9);
 }
 
 .btn--negative {
   --btn-background: var(--color-negative);
   --btn-border-color: transparent;
   --btn-color: white;
-  --btn-icon-color: invert(1);
+  --btn-hover-color: rgb(from var(--color-negative) r g b / .9);
 }
 
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-hover-color: transparent;
   --btn-padding: 0;
-  --btn-box-shadow: none;
 }
 
 .btn--icon {
   --btn-padding: var(--size-2);
 }
 
-[aria-busy=true] .btn--loading:disabled {
+[aria-busy="true"] .btn--loading:disabled {
   > * {
     visibility: hidden;
   }
 
   &::after {
     animation: spin 1s linear infinite;
-    background-image: url("loader-circle.svg");
-    background-size: cover;
+    background-color: currentColor;
     block-size: var(--size-5);
     content: "";
-    filter: var(--btn-icon-color, var(--color-filter-text));
     inline-size: var(--size-5);
+    mask-image: url("loading.svg");
+    mask-size: cover;
     position: absolute;
   }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css

@@ -6,11 +6,11 @@
   padding: var(--size-6);
   position: relative;
 
-  &[aria-disabled=true] {
+  &[aria-disabled="true"] {
     pointer-events: none;
   }
 
-  &[aria-disabled=true]::after {
+  &[aria-disabled="true"]::after {
     background-color: rgba(0, 0, 0, .3);
     border-radius: inherit;
     content: "";
@@ -20,6 +20,6 @@
 }
 
 .card--selectable:has(:checked) {
-  background-color: var(--color-secondary);
-  border-color: var(--color-primary);
+  background-color: rgb(from var(--color-border-light) r g b / .5);
+  border-color: var(--color-border-dark);
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css

@@ -1,24 +1,24 @@
 .carousel {
   align-items: center;
-  column-gap: var(--size-4);
   display: flex;
+  gap: var(--size-4);
 }
 
 .carousel__content {
-  column-gap: var(--size-4);
   display: flex;
+  gap: var(--carousel-items-gap, 1rem);
   inline-size: var(--size-full);
-  overflow-x: hidden;
+  overflow: hidden;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
 }
 
 .carousel__item {
+  --space: var(--carousel-items-gap, 1rem);
   --items: var(--carousel-items, 1);
-  --items-gap: calc(100% - 1rem * (var(--items) - 1));
+  --items-gap: calc(100% - var(--space) * (var(--items) - 1));
 
   flex: 0 0 calc(var(--items-gap) / var(--items));
   padding: var(--size-1);
-  scroll-snap-stop: always;
   scroll-snap-align: start;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/color_scheme.css

@@ -0,0 +1,33 @@
+[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
+[data-color-scheme="dark"] {
+  color-scheme: dark;
+}
+
+[data-color-scheme="system"] {
+  color-scheme: light dark;
+}
+
+[data-color-scheme="light"] {
+  .icon--color-scheme-light { display: inline-flex; }
+  .icon--color-scheme-dark { display: none; }
+}
+
+[data-color-scheme="dark"] {
+  .icon--color-scheme-light { display: none; }
+  .icon--color-scheme-dark { display: inline-flex; }
+}
+
+[data-color-scheme="system"] {
+  @media (prefers-color-scheme: light) {
+    .icon--color-scheme-light { display: inline-flex; }
+    .icon--color-scheme-dark { display: none; }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .icon--color-scheme-light { display: none; }
+    .icon--color-scheme-dark { display: inline-flex; }
+  }
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css

@@ -77,7 +77,7 @@
   }
 
   .active {
-    background-color: var(--color-secondary);
+    background-color: var(--color-border-light);
     color: inherit !important;
   }
 
@@ -96,14 +96,14 @@
 
 .ts-wrapper.single .ts-control {
   background-color: var(--color-bg) !important;
-  background-image: url("select-arrow.svg") !important;
+  background-image: url("chevron-down-zinc-500.svg") !important;
   background-position: center right var(--size-2) !important;
   background-repeat: no-repeat !important;
   background-size: var(--size-4) auto !important;
 }
 
 .ts-wrapper.multi .ts-control > .item {
-  background: var(--color-secondary);
+  background: var(--color-border-light);
   border-radius: var(--rounded-md);
   color: inherit;
   line-height: var(--leading-tight);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css

@@ -47,14 +47,12 @@
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
-  --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
-  --btn-text-align: start;
 
-  &[aria-selected=true] {
-    --btn-background: var(--color-secondary);
+  &[aria-selected="true"] {
+    --btn-background: var(--color-border-light);
   }
 }
 

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css

@@ -144,7 +144,7 @@
     }
 
     &:is(.today, .inRange, :hover, :focus) {
-      background: var(--color-secondary);
+      background: var(--color-border-light);
       color: var(--color-text);
     }
 

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css

@@ -9,7 +9,7 @@
   max-inline-size: var(--dialog-size, var(--max-i-lg));
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, .5);
   }
 
   /* Setup transition */
@@ -37,12 +37,8 @@
     &[open]::backdrop { opacity: 0; }
   }
 
-  /* Drawer component on mobile  */
   @media (width < 40rem) {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-    margin-block-end: 0;
-    max-inline-size: none;
+    border-radius: 0;
   }
 }
 

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dropzone.css

@@ -4,21 +4,22 @@
   border-radius: var(--rounded-xl);
   border: 2px dashed var(--color-border);
   padding: var(--size-2);
+}
 
-  .dz-preview.dz-image-preview {
-    background: transparent;
-  }
+.dropzone .dz-preview.dz-image-preview {
+  background: transparent;
+}
 
-  .dz-preview .dz-error-message {
-    background: var(--color-negative);
-    word-break: break-all;
-  }
+.dropzone .dz-preview .dz-error-message {
+  background: var(--color-negative);
+  text-align: center;
+  text-wrap: balance;
+}
 
-  .dz-preview .dz-error-message::after {
-    border-bottom: 6px solid var(--color-negative);
-  }
+.dropzone .dz-preview .dz-error-message::after {
+  border-bottom: 6px solid var(--color-negative);
+}
 
-  .dz-preview:has(.dz-remove) .dz-error-message  {
-    top: 148px;
-  }
+.dropzone .dz-preview:has(.dz-remove) .dz-error-message  {
+  top: 148px;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css

@@ -1,16 +1,15 @@
 .flash {
   align-items: center;
   animation: appear-then-fade 4s 300ms both;
-  backdrop-filter: var(--blur-sm) var(--contrast-75);
-  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
+  background-color: var(--flash-background, var(--color-text));
   border-radius: var(--rounded-full);
   color: var(--flash-color, var(--color-text-reversed));
   column-gap: var(--size-2);
-  display: flex;
+  display: inline-flex;
   font-size: var(--text-fluid-base);
   justify-content: center;
   line-height: var(--leading-none);
-  margin-block-start: var(--flash-position, var(--size-4));
+  margin-block-start: var(--flash-position, var(--size-5));
   margin-inline: auto;
   min-block-size: var(--size-11);
   padding: var(--size-1) var(--size-4);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/group.css

@@ -1,22 +1,49 @@
-.group {
-  align-items: center;
+.group-inline {
   display: flex;
+  flex-direction: row;
 
-  :first-child {
+  > :first-child {
     border-end-end-radius: 0;
     border-start-end-radius: 0;
   }
 
-  :last-child {
+  > :last-child {
     border-end-start-radius: 0;
     border-start-start-radius: 0;
   }
 
-  :not(:first-child) {
+  > :not(:first-child) {
     border-inline-start: 0;
   }
 
-  :not(:first-child, :last-child) {
+  > :not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+
+  > :focus-visible {
+    z-index: 1;
+  }
+}
+
+.group-block {
+  display: flex;
+  flex-direction: column;
+
+  > :first-child {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  > :last-child {
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
+  }
+
+  > :not(:first-child) {
+    border-block-start: 0;
+  }
+
+  > :not(:first-child, :last-child) {
     border-radius: 0;
   }
 

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/icons.css

@@ -0,0 +1,41 @@
+.icon {
+  background-color: var(--icon-color, currentColor);
+  block-size: var(--icon-size, 1rem);
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--icon-size, 1rem);
+  mask-image: var(--svg);
+  mask-repeat: no-repeat;
+  mask-size: cover;
+  pointer-events: none;
+  user-select: none;
+}
+
+img.icon {
+  background: none;
+}
+
+.icon--loading {
+  --svg: url("loading.svg");
+  animation: var(--animate-spin);
+  animation-duration: 1s;
+}
+
+/****************************************************************
+* Lucide (https://lucide.dev)
+* Open-source icon library with a consistent style
+*****************************************************************/
+.icon--chevron-left { --svg: url("chevron-left.svg"); }
+.icon--chevron-right { --svg: url("chevron-right.svg"); }
+.icon--ellipsis { --svg: url("ellipsis.svg"); }
+.icon--chevrons-up-down { --svg: url("chevrons-up-down.svg"); }
+.icon--menu { --svg: url("menu.svg"); }
+.icon--x { --svg: url("x.svg"); }
+.icon--search { --svg: url("search.svg"); }
+.icon--copy { --svg: url("copy.svg"); }
+.icon--download { --svg: url("download.svg"); }
+.icon--share { --svg: url("share.svg"); }
+.icon--camera { --svg: url("camera.svg"); }
+.icon--minus { --svg: url("minus.svg"); }
+.icon--sun { --svg: url("sun.svg"); }
+.icon--moon { --svg: url("moon.svg"); }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input-clearable.css

@@ -0,0 +1,7 @@
+.input--clearable:has(:placeholder-shown) > button {
+  display: none;
+}
+
+.input--clearable ::-webkit-search-cancel-button {
+  display: none;
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input-copyable.css

@@ -0,0 +1,4 @@
+.input--copied > button > .icon {
+  animation: var(--animate-fade-out), var(--animate-slide-out-up);
+  animation-duration: var(--time-500);
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input-revealable.css

@@ -0,0 +1,7 @@
+.input--revealable > button > .icon {
+  --svg: url("eye.svg");
+}
+
+.input--revealed > button > .icon {
+  --svg: url("eye-off.svg");
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -9,14 +9,18 @@
   inline-size: var(--input-inline-size, var(--size-full));
   padding: var(--input-padding, .375rem .75rem);
 
-  &:is(textarea[rows=auto]) {
+  option {
+    padding: revert;
+  }
+
+  &:is(textarea[rows="auto"]) {
     field-sizing: content;
     max-block-size: calc(.875rem + var(--input-max-rows, 10lh));
     min-block-size: calc(.875rem + var(--input-rows, 2lh));
   }
 
   &:is(select):not([multiple], [size]) {
-    background-image: url("select-arrow.svg");
+    background-image: url("chevron-down-zinc-500.svg");
     background-position: center right var(--size-2);
     background-repeat: no-repeat;
     background-size: var(--size-4) auto;
@@ -30,53 +34,43 @@
     border-color: var(--color-negative);
   }
 
-  &:user-invalid ~ .invalid-feedback {
+  &:user-invalid + .invalid-feedback {
     display: flex;
   }
 
+  &:focus-visible {
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: var(--opacity-50);
   }
-}
 
-.input--actor {
-  input {
-    border: 0; inline-size: 100%; outline: 0;
-  }
-
-  img:not([class]) {
-    filter: var(--input-icon-color, var(--color-filter-text));
-  }
-
-  &:focus-within {
-    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+  .field_with_errors & {
+    border-color: var(--color-negative);
   }
 }
 
-.invalid-feedback {
-  display: none;
-}
-
 :is(.checkbox, .radio) {
-  transform: scale(1.2);
-}
-
-:is(.checkbox, .radio, .range) {
   accent-color: var(--color-primary);
-}
+  transform: scale(1.2);
 
-:is(.input, .checkbox, .radio, .range) {
   &:focus-visible {
     outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
   }
 
-  &:focus-visible:user-invalid {
-    outline: none;
-  }
-
   .field_with_errors & {
     border-color: var(--color-negative);
-    display: contents;
+  }
+}
+
+.input--actor {
+  input {
+    border: 0; inline-size: 100%; outline: 0;
+  }
+
+  &:focus-within {
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
   }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css

@@ -7,7 +7,7 @@
 
 .menu__header {
   font-size: var(--text-sm);
-  font-weight: var(--font-semibold);
+  font-weight: var(--font-medium);
   padding: var(--size-1_5) var(--size-2);
 }
 
@@ -25,14 +25,12 @@
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
-  --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
-  --btn-text-align: start;
 
   &:focus-visible {
-    --btn-background: var(--color-secondary);
+    --btn-background: var(--color-border-light);
   }
 }