@geoffcox/sterling-svelte-themes 2.0.2 → 2.0.4

package/css/sterling/Input.base.css

@@ -13,7 +13,7 @@
   border-bottom-color: var(--stsv-input__border-color);
   border-radius: 3px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
   box-sizing: border-box;
   color: var(--stsv-input__color);
   display: block;
@@ -41,14 +41,6 @@
   color: var(--stsv-input__color--focus);
 }
 
-input:focus-visible {
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-  outline: none;
-}
-
 /* ----- placeholder ----- */
 
 input::placeholder {

package/css/sterling/Input.disabled.css

@@ -1,36 +1,7 @@
-.sterling-input.disabled * {
+.sterling-input input:disabled {
   cursor: not-allowed;
   outline: none;
-}
-
-.sterling-input::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  pointer-events: none;
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-.sterling-input.disabled::after {
-  opacity: 1;
-}
+  background-color: var(--stsv-input__background-color--disabled);
+  border-bottom-color: var(--stsv-input__border-color--disabled);
+  color: var(--stsv-input__color--disabled);
+}

package/css/sterling/Label.base.css

@@ -12,20 +12,23 @@
   overflow: visible;
   padding: 0;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 /* ----- horizontal | vertical ----- */
 
 .sterling-label:not(.vertical) {
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  grid-template-areas: "text content" ". message";
+  grid-template-areas: 'text content' '. message';
 }
 
 .sterling-label.vertical {
   grid-template-rows: auto auto auto;
-  grid-template-areas: "text" "content" "message";
+  grid-template-areas: 'text' 'content' 'message';
 }
 
 /* ----- text ----- */
@@ -46,7 +49,7 @@
 }
 
 .sterling-label .content {
-  display: grid;
+  display: contents;
   grid-area: content;
 }
 
@@ -58,7 +61,10 @@
   grid-area: message;
   padding: 0.5em;
   width: 100%;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-label.info .message {

package/css/sterling/Label.boxed.css

@@ -3,7 +3,11 @@
   border-color: var(--stsv-input__border-color);
   border-radius: 3px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
+}
+
+.sterling-label.boxed:not(.vertical) {
+  grid-template-areas: 'text content' 'message message';
 }
 
 .sterling-label.boxed:not(.disabled):hover {
@@ -23,7 +27,7 @@
   outline-color: var(--stsv-common__outline-color);
   outline-offset: 0;
   outline-style: solid;
-  outline-width: 2px;
+  outline-width: var(--stsv-common__outline-width);
 }
 
 .sterling-label.boxed .text {

package/css/sterling/List.base.css

@@ -3,7 +3,7 @@
   border-color: var(--stsv-input__border-color);
   border-radius: 3px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
   box-sizing: border-box;
   color: var(--stsv-input__color);
   height: 100%;
@@ -12,7 +12,6 @@
   margin: 0;
   outline: none;
   padding: 0;
-  position: relative;
   transition:
     background-color 250ms,
     color 250ms,
@@ -26,7 +25,7 @@
   width: 100%;
 }
 
-.sterling-list:hover {
+.sterling-list:not(.disabled):hover {
   border-color: var(--stsv-input__border-color--hover);
   color: var(--stsv-input__color--hover);
 }
@@ -37,7 +36,7 @@
   outline-color: var(--stsv-common__outline-color);
   outline-offset: 0;
   outline-style: solid;
-  outline-width: 2px;
+  outline-width: var(--stsv-common__outline-width);
 }
 
 /* ----- container - a layout panel that grows with the items ----- */
@@ -53,27 +52,6 @@
   flex-direction: row;
 }
 
