@geoffcox/sterling-svelte-themes 1.0.0

package/css/sterling/dark-mode.css

@@ -0,0 +1,134 @@
+.dark-mode {
+  /* ----- common ----- */
+
+  --stsv-common__background-color: hsl(0, 0%, 15%);
+  --stsv-common__border-color: hsl(0, 0%, 92%);
+  --stsv-common__color: hsl(0, 0%, 100%);
+
+  --stsv-common__background-color--secondary: hsl(0, 0%, 20%);
+  --stsv-common__color--secondary: hsl(0, 0%, 60%);
+
+  --stsv-common__background-color--subtle: hsl(0, 0%, 15%);
+  --stsv-common__color--subtle: hsl(0, 0%, 45%);
+
+  --stsv-common__background-color--faint: hsl(0, 0%, 12%);
+  --stsv-common__color--faint: hsl(0, 0%, 30%);
+
+  --stsv-common__outline-color: hsl(0, 0%, 100%);
+  --stsv-common__outline-offset: 0;
+  --stsv-common__outline-style: solid;
+  --stsv-common__outline-width: 2px;
+
+  --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
+  --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
+  --stsv-common--disabled__stripe-angle: 135deg;
+  --stsv-common--disabled__stripe-width: 3px;
+
+  --stsv-common__box-shadow: 2px 2px 4px 0px rgba(128, 128, 128, 0.7);
+  --stsv-common__box-shadow--inset: 1px 1px 2px rgba(128, 128, 128, 0.7);
+
+  /* ----- common, colorful ----- */
+
+  --stsv-common--colorful__background-color: hsl(204, 100%, 12%);
+  --stsv-common--colorful__border-color: hsl(204, 100%, 85%);
+  --stsv-common--colorful__color: hsl(204, 100%, 92%);
+
+  --stsv-common--colorful__background-color--secondary: hsl(204, 100%, 20%);
+  --stsv-common--colorful__color--secondary: hsl(204, 90%, 75%);
+
+  --stsv-common--colorful__background-color--subtle: hsl(204, 100%, 15%);
+  --stsv-common--colorful__color--subtle: hsl(204, 80%, 45%);
+
+  --stsv-common--colorful__background-color--faint: hsl(204, 100%, 12%);
+  --stsv-common--colorful__color--faint: hsl(204, 100%, 20%);
+
+  /* ----- button ----- */
+
+  --stsv-button__background-color: hsl(0, 0%, 30%);
+  --stsv-button__border-color: hsl(0, 0%, 92%);
+  --stsv-button__color: hsl(0, 0%, 100%);
+
+  --stsv-button__background-color--hover: hsl(0, 0%, 45%);
+  --stsv-button__border-color--hover: hsl(0, 0%, 96%);
+  --stsv-button__color--hover: hsl(0, 0%, 100%);
+
+  --stsv-button__background-color--focus: hsl(0, 0%, 45%);
+  --stsv-button__border-color--focus: hsl(0, 0%, 100%);
+  --stsv-button__color--focus: hsl(0, 0%, 100%);
+
+  --stsv-button__background-color--active: hsl(0, 0%, 60%);
+  --stsv-button__border-color--active: hsl(0, 0%, 98%);
+  --stsv-button__color--active: hsl(0, 0%, 98%);
+
+  /* ----- button, colorful ----- */
+
+  --stsv-button--colorful__background-color: hsl(204, 80%, 45%);
+  --stsv-button--colorful__border-color: hsl(204, 100%, 20%);
+  --stsv-button--colorful__color: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--hover: hsl(204, 80%, 60%);
+  --stsv-button--colorful__border-color--hover: hsl(204, 80%, 30%);
+  --stsv-button--colorful__color--hover: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--focus: hsl(204, 80%, 60%);
+  --stsv-button--colorful__border-color--focus: hsl(204, 80%, 30%);
+  --stsv-button--colorful__color--focus: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--active: hsl(204, 90%, 75%);
+  --stsv-button--colorful__border-color--active: hsl(204, 80%, 45%);
+  --stsv-button--colorful__color--active: hsl(204, 100%, 100%);
+
+  /* ----- input ----- */
+
+  --stsv-input__background-color: hsl(0, 0%, 30%);
+  --stsv-input__border-color: hsl(0, 0%, 92%);
+  --stsv-input__color: hsl(0, 0%, 100%);
+
+  --stsv-input__background-color--hover: hsl(0, 0%, 15%);
+  --stsv-input__border-color--hover: hsl(0, 0%, 96%);
+  --stsv-input__color--hover: hsl(0, 0%, 100%);
+
+  --stsv-input__background-color--focus: hsl(0, 0%, 15%);
+  --stsv-input__border-color--focus: hsl(0, 0%, 100%);
+  --stsv-input__color--focus: hsl(0, 0%, 100%);
+
+  --stsv-input__background-color--selected: hsl(0, 0%, 60%);
+  --stsv-input__border-color--selected: hsl(0, 0%, 98%);
+  --stsv-input__color--selected: hsl(0, 0%, 100%);
+
+  /* ----- input, colorful ----- */
+
+  --stsv-input--colorful__background-color: hsl(204, 80%, 30%);
+  --stsv-input--colorful__border-color: hsl(204, 100%, 92%);
+  --stsv-input--colorful__color: hsl(204, 100%, 100%);
+
+  --stsv-input--colorful__background-color--hover: hsl(204, 100%, 15%);
+  --stsv-input--colorful__border-color--hover: hsl(204, 100%, 96%);
+  --stsv-input--colorful__color--hover: hsl(204, 100%, 100%);
+
+  --stsv-input--colorful__background-color--focus: hsl(204, 100%, 15%);
+  --stsv-input--colorful__border-color--focus: hsl(204, 100%, 96%);
+  --stsv-input--colorful__color--focus: hsl(204, 100%, 100%);
+
+  --stsv-input--colorful__background-color--selected: hsl(204, 80%, 60%);
+  --stsv-input--colorful__border-color--selected: hsl(204, 100%, 98%);
+  --stsv-input--colorful__color--selected: hsl(204, 100%, 100%);
+
+  /* ----- status ----- */
+
+  --stsv-status--info__background-color: hsl(198, 100%, 10%);
+  --stsv-status--info__border-color: hsl(198, 100%, 40%);
+  --stsv-status--info__color: hsl(198, 80%, 50%);
+
+  --stsv-status--success__background-color: hsl(146, 100%, 10%);
+  --stsv-status--success__border-color: hsl(146, 100%, 30%);
+  --stsv-status--success__color: hsl(146, 100%, 40%);
+
+  --stsv-status--warning__background-color: hsl(39, 100%, 10%);
+  --stsv-status--warning__border-color: hsl(39, 100%, 45%);
+  --stsv-status--warning__color: hsl(39, 100%, 50%);
+
+  --stsv-status--danger__background-color: hsl(5, 100%, 10%);
+  --stsv-status--danger__border-color: hsl(5, 100%, 40%);
+  --stsv-status--danger__color: hsl(5, 100%, 50%);
+}

