@lundal/zed-css 0.0.1

package/dist/index.js

@@ -0,0 +1,25 @@
+import './style.css';
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+const Reset = "";
+const App = "";
+const Button = "";
+const Card = "";
+const CheckBox = "";
+const Column = "";
+const Dialog = "";
+const Error = "";
+const Field = "";
+const Fieldset = "";
+const Focus = "";
+const Header = "";
+const Headings = "";
+const Link = "";
+const Nav = "";
+const RadioButton = "";
+const Row = "";
+const Scrollbar = "";
+const Select = "";
+const Spinner = "";
+const TextBox = "";
+const Theme = "";

package/dist/style.css

@@ -0,0 +1,589 @@
+*,
+*::before,
+*::after,
+*::placeholder {
+  margin: 0;
+  padding: 0;
+  opacity: 1;
+  outline: none;
+  border: none;
+  box-sizing: border-box;
+  background: none;
+  font: inherit;
+  color: inherit;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+*::-moz-focus-outer,
+*::-moz-focus-inner {
+  border: none;
+}
+.z-app {
+  width: 100vw;
+  height: 100vh;
+
+  background: var(--z-background);
+  color: var(--z-text-body);
+
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.z-app > * {
+  overflow: auto;
+}
+
+.z-app--layout-3 {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "header header" "nav main";
+}
+
+.z-app--layout-3 > header {
+  grid-area: header;
+  border-bottom: 1px solid var(--z-border);
+}
+
+.z-app--layout-3 > nav {
+  grid-area: nav;
+  border-right: 1px solid var(--z-border);
+}
+
+.z-app--layout-3 > main {
+  grid-area: main;
+}
+.z-button {
+  height: 36px;
+  padding: 6px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  transition: outline-color 0.1s;
+  color: var(--z-button-text);
+  background: var(--z-button-fill);
+}
+
+.z-button:hover:not(:active) {
+  filter: brightness(1.15);
+}
+
+.z-button:focus-visible {
+  outline-color: var(--z-focus);
+}
+
+.z-button[aria-busy="true"] {
+  color: transparent;
+}
+
+.z-button[aria-busy="true"]::before {
+  display: block;
+  content: "";
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: var(--z-button-text);
+  animation: 0.5s linear infinite z-spin;
+  margin: 0 auto;
+}
+
+.z-button--icon {
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+}
+
+.z-button--primary {
+  --z-button-text: var(--z-button-primary-text);
+  --z-button-fill: var(--z-button-primary-fill);
+}
+
+.z-button--secondary {
+  --z-button-text: var(--z-button-secondary-text);
+  --z-button-fill: var(--z-button-secondary-fill);
+}
+
+.z-button--tertiary {
+  --z-button-text: var(--z-button-tertiary-text);
+  --z-button-fill: var(--z-button-tertiary-fill);
+}
+.z-card {
+  border-radius: 12px;
+  padding: 24px;
+  background: var(--z-foreground);
+  /*border: 1px solid var(--z-border);*/
+}
+.z-checkbox {
+  display: flex;
+}
+
+.z-checkbox input {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--z-input-border);
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  cursor: pointer;
+  transition: border-color 0.1s, outline-color 0.1s;
+}
+
+.z-checkbox input::after {
+  content: "";
+  display: block;
+  width: 9px;
+  height: 15px;
+  margin-top: 2px;
+  margin-left: -1px;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  transform: rotate(45deg);
+  transform-origin: bottom right;
+  transition: border-color 0.1s;
+}
+
+.z-checkbox input:checked {
+  border-color: var(--z-input-active-border);
+}
+
+.z-checkbox input:checked::after {
+  border-color: var(--z-input-active-fill);
+}
+
+.z-checkbox input:focus-visible {
+  outline-color: var(--z-focus);
+}
+
+.z-checkbox label {
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.z-checkbox:hover:not(:active) input {
+  filter: brightness(1.15);
+}
+
+.z-checkbox input[aria-invalid="true"] {
+  border-color: var(--z-input-error-border);
+}
+
+.z-checkbox input[aria-invalid="true"]:checked::after {
+  border-color: var(--z-input-error-fill);
+}
+.z-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+.z-dialog {
+  margin: 24px auto;
+  max-height: calc(100% - 48px);
+
+  border-radius: 12px;
+  padding: 24px;
+  background: var(--z-foreground);
+  border: 1px solid var(--z-border);
+
+  transition: transform 0.1s;
+  transform: scale(0);
+}
+
+.z-dialog::backdrop {
+  transition: opacity 0.1s;
+  opacity: 0;
+}
+
+.z-dialog--open {
+  transform: scale(1);
+}
+
+.z-dialog--open::backdrop {
+  opacity: 1;
+}
+.z-error {
+  display: flex;
+  gap: 6px;
+}
+
+.z-error::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 50%;
+  background: var(--z-input-error-fill);
+}
+
+.z-error-placeholder {
+  height: 24px;
+}
+.z-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.z-field label {
+  font-weight: 500;
+}
+.z-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.z-fieldset legend {
+  font-weight: 500;
+  padding-bottom: 6px;
+}
+nav,
+main,
+dialog {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: outline-color 0.1s;
+}
+
+nav:focus-visible,
+main:focus-visible,
+dialog:focus-visible {
+  outline-color: var(--z-focus);
+}
+.z-header {
+  background: var(--z-foreground);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.z-header--app {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: outline-color 0.1s;
+}
+
+.z-header--app > svg {
+  height: 36px;
+  width: 36px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.z-header--app > span {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.z-header--app:focus-visible {
+  outline-color: var(--z-focus);
+}
+
+.z-header--buttons {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+}
+.z-h1 {
+  font-size: 32px;
+}
+
+.z-h2 {
+  font-size: 24px;
+}
+
+.z-h3 {
+  font-size: 20px;
+  font-weight: 500;
+}
+.z-link {
+  color: var(--z-link);
+  font-weight: 500;
+
+  border-radius: 3px;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  transition: outline-color 0.1s;
+}
+
+.z-link:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+
+.z-link:focus-visible {
+  outline-color: var(--z-focus);
+}
+.z-nav {
+  min-width: 200px;
+  padding-bottom: 12px;
+
+  background: var(--z-foreground);
+  color: var(--z-text-fluent);
+  font-weight: 500;
+}
+
+.z-nav--header {
+  padding: 24px 24px 12px 24px;
+}
+
+.z-nav--link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 24px 12px 0;
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: outline-color 0.1s;
+}
+
+.z-nav--link > svg {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.z-nav--link::before {
+  content: "";
+  width: 3px;
+  height: 24px;
+  background: transparent;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  margin-right: 9px;
+}
+
+.z-nav--link:hover,
+.z-nav--link-active {
+  color: var(--z-text-body);
+}
+
+.z-nav--link-active.z-nav--link::before {
+  background: currentColor;
+}
+
+.z-nav--link:focus-visible {
+  outline-color: var(--z-focus);
+}
+.z-radiobutton {
+  display: flex;
+}
+
+.z-radiobutton input {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--z-input-border);
+  border-radius: 50%;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  cursor: pointer;
+  transition: border-color 0.1s, outline-color 0.1s;
+}
+
+.z-radiobutton input::after {
+  content: "";
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin: 4px;
+  border-radius: 50%;
+  transition: background-color 0.1s;
+}
+
+.z-radiobutton input:checked {
+  border-color: var(--z-input-active-border);
+}
+
+.z-radiobutton input:checked::after {
+  background: var(--z-input-active-fill);
+}
+
+.z-radiobutton input:focus-visible {
+  outline-color: var(--z-focus);
+}
+
+.z-radiobutton label {
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.z-radiobutton:hover:not(:active) input {
+  filter: brightness(1.15);
+}
+
+.z-radiobutton input[aria-invalid="true"] {
+  border-color: var(--z-input-error-border);
+}
+
+.z-radiobutton input[aria-invalid="true"]:checked::after {
+  background: var(--z-input-error-fill);
+}
+.z-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 16px;
+}
+* {
+  scrollbar-color: var(--z-border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--z-border);
+}
+
+*::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.z-select {
+  display: block;
+}
+
+.z-select {
+  width: 100%;
+  height: 36px;
+  padding: 4px 10px;
+  border: 2px solid var(--z-input-border);
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  cursor: pointer;
+  transition: border-color 0.1s, outline-color 0.1s;
+}
+
+.z-select option {
+  background: var(--z-foreground);
+}
+
+.z-select:focus-visible {
+  border-color: var(--z-input-active-border);
+}
+
+.z-select:hover {
+  /* TODO: Only border */
+  filter: brightness(1.15);
+}
+
+.z-select[aria-invalid="true"] {
+  border-color: var(--z-input-error-border);
+}
+
+.z-select[aria-invalid="true"]:focus-visible {
+  outline-color: var(--z-focus);
+}
+.z-spinner {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: var(--z-text-fluent);
+  animation: 0.5s linear infinite z-spin;
+}
+
+.z-spinner--large {
+  width: 36px;
+  height: 36px;
+}
+
+@keyframes z-spin {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+.z-textbox {
+  display: block;
+}
+
+.z-textbox {
+  width: 100%;
+  height: 36px;
+  padding: 4px 10px;
+  border: 2px solid var(--z-input-border);
+  border-radius: 6px;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
+  transition: border-color 0.1s, outline-color 0.1s;
+}
+
+.z-textbox:focus-visible {
+  border-color: var(--z-input-active-border);
+}
+
+.z-textbox:hover {
+  /* TODO: Only border */
+  filter: brightness(1.15);
+}
+
+.z-textbox[aria-invalid="true"] {
+  border-color: var(--z-input-error-border);
+}
+
+.z-textbox[aria-invalid="true"]:focus-visible {
+  outline-color: var(--z-focus);
+}
+.z-theme--light {
+  --z-background: #eee;
+  --z-foreground: #fff;
+  --z-border: #ddd;
+  --z-text-body: #2e2e2e; /* Lc 100 */
+  --z-text-fluent: #6e6e6e; /* Lc 75 */
+  --z-link: #5252ff;
+  --z-focus: #5252ff;
+  --z-button-primary-fill: #55f;
+  --z-button-primary-text: #fff;
+  --z-button-secondary-fill: #889;
+  --z-button-secondary-text: #fff;
+  --z-button-tertiary-fill: transparent;
+  --z-button-tertiary-text: #2e2e2e;
+  --z-input-border: #a1a1a1; /* Lc 50 */
+  --z-input-active-border: #7d7dff; /* Lc 60 */
+  --z-input-active-fill: #5252ff; /* Lc 75 */
+  --z-input-error-border: #ff5252; /* Lc 60 */
+  --z-input-error-fill: #cf1b1b; /* Lc 75 */
+}
+
+.z-theme--dark {
+  --z-background: #12131a;
+  --z-foreground: #1c1c25;
+  --z-border: #2c2c35;
+  --z-text-body: #e6e6e6; /* Lc 90 */
+  --z-text-fluent: #b4b4b4; /* Lc 60 */
+  --z-link: #7882ff;
+  --z-focus: #7882ff;
+  --z-button-primary-fill: #3040b0;
+  --z-button-primary-text: #e6e6e6;
+  --z-button-secondary-fill: #303448;
+  --z-button-secondary-text: #e6e6e6;
+  --z-button-tertiary-fill: transparent;
+  --z-button-tertiary-text: #e6e6e6;
+  --z-button-icon-fill: #2c2c35;
+  /* generic colors: blue, green, red, gray */
+  --z-input-border: #8f8f8f; /* Lc 40 */
+  --z-input-active-border: #6068ff; /* Lc 30 */
+  --z-input-active-fill: #7882ff; /* Lc 40 */
+  --z-input-error-border: #db3a32; /* Lc 30 */
+  --z-input-error-fill: #ff483f; /* Lc 40 */
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lundal/zed-css",
+  "version": "0.0.1",
+  "license": "LGPL-3.0-or-later",
+  "type": "module",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsc && vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "format": "prettier --write src"
+  },
+  "devDependencies": {
+    "prettier": "2",
+    "typescript": "5",
+    "vite": "4",
+    "vite-plugin-libcss": "1"
+  },
+  "dependencies": {
+    "@fontsource/inter": "5"
+  }
+}