@geoffcox/sterling-svelte-themes 1.0.0

package/css/sterling/Tab.base.css

@@ -0,0 +1,96 @@
+.sterling-tab {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-common__background-color);
+  border-color: transparent;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  overflow: hidden;
+  padding: 0.5em 1em 0.25em 1em;
+  position: relative;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+}
+
+.sterling-tab:not(.vertical) {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1em;
+  justify-content: center;
+  justify-items: center;
+  row-gap: 0.15em;
+}
+
+.sterling-tab.vertical {
+  grid-template-columns: 1fr 1em;
+  grid-template-rows: 1fr;
+  justify-content: flex-start;
+  justify-items: flex-start;
+  align-content: center;
+  align-items: center;
+  column-gap: 0.15em;
+  padding: 0.25em 1em;
+}
+
+.sterling-tab.using-keyboard:focus-visible {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+/* ----- content -----*/
+
+.sterling-tab .content {
+  padding: 0 0.2em;
+}
+
+/* ----- indicator -----*/
+
+.sterling-tab .indicator {
+  background-color: transparent;
+  border-radius: 10000px;
+  transition: background-color 500ms;
+}
+
+.sterling-tab:not(.vertical) .indicator {
+  justify-self: stretch;
+  height: 0.4em;
+}
+
+.sterling-tab.vertical .indicator {
+  align-self: stretch;
+  width: 0.4em;
+}
+
+.sterling-tab:not(.selected):not(:active):hover .indicator {
+  background-color: var(--stsv-common__color--subtle);
+}
+
+.sterling-tab:active .indicator {
+  background-color: var(--stsv-input__border-color--selected);
+}
+
+.sterling-tab.selected .indicator {
+  background-color: var(--stsv-input__border-color--selected);
+}
+
+/* ----- reduced motion -----*/
+
+@media (prefers-reduced-motion) {
+  .sterling-tab,
+  .sterling-tab::after,
+  .sterling-tab .indicator {
+    transition: none;
+  }
+}

package/css/sterling/Tab.colorful.css

@@ -0,0 +1,13 @@
+/* ----- indicator -----*/
+
+.sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
+  background-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+.sterling-tab.colorful:active .indicator {
+  background-color: var(--stsv-input--colorful__border-color--selected);
+}
+
+.sterling-tab.colorful.selected .indicator {
+  background-color: var(--stsv-input--colorful__border-color--selected);
+}

package/css/sterling/Tab.css

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

package/css/sterling/Tab.disabled.css

@@ -0,0 +1,36 @@
+.sterling-tab:disabled {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-tab::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-tab:disabled::after {
+  opacity: 1;
+}
+
+/* ----- indicator disabled -----*/
+
+.sterling-tab:disabled:not(.selected) .indicator,
+.sterling-tab:disabled:not(.selected):hover .indicator,
+.sterling-tab:disabled:not(.selected):active .indicator {
+  background-color: transparent;
+}

package/css/sterling/TabList.base.css

@@ -0,0 +1,34 @@
+.sterling-tab-list {
+  box-sizing: border-box;
+  display: grid;
+  margin: 0;
+  padding: calc(2 * 2px);
+}
+
+.sterling-tab-list:not(.vertical) {
+  column-gap: 0.5em;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fill, auto);
+  grid-template-rows: 1fr;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sterling-tab-list.vertical {
+  grid-auto-flow: row;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+  overflow-x: hidden;
+  overflow-y: auto;
+  row-gap: 0.5em;
+}
+
+.sterling-tab-list:hover {
+  color: var(--stsv-common__color--hover);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-tab-list {
+    transition: none;
+  }
+}

package/css/sterling/TabList.css

@@ -0,0 +1 @@
+@import url('./TabList.base.css');

package/css/sterling/TextArea.base.css

@@ -0,0 +1,62 @@
+.sterling-text-area {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.sterling-text-area textarea {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-input__color);
+  display: block;
+  font: inherit;
+  line-height: inherit;
+  height: 100%;
+  outline: none;
+  padding: 0.5em;
+  margin: 0;
+  min-height: 3em;
+  overflow: hidden;
+  resize: var(--TextArea__resize, none);
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  width: 100%;
+}
+
+.sterling-text-area textarea:hover {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-text-area textarea: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-text-area textarea::placeholder {
+  color: var(--stsv-common__color--subtle);
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-text-area,
+  .sterling-text-area::after,
+  .sterling-text-area textarea {
+    transition: none;
+  }
+}

package/css/sterling/TextArea.colorful.css

@@ -0,0 +1,17 @@
+.sterling-text-area.colorful textarea {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+  color: var(--stsv-input--colorful__color);
+}
+
+.sterling-text-area.colorful textarea: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-text-area.colorful textarea: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);
+}

package/css/sterling/TextArea.composed.css

@@ -0,0 +1,8 @@
+.sterling-text-area.composed textarea,
+.sterling-text-area.composed:hover textarea,
+.sterling-text-area.composed textarea:focus,
+.sterling-text-area.composed:hover textarea:focus {
+  background-color: transparent;
+  border-color: transparent;
+  outline: none;
+}

package/css/sterling/TextArea.css

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

package/css/sterling/TextArea.disabled.css

@@ -0,0 +1,28 @@
+.sterling-text-area:disabled {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-text-area::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-text-area.disabled::after {
+  opacity: 1;
+}

package/css/sterling/Tooltip.base.css

@@ -0,0 +1,6 @@
+.sterling-tooltip-origin {
+  display: block;
+  background: transparent;
+  width: 0px;
+  height: 0px;
+}

package/css/sterling/Tooltip.css

@@ -0,0 +1 @@
+@import url('./Tooltip.base.css');

package/css/sterling/Tree.base.css

@@ -0,0 +1,49 @@
+.sterling-tree {
+  background-color: var(--stsv-common__background-color);
+  border-color: var(--stsv-common__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-tree:hover {
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-tree.using-keyboard:focus-within {
+  border-color: var(--stsv-button__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;
+}
+
+/* ----- container - a layout panel that grows with the items ----- */
+
+.sterling-tree .container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+/* ----- media queries ----- */
+
+@media (prefers-reduced-motion) {
+  .sterling-tree,
+  .sterling-tree .container::after {
+    transition: none;
+  }
+}

package/css/sterling/Tree.composed.css

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

package/css/sterling/Tree.css

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

package/css/sterling/Tree.disabled.css

@@ -0,0 +1,27 @@
+.sterling-tree.disabled * {
+  cursor: not-allowed;
+}
+
+.sterling-tree .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))
+  );
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  right: 0;
+  top: 0;
+  transition: opacity 250ms;
+}
+
+.sterling-tree.disabled .container::after {
+  opacity: 1;
+}

package/css/sterling/TreeChevron.base.css

@@ -0,0 +1,86 @@
+.sterling-tree-chevron {
+  position: relative;
+  border: none;
+  background: none;
+  height: 1em;
+  width: 1em;
+  transform-origin: 50% 50%;
+}
+
+.sterling-tree-chevron::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 3px solid currentColor;
+  border-top: 3px solid currentColor;
+}
+
+.sterling-tree-chevron:not(.leaf):not(.expanded):not(.animate)::after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.sterling-tree-chevron:not(.leaf).expanded:not(.animate)::after {
+  transform: translate(-50%, -70%) rotate(135deg);
+}
+
+@keyframes tree-chevron-collapse {
+  from {
+    transform: translate(-50%, -70%) rotate(135deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+@keyframes tree-chevron-expand {
+  from {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  to {
+    transform: translate(-50%, -70%) rotate(135deg);
+  }
+}
+
+.sterling-tree-chevron:not(.leaf):not(.expanded).animate::after {
+  animation-name: tree-chevron-collapse;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+.sterling-tree-chevron:not(.leaf).expanded.animate::after {
+  animation-name: tree-chevron-expand;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+.sterling-tree-chevron.leaf::after {
+  animation: none;
+  content: '';
+  position: absolute;
+  font: inherit;
+  left: 50%;
+  top: 50%;
+  width: 0.35em;
+  height: 0.35em;
+  background: currentColor;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-tree-chevron:not(.leaf):not(.expanded).animate::after {
+    animation: none;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  .sterling-tree-chevron:not(.leaf).expanded.animate::after {
+    animation: none;
+    transform: translate(-50%, -70%) rotate(135deg);
+  }
+}

package/css/sterling/TreeChevron.css

@@ -0,0 +1 @@
+@import url('./TreeChevron.base.css');

package/css/sterling/TreeItem.base.css

@@ -0,0 +1,41 @@
+.sterling-tree-item {
+  outline: none;
+}
+
+.sterling-tree-item > .item {
+  align-content: center;
+  align-items: center;
+  background-color: transparent;
+  box-sizing: border-box;
+  color: var(--stsv-input__color);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.25em;
+  margin: 0;
+  outline: none;
+  padding: 0.5em;
+  position: relative;
+  padding-left: calc(0.2em + (0.5em * var(--sterling-tree-item-depth)));
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+}
+
+.sterling-tree-item:not(.disabled):not(.selected) > .item:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-tree-item:not(.disabled).selected > .item {
+  background-color: var(--stsv-button__background-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-tree-item > .item {
+    transition: none;
+  }
+}

package/css/sterling/TreeItem.colorful.css

@@ -0,0 +1,9 @@
+.sterling-tree-item.colorful:not(.disabled):not(.selected) > .item:hover {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-tree-item.colorful:not(.disabled).selected > .item {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/sterling/TreeItem.css

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

package/css/sterling/TreeItem.disabled.css

@@ -0,0 +1,34 @@
+.sterling-tree-item.disabled > .item {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-tree-item > .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;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 250ms;
+}
+
+.sterling-tree-item.disabled > .item::after {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-tree-item > .item::after {
+    transition: none;
+  }
+}