-.sterling-list .container::after {
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  content: '';
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
 /* ----- media queries ----- */
 
 @media (prefers-reduced-motion) {

package/css/sterling/List.disabled.css

@@ -1,7 +1,7 @@
-.sterling-list.disabled * {
+.sterling-list.disabled {
+  background-color: var(--stsv-common__background-color--disabled);
+  border-color: var(--stsv-input__border-color--disabled);
+  color: var(--stsv-input__color--disabled);
   cursor: not-allowed;
 }
 
-.sterling-list.disabled .container::after {
-  opacity: 1;
-}

package/css/sterling/ListItem.disabled.css

@@ -1,28 +1,12 @@
 .sterling-list-item.disabled {
+  background-color: var(--stsv-common__background-color--disabled);
+  border-color: var(--stsv-input__border-color--disabled);
+  color: var(--stsv-input__color--disabled);
   cursor: not-allowed;
   outline: none;
 }
 
-.sterling-list-item::after {
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
-.sterling-list-item.item-disabled:not(.list-disabled)::after {
-  opacity: 1;
-}
+.sterling-list-item.disabled.selected {
+  background-color: var(--stsv-button__background-color--active);
+  color: var(--stsv-input__color--disabled);
+}

package/css/sterling/Menu.base.css

@@ -3,9 +3,9 @@
   border-color: var(--stsv-common__border-color);
   border-radius: 0;
   border-style: solid;
-  border-width: 2px;
-  box-shadow: var(--stsv-common__box-shadow);
+  border-width: var(--stsv-common__border-width);
   box-sizing: border-box;
+  filter: var(--stsv-common__drop-shadow);
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;

package/css/sterling/MenuItem.base.css

@@ -1,10 +1,7 @@
 .sterling-menu-item {
   appearance: none;
   background-color: transparent;
-  border-color: transparent;
-  border-radius: 8px;
-  border-style: none;
-  border-width: 0;
+  border: none;
   box-sizing: border-box;
   color: var(--stsv-common__color);
   cursor: pointer;
@@ -21,24 +18,12 @@
   user-select: none;
 }
 
-.sterling-menu-item:hover {
+.sterling-menu-item:not(:disabled):hover {
   background-color: var(--stsv-button__background-color--hover);
   color: var(--stsv-button__color--hover);
 }
 
-.sterling-menu-item:focus {
-  outline: none;
-}
-
-.sterling-menu-item.using-keyboard:focus {
-  border-color: var(--stsv-button__border-color--focus);
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-}
-
-.sterling-menu-item:focus {
+.sterling-menu-item:not(:disabled):focus {
   background-color: var(--stsv-input__background-color--selected);
 }
 

package/css/sterling/MenuItem.css

@@ -1,3 +1,3 @@
 @import url('./MenuItem.base.css');
 @import url('./MenuItem.defaultItem.css');
-@import url('./MenuItem.defaultItem.disabled.css');
+@import url('./MenuItem.disabled.css');

package/css/sterling/MenuItem.defaultItem.css

@@ -23,7 +23,7 @@
 .sterling-menu-item-display .check.checkmark.checked::after {
   border-color: currentColor;
   border-style: solid;
-  border-width: 0 0.2em 0.2em 0;
+  border-width: 0 3px 3px 0;
   box-sizing: border-box;
   content: "";
   height: 0.8em;

package/css/sterling/MenuItem.disabled.css

@@ -0,0 +1,6 @@
+.sterling-menu-item:disabled {
+  cursor: not-allowed;
+  outline: none;
+  background-color: transparent;
+  color: var(--stsv-common__color--disabled);
+}

package/css/sterling/MenuSeparator.base.css

@@ -1,5 +1,5 @@
 .sterling-menu-separator {
-  height: 2px;
+  height: var(--stsv-common__border-width);
   background-color: var(--stsv-common__border-color);
   margin: 0.1em 0;
 }

package/css/sterling/Pagination.button.css

@@ -6,7 +6,7 @@
   border-color: transparent;
   border-radius: 0;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-button__border-width);
   box-sizing: border-box;
   color: var(--stsv-button__color);
   cursor: pointer;

package/css/sterling/Pagination.input.css

@@ -5,7 +5,7 @@
   border-bottom-color: var(--stsv-input__border-color);
   border-radius: 3px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
   box-sizing: border-box;
   color: var(--stsv-input__color);
   display: block;
@@ -23,7 +23,7 @@
   min-width: calc(var(--page-number-width, 1ch) + 1em);
 }
 
-.sterling-pagination input:not(:disabled) {
+.sterling-pagination input:not(:disabled):hover {
   background-color: var(--stsv-input__background-color--hover);
   border-bottom-color: var(--stsv-input__border-color--hover);
   color: var(--stsv-input__color--hover);
@@ -40,7 +40,7 @@
   outline-color: var(--stsv-common__outline-color);
   outline-offset: 0;
   outline-style: solid;
-  outline-width: 2px;
+  outline-width: var(--stsv-common__outline-width);
   outline: none;
 }
 @media (prefers-reduced-motion) {

package/css/sterling/Popover.css

@@ -14,6 +14,7 @@
   position: absolute;
   top: 0;
   width: max-content;
+
 }
 
 .sterling-popover.open {

package/css/sterling/Progress.base.css

@@ -2,7 +2,7 @@
   align-content: flex-start;
   align-items: flex-start;
   background: var(--stsv-common__background-color);
-  border-width: 2px;
+  border-width: var(--stsv-common__border-width);
   border-style: solid;
   border-color: var(--stsv-common__border-color);
   border-radius: 0;

package/css/sterling/Progress.css

@@ -1,2 +1 @@
 @import url('./Progress.base.css');
-@import url('./Progress.disabled.css');

package/css/sterling/Radio.base.css

@@ -46,7 +46,7 @@
   background-color: var(--stsv-input__background-color);
   border-color: var(--stsv-input__border-color);
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
   border-radius: 10000px;
   box-sizing: border-box;
   display: inline-block;
@@ -74,7 +74,7 @@
   outline-color: var(--stsv-common__outline-color);
   outline-offset: 0;
   outline-style: solid;
-  outline-width: 2px;
+  outline-width: var(--stsv-common__outline-width);
 }
 
 .sterling-radio .indicator::after {

package/css/sterling/Radio.disabled.css

@@ -1,28 +1,18 @@
-.sterling-radio.disabled * {
+.sterling-radio.disabled,
+.sterling-radio.disabled input,
+.sterling-radio.disabled > label {
   cursor: not-allowed;
 }
 
-.sterling-radio .container::after {
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  border-radius: 10000px;
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
+.sterling-radio.disabled .indicator {
+  background-color: var(--stsv-input__background-color--disabled);
+  border-color: var(--stsv-input__border-color--disabled);
 }
 
-.sterling-radio.disabled .container::after {
-  opacity: 1;
+.sterling-radio.disabled .indicator::after {
+  border-color: var(--stsv-input__color--disabled);
+}
+
+.sterling-radio.disabled > label {
+  color: var(--stsv-common__color--disabled);
 }

package/css/sterling/Select.base.css

@@ -5,7 +5,7 @@
   border-color: var(--stsv-input__border-color);
   border-radius: 3px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-input__border-width);
   color: var(--stsv-input__color);
   cursor: pointer;
   display: grid;
@@ -20,20 +20,20 @@
     border-color 250ms;
 }
 
-.sterling-select:hover {
+.sterling-select:not(.disabled):hover {
   background-color: var(--stsv-input__background-color--hover);
   border-color: var(--stsv-input__border-color--hover);
   color: var(--stsv-input__color--hover);
 }
 
-.sterling-select:focus {
+.sterling-select:not(.disabled):focus-visible {
   background-color: var(--stsv-input__background-color--focus);
   border-color: var(--stsv-input__border-color--focus);
   color: var(--stsv-input__color--focus);
   outline-color: var(--stsv-common__outline-color);
   outline-offset: 0;
   outline-style: solid;
-  outline-width: 2px;
+  outline-width: var(--stsv-common__outline-width);
 }
 
 .sterling-select .value {
@@ -84,8 +84,8 @@
   border-color: var(--stsv-common__border-color);
   border-radius: 0;
   border-style: solid;
-  border-width: 2px;
-  box-shadow: var(--stsv-common__box-shadow);
+  border-width: var(--stsv-common__border-width);
+  filter: var(--stsv-common__drop-shadow);
   padding: 0.25em;
   display: grid;
   grid-template-columns: 1fr;

package/css/sterling/Select.disabled.css

@@ -1,28 +1,11 @@
 .sterling-select.disabled {
+  background-color: var(--stsv-input__background-color--disabled);
+  border-color: var(--stsv-input__border-color--disabled);
+  color: var(--stsv-input__color--disabled);
   cursor: not-allowed;
   outline: none;
 }
 
-.sterling-select::after {
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
-.sterling-select.disabled::after {
-  opacity: 1;
+.sterling-slider.disabled .fill {
+  background: var(--stsv-common__color--disabled);
 }

package/css/sterling/Slider.base.css

@@ -61,13 +61,6 @@
   width: 3px;
 }
 
-.sterling-slider:focus-visible {
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-}
-
 /* ----- fill ----- */
 
 .sterling-slider .fill {
@@ -83,13 +76,30 @@
   height: 3px;
   top: 50%;
   transform: translate(0, -50%);
+  width: var(--valueOffset);
+}
+
+.sterling-slider.horizontal:not(.reverse) .fill {
+  left: 0;
+}
+
+.sterling-slider.horizontal.reverse .fill {
+  right: 0;
 }
 
 .sterling-slider.vertical .fill {
-  bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
   width: 3px;
+  height: var(--valueOffset);
+}
+
+.sterling-slider.vertical:not(.reverse) .fill {
+  bottom: 0;
+}
+
+.sterling-slider.vertical.reverse .fill {
+  top: 0;
 }
 
 /* ----- thumb ----- */
@@ -99,7 +109,7 @@
   border-color: var(--stsv-button__border-color);
   border-radius: 10000px;
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--stsv-button__border-width);
   box-sizing: border-box;
   color: var(--stsv-button__color);
   cursor: pointer;
@@ -107,6 +117,7 @@
   font: inherit;
   height: 1.5em;
   overflow: hidden;
+  outline: none;
   padding: 0;
   text-decoration: none;
   transition:
@@ -118,28 +129,49 @@
   width: 1.5em;
 }
 
-.sterling-slider.horizontal .thumb {
+.sterling-slider.horizontal:not(.reverse) .thumb {
   top: 50%;
   transform: translate(-50%, -50%);
+  left: var(--valueOffset);
+}
+
+.sterling-slider.horizontal.reverse .thumb {
+  top: 50%;
+  transform: translate(50%, -50%);
+  right: var(--valueOffset);
 }
 
-.sterling-slider.vertical .thumb {
+.sterling-slider.vertical:not(.reverse) .thumb {
   left: 50%;
   transform: translate(-50%, 50%);
+  bottom: var(--valueOffset);
 }
 
-.thumb:hover {
+.sterling-slider.vertical.reverse .thumb {
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: var(--valueOffset);
+}
+
+.sterling-slider:not(.disabled) .thumb:hover {
   background-color: var(--stsv-button__background-color--hover);
   border-color: var(--stsv-button__border-color--hover);
   color: var(--stsv-button__color--hover);
 }
 
-.thumb:active {
+.sterling-slider:not(.disabled) .thumb:active {
   background-color: var(--stsv-button__background-color--active);
   border-color: var(--stsv-button__border-color--active);
   color: var(--stsv-button__color--active);
 }
 
+.sterling-slider:not(.disabled).using-keyboard:focus-visible .thumb {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: var(--stsv-common__outline-width);
+}
+
 /* ----- reduced motion ----- */
 
 @media (prefers-reduced-motion) {