@geoffcox/sterling-svelte-themes 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Geoff Cox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# sterling-svelte-themes
+
+A modern theme for the sterling-svelte component library.
+
+## Installation
+
+```
+npm install @geoffcox/sterling-svelte-themes
+```
+
+## Repository
+
+https://github.com/GeoffCox/sterling-svelte-themes

package/css/sterling/Button.base.css

@@ -0,0 +1,54 @@
+.sterling-button {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font: inherit;
+  justify-content: center;
+  justify-items: center;
+  column-gap: 0.25em;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sterling-button:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-button:active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-button:focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-button {
+    transition: none;
+  }
+}

package/css/sterling/Button.colorful.css

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

package/css/sterling/Button.css

@@ -0,0 +1,8 @@
+@import url('./Button.base.css');
+@import url('./Button.colorful.css');
+@import url('./Button.shapes.css');
+@import url('./Button.secondary.css');
+@import url('./Button.secondary.colorful.css');
+@import url('./Button.tool.css');
+@import url('./Button.tool.colorful.css');
+@import url('./Button.disabled.css');

package/css/sterling/Button.disabled.css

@@ -0,0 +1,22 @@
+.sterling-button:disabled {
+  cursor: not-allowed;
+  position: relative;
+}
+
+.sterling-button:disabled::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;
+}

package/css/sterling/Button.secondary.colorful.css

