@geoffcox/sterling-svelte-themes 1.0.0

package/css/sterling/Select.base.css

@@ -0,0 +1,101 @@
+.sterling-select {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  color: var(--stsv-input__color);
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+  outline: none;
+  padding: 0;
+  position: relative;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-select: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 {
+  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;
+}
+
+.sterling-select .value {
+  padding: 0.5em;
+  display: flex;
+  align-items: center;
+}
+
+.sterling-select .chevron {
+  display: block;
+  position: relative;
+  border: none;
+  background: none;
+  margin: 0;
+  height: 100%;
+  width: 32px;
+}
+
+.sterling-select .chevron::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 3px solid currentColor;
+  border-top: 3px solid currentColor;
+  /* 
+			The chevron is a right triangle, rotated to face down.
+			It should be moved up so it is centered vertically after rotation.
+			The amount to move is the hypotenuse of the right triangle of the chevron.
+		    For a right triangle with equal a and b where c=1
+			a^2 + b^2 = c^2 	
+		    a^2 + a^2 = c^2 
+		    2a^2 = c^2
+			2a^2 = 1
+			a^2 = 0.5
+			a = sqrt(0.5)
+			a = 0.707
+		*/
+  transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
+  transform-origin: 50% 50%;
+}
+
+.sterling-select-popup-content {
+  background-color: var(--stsv-common__background-color);
+  border-color: var(--stsv-common__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: var(--stsv-common__box-shadow);
+  padding: 0.25em;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  max-height: 20em;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-select,
+  .sterling-select::after {
+    transition: none;
+  }
+}

package/css/sterling/Select.colorful.css

@@ -0,0 +1,24 @@
+.sterling-select.colorful {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+  color: var(--stsv-input--colorful__color);
+}
+
+.sterling-select.colorful:hover {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+  color: var(--stsv-input--colorful__color--hover);
+}
+
+.sterling-select.colorful:focus {
+  background-color: var(--stsv-input--colorful__background-color--focus);
+  border-color: var(--stsv-input--colorful__border-color--focus);
+  color: var(--stsv-input--colorful__color--focus);
+  outline-color: var(--stsv-common--colorful__outline-color);
+}
+
+.sterling-select-popup-content.colorful {
+  background-color: var(--stsv-common--colorful__background-color);
+  border-color: var(--stsv-common--colorful__border-color);
+  color: var(--stsv-common--colorful__color);
+}

package/css/sterling/Select.composed.css

@@ -0,0 +1,12 @@
+.sterling-select.composed,
+.sterling-select.composed:hover,
+.sterling-select.composed.focus,
+.sterling-select.composed.disabled {
+  background: none;
+  border: none;
+  outline: none;
+}
+
+.sterling-select.composed.disabled::after {
+  opacity: 0;
+}

package/css/sterling/Select.css

@@ -0,0 +1,4 @@
+@import url('./Select.base.css');
+@import url('./Select.colorful.css');
+@import url('./Select.composed.css');
+@import url('./Select.disabled.css');

package/css/sterling/Select.disabled.css

@@ -0,0 +1,28 @@
+.sterling-select.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;
+}

package/css/sterling/Slider.base.css

