@sveltia/ui 0.1.0

package/package/styles/core.scss

@@ -0,0 +1,134 @@
+@use "variables.scss";
+
+// https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
+@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
+// https://fonts.google.com/icons?icon.set=Material+Symbols
+// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+}
+
+* {
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+
+:focus {
+  z-index: 1;
+  outline-width: 0;
+}
+
+:focus-visible {
+  outline-offset: -2px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: hsl(var(--hue) 100% 50% / 25%);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--default-font-weight-bold);
+}
+
+strong {
+  font-weight: var(--default-font-weight-bold);
+}
+
+a {
+  color: var(--primary-accent-color-lighter);
+  text-decoration: none;
+}
+
+img,
+svg,
+iframe {
+  vertical-align: top;
+}
+
+button,
+input,
+textarea,
+select,
+option {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+p,
+li {
+  line-height: 1.75;
+}
+
+[role="grid"] {
+  display: table;
+  width: 100%;
+
+  .colgroup {
+    display: table-column-group;
+
+    .col {
+      display: table-column;
+    }
+  }
+}
+
+code,
+pre {
+  font-family: var(--monospace-font-family);
+}
+
+pre {
+  line-height: 1.5;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  color: inherit;
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  cursor: default;
+
+  &::backdrop {
+    background: transparent;
+  }
+}
+
+.thead[role="rowgroup"] {
+  display: table-header-group;
+}
+
+.tbody[role="rowgroup"] {
+  display: table-row-group;
+}
+
+[role="row"] {
+  display: table-row;
+}
+
+[role="columnheader"],
+[role="gridcell"] {
+  display: table-cell;
+}

package/package/styles/variables.scss

@@ -0,0 +1,113 @@
+:root {
+  // Base HSL
+  --hue: 210;
+  // Foreground
+  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
+  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
+  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
+  --danger-foreground-color: hsl(var(--danger-color));
+  // Background
+  --highlight-background-color: hsl(var(--background-color-5-hsl));
+  --content-background-color: hsl(var(--background-color-1-hsl));
+  --primary-background-color: hsl(var(--background-color-2-hsl));
+  --secondary-background-color: hsl(var(--background-color-3-hsl));
+  --ternary-background-color: hsl(var(--background-color-4-hsl));
+  --control-background-color: hsl(var(--background-color-1-hsl));
+  --disabled-background-color: hsl(var(--background-color-4-hsl));
+  --danger-background-color: hsl(var(--danger-color));
+  // Borders
+  --primary-border-color: hsl(var(--border-color-1-hsl));
+  --secondary-border-color: hsl(var(--border-color-2-hsl));
+  --control-border-color: hsl(var(--border-color-2-hsl));
+  // Shadows
+  --popup-shadow-color: hsl(var(--shadow-color) / 20%);
+  --popup-backdrop-color: hsl(var(--shadow-color) / 10%);
+  // Fonts
+  --default-font-family: "Merriweather Sans", sans-serif;
+  --default-font-size: 13px;
+  --default-font-weight-regular: 300;
+  --default-font-weight-bold: 600;
+  --monospace-font-family: "Noto Sans Mono", monospace;
+  --monospace-font-size: 13px;
+  // Controls
+  --control--small--border-width: 1px;
+  --control--small--border-radius: 2px;
+  --control--small--height: 24px;
+  --control--medium--border-width: 1px;
+  --control--medium--border-radius: 4px;
+  --control--medium--height: 32px;
+  --control--large--border-width: 1px;
+  --control--large--border-radius: 8px;
+  --control--large--height: 40px;
+  // Buttons
+  --button--small--border-radius: var(--control--small--border-radius);
+  --button--small--height: var(--control--small--height);
+  --button--medium--border-radius: var(--control--medium--border-radius);
+  --button--medium--height: var(--control--medium--height);
+  --button--large--border-radius: var(--control--large--border-radius);
+  --button--large--height: var(--control--large--height);
+  // Options & menu items
+  --option--small--border-radius: var(--control--small--border-radius);
+  --option--small--height: var(--control--small--height);
+  --option--medium--border-radius: var(--control--medium--border-radius);
+  --option--medium--height: var(--control--medium--height);
+  --option--large--border-radius: var(--control--large--border-radius);
+  --option--large--height: var(--control--large--height);
+  // Input
+  --input--small--border-radius: var(--control--small--border-radius);
+  --input--small--height: var(--control--small--height);
+  --input--medium--border-radius: var(--control--medium--border-radius);
+  --input--medium--height: var(--control--medium--height);
+  --input--large--border-radius: var(--control--large--border-radius);
+  --input--large--height: var(--control--large--height);
+  // Tab
+  --tab--small--height: var(--control--small--height);
+  --tab--medium--height: var(--control--medium--height);
+  --tab--large--height: var(--control--large--height);
+}
+
+:root[data-theme="light"] {
+  --foreground-color-1-hsl: var(--hue) 5% 0%; // highlight
+  --foreground-color-2-hsl: var(--hue) 5% 20%; // primary
+  --foreground-color-3-hsl: var(--hue) 5% 40%; // secondary
+  --foreground-color-4-hsl: var(--hue) 5% 60%; // ternary
+  --border-color-1-hsl: var(--hue) 5% 75%; // primary
+  --border-color-2-hsl: var(--hue) 5% 80%; // secondary/input
+  --background-color-1-hsl: var(--hue) 5% 100%; // content
+  --background-color-2-hsl: var(--hue) 5% 98%; // primary
+  --background-color-3-hsl: var(--hue) 5% 96%; // secondary/ternary
+  --background-color-4-hsl: var(--hue) 5% 94%; // disabled
+  --background-color-5-hsl: var(--hue) 5% 90%; // highlight
+  --shadow-color: var(--hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--hue) 80% 45%);
+  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
+  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
+  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white/inverted
+  // States
+  --danger-color: 0 68% 42%; // firebrick
+}
+
+:root[data-theme="dark"] {
+  --foreground-color-1-hsl: var(--hue) 10% 100%; // highlight
+  --foreground-color-2-hsl: var(--hue) 10% 80%; // primary
+  --foreground-color-3-hsl: var(--hue) 10% 60%; // secondary
+  --foreground-color-4-hsl: var(--hue) 10% 40%; // ternary
+  --border-color-1-hsl: var(--hue) 10% 25%; // primary
+  --border-color-2-hsl: var(--hue) 10% 20%; // secondary/input
+  --background-color-1-hsl: var(--hue) 10% 8%; // content
+  --background-color-2-hsl: var(--hue) 10% 10%; // primary
+  --background-color-3-hsl: var(--hue) 10% 12%; // secondary/ternary
+  --background-color-4-hsl: var(--hue) 10% 14%; // disabled
+  --background-color-5-hsl: var(--hue) 10% 18%; // highlight
+  --shadow-color: var(--hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
+  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
+  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
+  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white
+  // States
+  --danger-color: 0 68% 42%; // firebrick
+}