@geoffcox/sterling-svelte-themes 1.0.3 → 1.0.5

package/README.md

@@ -2,6 +2,8 @@
 
 A modern theme for the sterling-svelte component library.
 
+To learn how to use this theme, please see the [Sterling Theme](https://geoffcox.github.io/docs/sterling-svelte/topics/theme") documentation.
+
 ## Installation
 
 ```

package/css/sterling/Dropdown.base.css

@@ -40,7 +40,8 @@
   overflow: hidden;
 }
 
-.sterling-dropdown .button {
+.sterling-dropdown .button,
+.sterling-dropdown .icon {
   align-self: center;
   cursor: pointer;
 }
@@ -82,7 +83,8 @@
   transform-origin: 50% 50%;
 }
 
-.sterling-dropdown-popup-content {
+.sterling-dropdown-popup-content,
+.sterling-dropdown-content {
   background-color: var(--stsv-common__background-color);
   border-color: var(--stsv-common__border-color);
   border-radius: 0;

package/css/sterling/MenuItem.css

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

package/css/sterling/{MenuItemDisplay.base.css → MenuItem.defaultItem.css}

@@ -1,3 +1,4 @@
+.sterling-menu-item .default-item,
 .sterling-menu-item-display {
   align-items: center;
   justify-items: flex-start;
@@ -8,24 +9,23 @@
   position: relative;
 }
 
+.sterling-menu-item .default-item .check,
 .sterling-menu-item-display .check {
   box-sizing: border-box;
   pointer-events: none;
   width: 20px;
   height: 20px;
   position: relative;
-  transition:
-    background-color 250ms,
-    color 250ms,
-    border-color 250ms;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
 }
 
+.sterling-menu-item .default-item .check.checkmark.checked::after,
 .sterling-menu-item-display .check.checkmark.checked::after {
   border-color: currentColor;
   border-style: solid;
   border-width: 0 0.2em 0.2em 0;
   box-sizing: border-box;
-  content: '';
+  content: "";
   height: 0.8em;
   left: 45%;
   position: absolute;
@@ -36,10 +36,11 @@
   width: 0.4em;
 }
 
+.sterling-menu-item .default-item .check.bullet.checked::after,
 .sterling-menu-item-display .check.bullet.checked::after {
   background-color: currentColor;
   border-radius: 10000px;
-  content: '';
+  content: "";
   height: 0.5em;
   left: 45%;
   position: absolute;
@@ -49,11 +50,13 @@
   width: 0.5em;
 }
 
+.sterling-menu-item .default-item .shortcut,
 .sterling-menu-item-display .shortcut {
   font-size: 0.8em;
   color: var(--stsv-common__color--secondary);
 }
 
+.sterling-menu-item .default-item .chevron,
 .sterling-menu-item-display .chevron {
   position: relative;
   border: none;
@@ -63,9 +66,10 @@
   transform-origin: 50% 50%;
 }
 
+.sterling-menu-item .default-item .chevron.has-children::after,
 .sterling-menu-item-display .chevron.has-children::after {
   position: absolute;
-  content: '';
+  content: "";
   top: 50%;
   left: 50%;
   width: 7px;
@@ -76,8 +80,11 @@
 }
 
 @media (prefers-reduced-motion) {
+  .sterling-menu-item .default-item::after,
   .sterling-menu-item-display::after,
+  .sterling-menu-item .default-item .check,
   .sterling-menu-item-display .check,
+  .sterling-menu-item .default-item .check::after,
   .sterling-menu-item-display .check::after {
     transition: none;
   }

package/css/sterling/Pagination.base.css

@@ -0,0 +1,18 @@
+.sterling-pagination {
+  box-sizing: border-box;
+  column-gap: 3px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-self: center;
+  place-content: center;
+  place-items: stretch;
+  width: min-content;
+  overscroll-behavior: contain;
+}
+
+.sterling-pagination .page-number {
+  display: grid;
+  place-items: stretch;
+  place-content: stretch;
+  min-width: calc(var(--page-number-width, 1ch) + 1em);
+}

package/css/sterling/Pagination.button.css

@@ -0,0 +1,60 @@
+.sterling-pagination button {
+  align-content: center;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  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;
+  outline: none;
+  padding: 0.5em 1em;
+  padding: 0;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sterling-pagination button:not(:disabled):hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: transparent;
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-pagination button:not(:disabled):active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: transparent;
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-pagination button:not(:disabled):focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+}
+
+.sterling-pagination button:disabled {
+  cursor: not-allowed;
+  position: relative;
+  pointer-events: none;
+  color: var(--stsv-common__color--faint);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-pagination button {
+    transition: none;
+  }
+}

package/css/sterling/Pagination.css

@@ -0,0 +1,3 @@
+@import url('./Pagination.base.css');
+@import url('./Pagination.button.css');
+@import url('./Pagination.input.css');

package/css/sterling/Pagination.input.css

@@ -0,0 +1,50 @@
+.sterling-pagination input {
+  appearance: none;
+  background-color: var(--stsv-input__background-color);
+  border-color: transparent;
+  border-bottom-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;
+  height: 100%;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  text-align: center;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  width: 100%;
+  min-width: calc(var(--page-number-width, 1ch) + 1em);
+}
+
+.sterling-pagination input:not(:disabled) {
+  background-color: var(--stsv-input__background-color--hover);
+  border-bottom-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-pagination input:focus,
+.sterling-pagination input:focus {
+  background-color: var(--stsv-input__background-color--focus);
+  border-bottom-color: var(--stsv-input__border-color--focus);
+  color: var(--stsv-input__color--focus);
+}
+
+.sterling-pagination input:focus-visible {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+  outline: none;
+}
+@media (prefers-reduced-motion) {
+  .sterling-pagination input {
+    transition: none;
+  }
+}

package/css/sterling/Select.base.css

@@ -78,7 +78,8 @@
   transform-origin: 50% 50%;
 }
 
-.sterling-select-popup-content {
+.sterling-select-popup-content,
+.sterling-select-content {
   background-color: var(--stsv-common__background-color);
   border-color: var(--stsv-common__border-color);
   border-radius: 0;

package/css/sterling/light-dark.css

@@ -0,0 +1,152 @@
+/*
+* The Sterling Theme CSS variables supporting light-dark() automatically.
+*
+*/
+
+:root {
+    color-scheme: light dark;
+}
+
+:root,
+.sterling-theme {
+  /* ----- common ----- */
+
+  --stsv-common__background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 15%));
+  --stsv-common__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 92%));
+  --stsv-common__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+
+  /* ----- common outline ----- */
+
+  --stsv-common__outline-color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+  --stsv-common__outline-offset: 0;
+  --stsv-common__outline-style: solid;
+  --stsv-common__outline-width: 2px;
+
+  /* ----- common disabled ----- */
+
+  --stsv-common--disabled__stripe-color: light-dark(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0.2));
+  --stsv-common--disabled__stripe-color--alt: light-dark(hsla(0, 0%, 100%, 0.2), hsla(0, 0%, 100%, 0.2));
+  --stsv-common--disabled__stripe-angle: 135deg;
+  --stsv-common--disabled__stripe-width: 3px;
+
+  /* ----- common drop shadows ----- */
+
+  --stsv-common__box-shadow__color: light-dark(rgba(0, 0, 0, 0.4), gba(128, 128, 128, 0.7));
+  --stsv-common__box-shadow__color--inset: light-dark(rgba(0, 0, 0, 0.45), gba(128, 128, 128, 0.7));
+  --stsv-common__box-shadow: 2px 2px 4px 0px var(--stsv-common__box-shadow__color);
+  --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px var(--stsv-common__box-shadow__color--inset);
+
+  /* ----- common reduced emphasis ----- */
+
+  --stsv-common__background-color--secondary: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 20%));
+  --stsv-common__color--secondary: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 60%));
+  --stsv-common__background-color--subtle: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 15%));
+  --stsv-common__color--subtle: light-dark(hsl(0, 0%, 75%), hsl(0, 0%, 45%));
+  --stsv-common__background-color--faint: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 12%));
+  --stsv-common__color--faint: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 30%));
+
+  /* ----- common colors ----- */
+
+  --stsv-common__background-color--info: light-dark(hsl(200, 100%, 90%), hsl(200, 100%, 25%));
+  --stsv-common__border-color--info: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 80%));
+  --stsv-common__color--info: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 80%));
+  --stsv-common__background-color--success: light-dark(hsl(146, 100%, 90%), hsl(146, 100%, 25%));
+  --stsv-common__border-color--success: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 80%));
+  --stsv-common__color--success: light-dark(hsl(146, 80%, 25%), hsl(146, 100%, 80%));
+  --stsv-common__background-color--warning: light-dark(hsl(45, 100%, 80%), hsl(45, 100%, 25%));
+  --stsv-common__border-color--warning: light-dark(hsl(45, 100%, 45%), hsl(45, 100%, 80%));
+  --stsv-common__color--warning: light-dark(hsl(45, 100%, 25%), hsl(45, 100%, 80%));
+  --stsv-common__background-color--error: light-dark(hsl(0, 100%, 90%), hsl(0, 100%, 25%));
+  --stsv-common__border-color--error: light-dark(hsl(0, 100%, 40%), hsl(0, 100%, 80%));
+  --stsv-common__color--error: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 80%));
+
+  /* ----- button ----- */
+
+  --stsv-button__background-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
+  --stsv-button__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 80%));
+  --stsv-button__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
+
+  --stsv-button__background-color--hover: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
+  --stsv-button__border-color--hover: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 80%));
+  --stsv-button__color--hover: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
+
+  --stsv-button__background-color--focus: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
+  --stsv-button__border-color--focus: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 80%));
+  --stsv-button__color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
+
+  --stsv-button__background-color--active: light-dark(hsl(0, 0%, 75%), hsl(0, 0%, 45%));
+  --stsv-button__border-color--active: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 10%));
+  --stsv-button__color--active: light-dark(hsl(0, 0%, 12%), hsl(0, 0%, 15%));
+
+  /* ----- button colors ----- */
+
+  --stsv-button__background-color--blue: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 10%));
+  --stsv-button__border-color--blue: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
+  --stsv-button__color--blue: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
+  --stsv-button__background-color--blue-hover: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
+  --stsv-button__border-color--blue-hover: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
+  --stsv-button__color--blue-hover: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
+  --stsv-button__background-color--blue-focus: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
+  --stsv-button__border-color--blue-focus: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
+  --stsv-button__color--blue-focus: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
+  --stsv-button__background-color--blue-active: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 30%));
+  --stsv-button__border-color--blue-active: light-dark(hsl(200, 100%, 60%), hsl(200, 100%, 10%));
+  --stsv-button__color--blue-active: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 15%));
+
+  --stsv-button__background-color--green: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 10%));
+  --stsv-button__border-color--green: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
+  --stsv-button__color--green: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
+  --stsv-button__background-color--green-hover: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
+  --stsv-button__border-color--green-hover: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
+  --stsv-button__color--green-hover: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
+  --stsv-button__background-color--green-focus: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
+  --stsv-button__border-color--green-focus: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
+  --stsv-button__color--green-focus: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
+  --stsv-button__background-color--green-active: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 25%));
+  --stsv-button__border-color--green-active: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 10%));
+  --stsv-button__color--green-active: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 15%));
+
+  --stsv-button__background-color--orange: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 10%));
+  --stsv-button__border-color--orange: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
+  --stsv-button__color--orange: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
+  --stsv-button__background-color--orange-hover: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
+  --stsv-button__border-color--orange-hover: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
+  --stsv-button__color--orange-hover: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
+  --stsv-button__background-color--orange-focus: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
+  --stsv-button__border-color--orange-focus: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
+  --stsv-button__color--orange-focus: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
+  --stsv-button__background-color--orange-active: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 30%));
+  --stsv-button__border-color--orange-active: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 10%));
+  --stsv-button__color--orange-active: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 15%));
+
+  --stsv-button__background-color--red: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 10%));
+  --stsv-button__border-color--red: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
+  --stsv-button__color--red: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
+  --stsv-button__background-color--red-hover: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
+  --stsv-button__border-color--red-hover: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
+  --stsv-button__color--red-hover: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
+  --stsv-button__background-color--red-focus: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
+  --stsv-button__border-color--red-focus: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
+  --stsv-button__color--red-focus: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
+  --stsv-button__background-color--red-active: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 25%));
+  --stsv-button__border-color--red-active: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 10%));
+  --stsv-button__color--red-active: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 15%));
+
+  /* ----- input ----- */
+
+  --stsv-input__background-color: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
+  --stsv-input__border-color: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 92%));
+  --stsv-input__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+
+  --stsv-input__background-color--hover: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 25%));
+  --stsv-input__border-color--hover: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 96%));
+  --stsv-input__color--hover: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+
+  --stsv-input__background-color--focus: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 25%));
+  --stsv-input__border-color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+  --stsv-input__color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+
+  --stsv-input__background-color--selected: light-dark(hsl(0, 0%, 85%), hsl(0, 0%, 45%));
+  --stsv-input__border-color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 98%));
+  --stsv-input__color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
+}

package/css/sterling-light-dark.css

@@ -0,0 +1,31 @@
+@import url("./sterling/light-dark.css");
+
+@import url("./sterling/Button.css");
+@import url("./sterling/Callout.css");
+@import url("./sterling/Checkbox.css");
+@import url("./sterling/Dialog.css");
+@import url("./sterling/Dropdown.css");
+@import url("./sterling/Input.css");
+@import url("./sterling/Label.css");
+@import url("./sterling/Link.css");
+@import url("./sterling/List.css");
+@import url("./sterling/ListItem.css");
+@import url("./sterling/Menu.css");
+@import url("./sterling/MenuBar.css");
+@import url("./sterling/MenuButton.css");
+@import url("./sterling/MenuItem.css");
+@import url("./sterling/MenuSeparator.css");
+@import url("./sterling/Pagination.css");
+@import url("./sterling/Popover.css");
+@import url("./sterling/Progress.css");
+@import url("./sterling/Radio.css");
+@import url("./sterling/Select.css");
+@import url("./sterling/Slider.css");
+@import url("./sterling/Switch.css");
+@import url("./sterling/Tab.css");
+@import url("./sterling/TabList.css");
+@import url("./sterling/TextArea.css");
+@import url("./sterling/Tooltip.css");
+@import url("./sterling/Tree.css");
+@import url("./sterling/TreeChevron.css");
+@import url("./sterling/TreeItem.css");

package/css/sterling.css

@@ -15,8 +15,8 @@
 @import url("./sterling/MenuBar.css");
 @import url("./sterling/MenuButton.css");
 @import url("./sterling/MenuItem.css");
-@import url("./sterling/MenuItemDisplay.css");
 @import url("./sterling/MenuSeparator.css");
+@import url("./sterling/Pagination.css");
 @import url("./sterling/Popover.css");
 @import url("./sterling/Progress.css");
 @import url("./sterling/Radio.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte-themes",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "author": "Geoff Cox",
   "description": "A modern theme for the sterling-svelte component library.",
   "license": "MIT",
@@ -28,6 +28,7 @@
   },
   "exports": {
     "./sterling.css": "./css/sterling.css",
+    "./sterling-light-dark.css": "./css/sterling-light-dark.css",
     "./sterling/*.css": "./css/sterling/*.css"
   },
   "sideEffects": [

package/css/sterling/MenuItemDisplay.css

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