@@ -0,0 +1,153 @@
+.sterling-slider {
+  box-sizing: border-box;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  display: grid;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  min-width: 200px;
+}
+
+.sterling-slider.horizontal {
+  height: 2em;
+}
+
+.sterling-slider.vertical {
+  height: 100%;
+  width: 2em;
+}
+
+/* ----- container ----- */
+
+.sterling-slider .container {
+  position: relative;
+}
+
+.sterling-slider.horizontal .container {
+  margin: 0 0.75em;
+}
+
+.sterling-slider.vertical .container {
+  margin: 0.75em 0;
+}
+
+/* ----- track ----- */
+
+.sterling-slider .track {
+  position: absolute;
+  background: var(--stsv-common__background-color--secondary);
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-slider.horizontal .track {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 3px;
+  transform: translate(0, -50%);
+}
+
+.sterling-slider.vertical .track {
+  bottom: 0;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+  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 {
+  background: var(--stsv-common__color);
+  position: absolute;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-slider.horizontal .fill {
+  height: 3px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.sterling-slider.vertical .fill {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 3px;
+}
+
+/* ----- thumb ----- */
+
+.sterling-slider .thumb {
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: block;
+  font: inherit;
+  height: 1.5em;
+  overflow: hidden;
+  padding: 0;
+  text-decoration: none;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+  position: absolute;
+  width: 1.5em;
+}
+
+.sterling-slider.horizontal .thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sterling-slider.vertical .thumb {
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.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 {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+/* ----- reduced motion ----- */
+
+@media (prefers-reduced-motion) {
+  .sterling-slider,
+  .sterling-slider .track,
+  .sterling-slider .fill,
+  .sterling-slider .thumb,
+  .sterling-slider .thumb::after {
+    transition: none;
+  }
+}

package/css/sterling/Slider.colorful.css

@@ -0,0 +1,11 @@
+.sterling-slider.colorful .fill {
+  background: var(--stsv-input--colorful__border-color--selected);
+  position: absolute;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-slider.colorful .thumb {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}

package/css/sterling/Slider.composed.css

@@ -0,0 +1,8 @@
+.sterling-slider.composed,
+.sterling-slider.composed:hover,
+.sterling-slider.composed.focus,
+.sterling-slider.composed.disabled {
+  background: none;
+  border: none;
+  outline: none;
+}

package/css/sterling/Slider.css

@@ -0,0 +1,4 @@
+@import url('./Slider.base.css');
+@import url('./Slider.colorful.css');
+@import url('./Slider.disabled.css');
+@import url('./Slider.composed.css');

package/css/sterling/Slider.disabled.css

@@ -0,0 +1,30 @@
+/* ----- thumb disabled ----- */
+
+.sterling-slider.disabled .thumb {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-slider .thumb::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-slider.disabled .thumb::after {
+  opacity: 1;
+}

package/css/sterling/Switch.base.css

@@ -0,0 +1,175 @@
+.sterling-switch {
+  cursor: pointer;
+  display: grid;
+  position: relative;
+}
+
+.sterling-switch input {
+  cursor: pointer;
+}
+
+.sterling-switch:not(.vertical) {
+  align-content: center;
+  align-items: center;
+  column-gap: 0.5em;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto;
+  justify-content: flex-start;
+  justify-items: flex-start;
+}
+
+.sterling-switch.vertical {
+  align-content: flex-start;
+  align-items: flex-start;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  justify-content: center;
+  justify-items: center;
+  row-gap: 0.5em;
+}
+
+.sterling-switch.vertical .off-label {
+  grid-row: 3 / span 1;
+}
+
+.sterling-switch.vertical .on-label {
+  grid-row: 1 / span 1;
+}
+
+/* ----- input hidden ----- */
+
+.sterling-switch input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  opacity: 0;
+}
+
+/* ----- toggle ----- */
+
+.sterling-switch .toggle {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-input__color);
+  font: inherit;
+  pointer-events: none;
+  position: relative;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  user-select: none;
+}
+
+.sterling-switch:hover .toggle {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+input:focus-visible ~ .toggle {
+  background-color: var(--stsv-input__background-color--focus);
+  border-color: var(--stsv-input__border-color--focus);
+  color: var(--stsv-common__color--focux);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+input:checked ~ .toggle,
+input:checked:hover ~ .toggle,
+input:checked:focus-visible ~ .toggle {
+  background-color: var(--stsv-input__border-color--hover);
+}
+
+/* ----- switch vertical ----- */
+
+.sterling-switch:not(.vertical) .toggle {
+  width: 2em;
+  height: 1.25em;
+}
+
+.sterling-switch.vertical .toggle {
+  width: 1.25em;
+  height: 2em;
+}
+
+/* ----- labels ----- */
+
+.sterling-switch label {
+  color: var(--stsv-common__color);
+  transition: color 250ms;
+  font: inherit;
+}
+
+.sterling-switch .off-label,
+.sterling-switch .on-label {
+  padding-top: 2px;
+}
+
+/* ----- thumb ----- */
+
+.sterling-switch .thumb {
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  display: block;
+  font: inherit;
+  height: 1.25em;
+  position: absolute;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms,
+    transform 250ms;
+  width: 1.25em;
+}
+
+.sterling-switch:hover .thumb {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-switch:active .thumb {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--hover);
+}
+
+/* ----- thumb vertical ----- */
+
+.sterling-switch:not(.vertical) .thumb {
+  top: calc(-1 * 2px);
+  transform: translateX(calc(var(--thumb-offset) - 2px));
+}
+
+.sterling-switch.vertical .thumb {
+  left: calc(-1 * 2px);
+  transform: translateY(calc(var(--thumb-offset) - 2px));
+}
+
+/* ----- reduced motion ----- */
+
+@media (prefers-reduced-motion) {
+  .sterling-switch .toggle,
+  .sterling-switch .thumb,
+  .sterling-switch .thumb::after,
+  .sterling-switch label {
+    transition: none;
+  }
+}

package/css/sterling/Switch.colorful.css

@@ -0,0 +1,45 @@
+/* ----- switch colorful ----- */
+
+.sterling-switch.colorful .switch {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+  color: var(--stsv-input--colorful__color);
+}
+
+.sterling-switch.colorful:hover .switch {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+  color: var(--stsv-input_--colorful_color--hover);
+}
+
+.sterling-switch.colorful input:focus-visible ~ .switch {
+  background-color: var(--stsv-input--colorful__background-color--focus);
+  border-color: var(--stsv-input--colorful__border-color--focus);
+  color: var(--stsv-input--colorful__color--focus);
+}
+
+.sterling-switch.colorful input:checked ~ .switch,
+.sterling-switch.colorful input:checked:hover ~ .switch,
+.sterling-switch.colorful input:checked:focus-visible ~ .switch {
+  background-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+/* ----- thumb colorful ----- */
+
+.sterling-switch.colorful .thumb {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}
+
+.sterling-switch.colorful:hover .thumb {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  border-color: var(--stsv-button--colorful__border-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-switch.colorful:active .thumb {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  border-color: var(--stsv-button--colorful__border-color--active);
+  color: var(--stsv-button--colorful__color--hover);
+}

package/css/sterling/Switch.css

@@ -0,0 +1,3 @@
+@import url('./Switch.base.css');
+@import url('./Switch.colorful.css');
+@import url('./Switch.disabled.css');

package/css/sterling/Switch.disabled.css

@@ -0,0 +1,30 @@
+.sterling-switch.disabled input {
+  cursor: not-allowed;
+}
+
+/* ----- thumb disabled ----- */
+
+.sterling-switch .thumb::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;
+  border-radius: 10000px;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-switch.disabled .thumb::after {
+  opacity: 1;
+}