@@ -0,0 +1,15 @@
+.sterling-button.secondary.colorful {
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__border-color);
+}
+.sterling-button.secondary.colorful:hover {
+  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-button.secondary.colorful:active {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  border-color: var(--stsv-button--colorful__border-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/sterling/Button.secondary.css

@@ -0,0 +1,11 @@
+.sterling-button.secondary {
+  background-color: transparent;
+}
+
+.sterling-button.secondary:hover {
+  background-color: var(--stsv-button__background-color--hover);
+}
+
+.sterling-button.secondary:active {
+  background-color: var(--stsv-button__background-color--active);
+}

package/css/sterling/Button.shapes.css

@@ -0,0 +1,14 @@
+.sterling-button.capsule {
+  border-radius: 10000px;
+  padding: 0.5em;
+}
+
+.sterling-button.circular {
+  border-radius: 10000px;
+  padding: 0.5em;
+  aspect-ratio: 1 /1;
+}
+
+.sterling-button.square {
+  border-radius: 0;
+}

package/css/sterling/Button.tool.colorful.css

@@ -0,0 +1,13 @@
+.sterling-button.tool.colorful {
+  color: var(--stsv-button--colorful__border-color);
+}
+
+.sterling-button.tool.colorful:hover {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-button.tool.colorful:active {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/sterling/Button.tool.css

@@ -0,0 +1,18 @@
+.sterling-button.tool {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.sterling-button.tool:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: transparent;
+}
+
+.sterling-button.tool:active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: transparent;
+}
+
+.sterling-button.tool:focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+}

package/css/sterling/Callout.base.css

@@ -0,0 +1,59 @@
+.sterling-callout-portal {
+  position: relative;
+  overflow: visible;
+}
+
+.sterling-callout {
+  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);
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  display: none;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: auto;
+  left: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  width: max-content;
+  z-index: 0;
+}
+
+.sterling-callout.open {
+  display: grid;
+}
+
+.sterling-callout .arrow {
+  position: absolute;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  background-color: inherit;
+  border-color: inherit;
+  border-style: inherit;
+  border-width: inherit;
+  /* This clip path clips 1/2 the square to create a triangle */
+  /* The -100% and 200% allow for the drop-shadow to not be clipped */
+  clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
+}
+
+.sterling-callout.top-start .arrow,
+.sterling-callout.top .arrow,
+.sterling-callout.top-end .arrow {
+  filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
+}
+
+.sterling-callout.left-start .arrow,
+.sterling-callout.left .arrow,
+.sterling-callout.left-end .arrow {
+  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
+}
+
+.sterling-callout .callout-text {
+  padding: 1em;
+}

package/css/sterling/Callout.colorful.css

@@ -0,0 +1,5 @@
+.sterling-callout.colorful {
+  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/Callout.css

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

package/css/sterling/Checkbox.base.css

@@ -0,0 +1,121 @@
+.sterling-checkbox {
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+/* 
+The container 
+- allows the input to be hidden
+- avoids input participating in layout
+- prevents collisions with surrounding slots
+*/
+.sterling-checkbox .container {
+  font: inherit;
+  position: relative;
+  display: grid;
+  align-items: center;
+  margin-right: 0.25em;
+}
+
+/*
+The input is hidden since the built-in browser checkbox cannot be customized
+*/
+.sterling-checkbox input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  opacity: 0;
+  height: 20px;
+  width: 20px;
+}
+
+/*
+The indicator handles both the box and the checkmark.
+The box cannot be on the container since the adjacent sibling selector is needed
+and there is not a parent CSS selector.
+*/
+.sterling-checkbox .indicator {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 20px;
+  position: relative;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  width: 20px;
+  pointer-events: none;
+}
+
+.sterling-checkbox input:checked + .indicator {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+}
+
+.sterling-checkbox:not(.disabled):hover .indicator {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+}
+
+.sterling-checkbox input:focus-visible + .indicator {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+/*
+The checkmark is a rotated L centered in the box.
+*/
+.sterling-checkbox .indicator::after {
+  border-color: var(--stsv-input__color);
+  border-style: solid;
+  border-width: 0 3px 3px 0;
+  box-sizing: border-box;
+  content: '';
+  height: 14px;
+  left: 50%;
+  position: absolute;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  transform-origin: center;
+  transition:
+    border-color 250ms,
+    opacity 150ms;
+  width: 7px;
+  opacity: 0;
+}
+
+.sterling-checkbox input:checked + .indicator::after {
+  opacity: 1;
+}
+
+.sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
+  border-color: var(--stsv-input__color--hover);
+}
+
+.sterling-checkbox > label {
+  color: var(--stsv-common__color);
+  transition: color 250ms;
+  font: inherit;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-checkbox .indicator,
+  .sterling-checkbox .indicator::after,
+  .sterling-checkbox .container::after,
+  .sterling-checkbox > label {
+    transition: none;
+  }
+}

package/css/sterling/Checkbox.colorful.css

@@ -0,0 +1,17 @@
+.sterling-checkbox.colorful .indicator {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+}
+
+.sterling-checkbox.colorful:not(.disabled):hover .indicator {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+.sterling-checkbox.colorful .indicator::after {
+  border-color: var(--stsv-input--colorful__color);
+}
+
+.sterling-checkbox.colorful:not(.disabled):hover input:checked + .indicator::after {
+  border-color: var(--stsv-input--colorful__color--hover);
+}

package/css/sterling/Checkbox.css

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

package/css/sterling/Checkbox.disabled.css

@@ -0,0 +1,28 @@
+.sterling-checkbox.disabled,
+.sterling-checkbox.disabled input {
+  cursor: not-allowed;
+}
+
+.sterling-checkbox .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;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-checkbox.disabled .container::after {
+  opacity: 1;
+}

package/css/sterling/Dialog.base.css

@@ -0,0 +1,114 @@
+.sterling-dialog {
+  padding: 0;
+  border: none;
+  background: none;
+  overflow: visible;
+}
+
+.sterling-dialog::backdrop {
+  backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.3);
+  transition: opacity 250ms;
+  opacity: 0;
+}
+
+.sterling-dialog.open::backdrop {
+  opacity: 1;
+}
+
+.sterling-dialog.closing::backdrop {
+  opacity: 0;
+}
+
+.sterling-dialog > form > .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-sizing: border-box;
+  color: var(--stsv-common__color);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto auto;
+  justify-content: stretch;
+  justify-items: stretch;
+  align-items: stretch;
+  transition: opacity 250ms;
+  opacity: 0;
+}
+
+.sterling-dialog.open > form > .content {
+  opacity: 1;
+}
+
+.sterling-dialog.closing > form > .content {
+  opacity: 0;
+}
+
+.sterling-dialog > form > .content > .header {
+  background-color: var(--stsv-common__background-color--secondary);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr;
+  justify-items: stretch;
+  align-items: center;
+  padding: 0.25em 0.5em;
+  column-gap: 1em;
+}
+
+.sterling-dialog > form > .content > .header > .title {
+  font-size: 1.4em;
+}
+
+.sterling-dialog > form > .content > .header > .close {
+  justify-self: flex-end;
+}
+
+.sterling-dialog > form > .content > .header > .close .close-x {
+  width: 1em;
+  height: 1em;
+  position: relative;
+}
+
+.sterling-dialog > form > .content > .header > .close .close-x::before,
+.sterling-dialog > form > .content > .header > .close .close-x::after {
+  content: '';
+  position: absolute;
+  width: 0.75em;
+  height: 0.125em;
+  background-color: currentColor;
+  top: 0.45em;
+}
+
+.sterling-dialog > form > .content > .header > .close .close-x::before {
+  transform: rotate(45deg);
+  left: 0.125em;
+}
+
+.sterling-dialog > form > .content > .header > .close .close-x::after {
+  transform: rotate(-45deg);
+  right: 0.125em;
+}
+
+.sterling-dialog > form > .content > .body {
+  padding: 1em;
+}
+
+.sterling-dialog > form > .content > .separator {
+  background-color: var(--stsv-common__background-color--secondary);
+  height: 2px;
+  margin: 0 0.25em;
+}
+
+.sterling-dialog > form > .content > .footer {
+  padding: 0.5em 1em;
+  gap: 5px;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-dialog::backdrop,
+  .sterling-dialog > form > .content {
+    transition: none;
+  }
+}

package/css/sterling/Dialog.css

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

package/css/sterling/Dropdown.base.css

@@ -0,0 +1,105 @@
+.sterling-dropdown {
+  align-content: stretch;
+  align-items: stretch;
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 2px;
+  color: var(--stsv-input__color);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-dropdown:hover {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-dropdown: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-dropdown > .value {
+  overflow: hidden;
+}
+
+.sterling-dropdown .button {
+  align-self: center;
+  cursor: pointer;
+}
+
+.sterling-dropdown .chevron {
+  display: block;
+  position: relative;
+  border: none;
+  background: none;
+  margin: 0;
+  height: 100%;
+  min-width: 2em;
+  min-height: 2em;
+}
+
+.sterling-dropdown .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-dropdown-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);
+  color: var(--stsv-common__color);
+  padding: 0.25em;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-dropdown,
+  .sterling-dropdown::after {
+    transition: none;
+  }
+}