package/css/sterling/light-mode.css

@@ -0,0 +1,134 @@
+.light-mode {
+  /* ----- common ----- */
+
+  --stsv-common__background-color: hsl(0, 0%, 100%);
+  --stsv-common__border-color: hsl(0, 0%, 45%);
+  --stsv-common__color: hsl(0, 0%, 15%);
+
+  --stsv-common__background-color--secondary: hsl(0, 0%, 92%);
+  --stsv-common__color--secondary: hsl(0, 0%, 45%);
+
+  --stsv-common__background-color--subtle: hsl(0, 0%, 96%);
+  --stsv-common__color--subtle: hsl(0, 0%, 75%);
+
+  --stsv-common__background-color--faint: hsl(0, 0%, 98%);
+  --stsv-common__color--faint: hsl(0, 0%, 92%);
+
+  --stsv-common__outline-color: hsl(0, 0%, 15%);
+  --stsv-common__outline-offset: 0;
+  --stsv-common__outline-style: solid;
+  --stsv-common__outline-width: 2px;
+
+  --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
+  --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
+  --stsv-common--disabled__stripe-angle: 135deg;
+  --stsv-common--disabled__stripe-width: 3px;
+
+  --stsv-common__box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.4);
+  --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px hsl(0, 0%, 45%);
+
+  /* ----- common, colorful ----- */
+
+  --stsv-common--colorful__background-color: hsl(204, 100%, 100%);
+  --stsv-common--colorful__border-color: hsl(204, 80%, 30%);
+  --stsv-common--colorful__color: hsl(204, 100%, 20%);
+
+  --stsv-common--colorful__background-color--secondary: hsl(204, 100%, 92%);
+  --stsv-common--colorful__color--secondary: hsl(204, 80%, 60%);
+
+  --stsv-common--colorful__background-color--subtle: hsl(204, 100%, 96%);
+  --stsv-common--colorful__color--subtle: hsl(204, 100%, 85%);
+
+  --stsv-common--colorful__background-color--faint: hsl(204, 100%, 98%);
+  --stsv-common--colorful__color--faint: hsl(204, 100%, 92%);
+
+  /* ----- button ----- */
+
+  --stsv-button__background-color: hsl(0, 0%, 96%);
+  --stsv-button__border-color: hsl(0, 0%, 45%);
+  --stsv-button__color: hsl(0, 0%, 15%);
+
+  --stsv-button__background-color--hover: hsl(0, 0%, 92%);
+  --stsv-button__border-color--hover: hsl(0, 0%, 30%);
+  --stsv-button__color--hover: hsl(0, 0%, 15%);
+
+  --stsv-button__background-color--focus: hsl(0, 0%, 92%);
+  --stsv-button__border-color--focus: hsl(0, 0%, 30%);
+  --stsv-button__color--focus: hsl(0, 0%, 15%);
+
+  --stsv-button__background-color--active: hsl(0, 0%, 85%);
+  --stsv-button__border-color--active: hsl(0, 0%, 20%);
+  --stsv-button__color--active: hsl(0, 0%, 12%);
+
+  /* ----- button, colorful ----- */
+
+  --stsv-button--colorful__background-color: hsl(204, 80%, 60%);
+  --stsv-button--colorful__border-color: hsl(204, 80%, 30%);
+  --stsv-button--colorful__color: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--hover: hsl(204, 90%, 75%);
+  --stsv-button--colorful__border-color--hover: hsl(204, 80%, 45%);
+  --stsv-button--colorful__color--hover: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--focus: hsl(204, 90%, 75%);
+  --stsv-button--colorful__border-color--focus: hsl(204, 80%, 45%);
+  --stsv-button--colorful__color--focus: hsl(204, 100%, 98%);
+
+  --stsv-button--colorful__background-color--active: hsl(204, 80%, 45%);
+  --stsv-button--colorful__border-color--active: hsl(204, 100%, 20%);
+  --stsv-button--colorful__color--active: hsl(204, 100%, 100%);
+
+  /* ----- input ----- */
+
+  --stsv-input__background-color: hsl(0, 0%, 98%);
+  --stsv-input__border-color: hsl(0, 0%, 60%);
+  --stsv-input__color: hsl(0, 0%, 15%);
+
+  --stsv-input__background-color--hover: hsl(0, 0%, 96%);
+  --stsv-input__border-color--hover: hsl(0, 0%, 30%);
+  --stsv-input__color--hover: hsl(0, 0%, 15%);
+
+  --stsv-input__background-color--focus: hsl(0, 0%, 92%);
+  --stsv-input__border-color--focus: hsl(0, 0%, 15%);
+  --stsv-input__color--focus: hsl(0, 0%, 15%);
+
+  --stsv-input__background-color--selected: hsl(0, 0%, 85%);
+  --stsv-input__border-color--selected: hsl(0, 0%, 15%);
+  --stsv-input__color--selected: hsl(0, 0%, 15%);
+
+  /* ----- input, colorful ----- */
+
+  --stsv-input--colorful__background-color: hsl(204, 100%, 98%);
+  --stsv-input--colorful__border-color: hsl(204, 80%, 30%);
+  --stsv-input--colorful__color: hsl(204, 100%, 15%);
+
+  --stsv-input--colorful__background-color--hover: hsl(204, 100%, 96%);
+  --stsv-input--colorful__border-color--hover: hsl(204, 80%, 45%);
+  --stsv-input--colorful__color--hover: hsl(204, 100%, 15%);
+
+  --stsv-input--colorful__background-color--focus: hsl(204, 100%, 92%);
+  --stsv-input--colorful__border-color--focus: hsl(204, 80%, 45%);
+  --stsv-input--colorful__color--focus: hsl(204, 100%, 15%);
+
+  --stsv-input--colorful__background-color--selected: hsl(204, 100%, 85%);
+  --stsv-input--colorful__border-color--selected: hsl(204, 100%, 20%);
+  --stsv-input--colorful__color--selected: hsl(204, 100%, 15%);
+
+  /* ----- status ----- */
+
+  --stsv-status--info__background-color: hsl(198, 100%, 90%);
+  --stsv-status--info__border-color: hsl(198, 100%, 40%);
+  --stsv-status--info__color: hsl(198, 100%, 40%);
+
+  --stsv-status--success__background-color: hsl(146, 100%, 90%);
+  --stsv-status--success__border-color: hsl(146, 100%, 30%);
+  --stsv-status--success__color: hsl(146, 80%, 25%);
+
+  --stsv-status--warning__background-color: hsl(39, 100%, 80%);
+  --stsv-status--warning__border-color: hsl(39, 100%, 45%);
+  --stsv-status--warning__color: hsl(39, 100%, 25%);
+
+  --stsv-status--danger__background-color: hsl(5, 100%, 90%);
+  --stsv-status--danger__border-color: hsl(5, 100%, 40%);
+  --stsv-status--danger__color: hsl(5, 80%, 40%);
+}

package/css/sterling.css

@@ -0,0 +1,32 @@
+@import url("./sterling/light-mode.css");
+@import url("./sterling/dark-mode.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/MenuItemDisplay.css");
+@import url("./sterling/MenuSeparator.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/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@geoffcox/sterling-svelte-themes",
+  "version": "1.0.0",
+  "author": "Geoff Cox",
+  "description": "A modern theme for the sterling-svelte component library.",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/GeoffCox/sterling-svelte-themes/issues"
+  },
+  "homepage": "https://github.com/GeoffCox/sterling-svelte-themes/blob/main/README.md",
+  "keywords": [
+    "svelte",
+    "svelte 5",
+    "sveltekit",
+    "design system",
+    "sterling",
+    "sterling-svelte",
+    "theme",
+    "styles",
+    "css"
+  ],
+  "type": "module",
+  "files": [
+    "css"
+  ],
+  "scripts": {
+    "build": ""
+  },
+  "exports": {
+    "./*.css": "./css/**/*.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}