ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/DS1/2-core/ds-card.ts

@@ -0,0 +1,137 @@
+// ds-card.ts
+// Card component for displaying content in a contained box
+
+import { LitElement, html, css } from "lit";
+
+export class Card extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    elevation: { type: Number, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    padding: { type: String, reflect: true },
+  };
+
+  declare variant: "default" | "outlined" | "elevated" | "filled";
+  declare elevation: number;
+  declare interactive: boolean;
+  declare disabled: boolean;
+  declare padding: "none" | "small" | "medium" | "large";
+
+  constructor() {
+    super();
+    this.variant = "default";
+    this.elevation = 1;
+    this.interactive = false;
+    this.disabled = false;
+    this.padding = "medium";
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+    }
+
+    :host([variant="outlined"]) {
+      background-color: transparent;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    }
+
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+    }
+
+    :host([elevation="0"]) {
+      box-shadow: none;
+    }
+
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
+      padding: 0;
+    }
+
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
+    }
+
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
+    }
+
+    .card-content {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("ds-card", Card);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card": Card;
+  }
+}

package/DS1/2-core/ds-cycle.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import {
   translate,
   currentLanguage,
@@ -13,6 +13,7 @@ import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
 import "./ds-text";
+import styles from "./styles/ds-cycle.css?inline";
 
 // Accent color utilities
 const saveAccentColor = (color: string) => {
@@ -20,7 +21,7 @@ const saveAccentColor = (color: string) => {
 };
 
 const getAccentColor = (): string => {
-  return localStorage.getItem("accentColor") || "--blue"; // Default color if none set
+  return localStorage.getItem("accentColor") || "--sharp-blue"; // Default color if none set
 };
 
 const applyAccentColor = () => {
@@ -55,7 +56,6 @@ export class Cycle extends LitElement {
     return {
       type: { type: String },
       values: { type: Array },
-      label: { type: String },
       currentValue: { type: String, state: true }, // Make this a private state property
       translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
       disabled: { type: Boolean, state: true },
@@ -63,24 +63,12 @@ export class Cycle extends LitElement {
     };
   }
 
-  static styles = css`
-    .cycle-container {
-      display: flex;
-      justify-content: space-between;
-      gap: var(--025);
-      width: 100%;
-    }
-
-    .cycle-label {
-      color: var(--text-color-primary);
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   // Add runtime properties using the any type
   // These are just for TypeScript and don't create shadowing fields
   declare type: string;
   declare values: string[];
-  declare label: string;
   declare currentValue: string;
   declare translationsReady: boolean;
   declare disabled: boolean;
@@ -102,7 +90,6 @@ export class Cycle extends LitElement {
     // Initialize properties with default values
     this.type = "";
     this.values = [];
-    this.label = "";
     this.currentValue = "";
     this.translationsReady = false;
     this.disabled = false;
@@ -154,9 +141,6 @@ export class Cycle extends LitElement {
       const availableLanguages = getAvailableLanguagesSync();
       this.values = availableLanguages;
       this.currentValue = currentLanguage.value;
-
-      // Set label
-      this.label = this.getLabel();
     } else if (this.type === "theme") {
       // Set up theme cycling
       this.values = ["light", "dark"];
@@ -164,18 +148,15 @@ export class Cycle extends LitElement {
       // Set initial value based on current theme
       const currentThemeValue = currentTheme.get();
       this.currentValue = currentThemeValue;
-
-      // Set label
-      this.label = this.getLabel();
     } else if (this.type === "accent-color") {
       // Set up accent color cycling
       this.values = [
-        "--light-green",
-        "--green",
-        "--light-blue",
-        "--blue",
+        "--apple-green",
+        "--every-green",
+        "--zenith-blue",
+        "--sharp-blue",
         "--pink",
-        "--red",
+        "--tuned-red",
         "--orange",
         "--yellow",
       ];
@@ -186,9 +167,6 @@ export class Cycle extends LitElement {
 
       // Apply the accent color to ensure it's active
       applyAccentColor();
-
-      // Set label
-      this.label = this.getLabel();
     } else if (this.type === "notes-style-medium") {
       // Set up notes style medium cycling
       this.values = ["default", "big", "gallery"];
@@ -200,9 +178,6 @@ export class Cycle extends LitElement {
       // Check if this should be disabled based on note behavior
       const currentPageStyle = getPageStyle();
       this.disabled = currentPageStyle === "note";
-
-      // Set label
-      this.label = this.getLabel();
     } else if (this.type === "page-style") {
       // Set up page style cycling
       this.values = ["note", "page"];
@@ -210,18 +185,12 @@ export class Cycle extends LitElement {
       // Set initial value based on current page style
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-
-      // Set label
-      this.label = this.getLabel();
     } else if (this.type === "icon-only") {
       // Set up icon-only cycling (no label)
       this.values = ["note", "page"];
 
       // Set initial value
       this.currentValue = this.values[0];
-
-      // No label for icon-only type
-      this.label = "";
     }
 
     // Request update to re-render with new values
@@ -255,16 +224,10 @@ export class Cycle extends LitElement {
       // Get current language
       const currentLang = currentLanguage.value;
       this.currentValue = currentLang;
-
-      // Update label
-      this.label = this.getLabel();
     } else if (this.type === "theme") {
       // Get current theme
       const currentThemeValue = currentTheme.get();
       this.currentValue = currentThemeValue;
-
-      // Update label
-      this.label = this.getLabel();
     } else if (this.type === "accent-color") {
       // Get current accent color
       const currentAccentColor = getAccentColor();
@@ -272,9 +235,6 @@ export class Cycle extends LitElement {
 
       // Apply the accent color to ensure it's active
       applyAccentColor();
-
-      // Update label
-      this.label = this.getLabel();
     } else if (this.type === "notes-style-medium") {
       // Get current notes style medium
       const currentNotesStyle = getNotesStyleMedium();
@@ -283,23 +243,14 @@ export class Cycle extends LitElement {
       // Check if this should be disabled based on note behavior
       const currentPageStyle = getPageStyle();
       this.disabled = currentPageStyle === "note";
-
-      // Update label
-      this.label = this.getLabel();
     } else if (this.type === "page-style") {
       // Get current page style
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-
-      // Update label
-      this.label = this.getLabel();
     } else if (this.type === "icon-only") {
       // Get current page style for icon-only
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-
-      // Update label
-      this.label = "";
     }
 
     this.requestUpdate();
@@ -469,9 +420,6 @@ export class Cycle extends LitElement {
       // Save preferences
       savePreferences({ pageStyle: newIconOnlyValue });
 
-      // No label update for icon-only type
-      this.label = "";
-
       // Dispatch page style change event
       window.dispatchEvent(
         new CustomEvent("page-style-changed", {
@@ -480,9 +428,6 @@ export class Cycle extends LitElement {
       );
     }
 
-    // Update label
-    this.label = this.getLabel();
-
     // Request update to re-render
     this.requestUpdate();
   }
@@ -495,8 +440,8 @@ export class Cycle extends LitElement {
     } else if (this.type === "theme") {
       // Try to get translated theme name
       if (this.translationsReady) {
-        const translatedName = translate(`themes.${value}`);
-        if (translatedName && translatedName !== `themes.${value}`) {
+        const translatedName = translate(value);
+        if (translatedName && translatedName !== value) {
           return translatedName;
         }
       }
@@ -512,10 +457,10 @@ export class Cycle extends LitElement {
     } else if (this.type === "page-style") {
       // Return translated text for note behavior
       if (this.translationsReady) {
-        const translatedText = translate(value === "note" ? "note" : "page");
+        const translatedText = translate(value === "note" ? "Note" : "Page");
         if (
           translatedText &&
-          translatedText !== (value === "note" ? "note" : "page")
+          translatedText !== (value === "note" ? "Note" : "Page")
         ) {
           return translatedText;
         }
@@ -534,23 +479,39 @@ export class Cycle extends LitElement {
     return value;
   }
 
+  getColorKey(colorVar: string): string {
+    // Map CSS variables to translation text keys
+    const colorMap: { [key: string]: string } = {
+      "--tuned-red": "Red",
+      "--orange": "Orange",
+      "--yellow": "Yellow",
+      "--apple-green": "Apple green",
+      "--every-green": "Green",
+      "--zenith-blue": "Light blue",
+      "--sharp-blue": "Blue",
+      "--pink": "Pink",
+    };
+
+    return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+  }
+
   getColorName(colorVar: string): string {
-    // Map CSS variables to language keys
+    // Map CSS variables to translation text keys
     const colorMap: { [key: string]: string } = {
-      "--red": "red",
-      "--orange": "orange",
-      "--yellow": "yellow",
-      "--light-green": "lightGreen",
-      "--green": "green",
-      "--light-blue": "lightBlue",
-      "--blue": "blue",
-      "--pink": "pink",
+      "--tuned-red": "Red",
+      "--orange": "Orange",
+      "--yellow": "Yellow",
+      "--apple-green": "Apple green",
+      "--every-green": "Green",
+      "--zenith-blue": "Light blue",
+      "--sharp-blue": "Blue",
+      "--pink": "Pink",
     };
 
-    const languageKey = colorMap[colorVar];
-    if (languageKey && this.translationsReady) {
-      const translatedName = translate(languageKey);
-      if (translatedName && translatedName !== languageKey) {
+    const translationText = colorMap[colorVar];
+    if (translationText && this.translationsReady) {
+      const translatedName = translate(translationText);
+      if (translatedName && translatedName !== translationText) {
         return translatedName;
       }
     }
@@ -574,117 +535,54 @@ export class Cycle extends LitElement {
     return html`<span>${style}</span>`;
   }
 
-  getLabel(): string {
-    if (this.type === "language") {
-      // Try to get translated label
-      if (this.translationsReady) {
-        const translatedLabel = translate("language");
-        if (translatedLabel && translatedLabel !== "language") {
-          return translatedLabel;
-        }
-      }
-
-      // Fall back to English
-      return "Language";
-    } else if (this.type === "theme") {
-      // Try to get translated label
-      if (this.translationsReady) {
-        const translatedLabel = translate("theme");
-        if (translatedLabel && translatedLabel !== "theme") {
-          return translatedLabel;
-        }
-      }
-
-      // Fall back to English
-      return "Theme";
-    } else if (this.type === "accent-color") {
-      // Try to get translated label
-      if (this.translationsReady) {
-        const translatedLabel = translate("accentColor");
-        if (translatedLabel && translatedLabel !== "accentColor") {
-          return translatedLabel;
-        }
-      }
-
-      // Fall back to English
-      return "Accent Color";
-    } else if (this.type === "notes-style-medium") {
-      // Try to get translated label
-      if (this.translationsReady) {
-        const translatedLabel = translate("notesStyle");
-        if (translatedLabel && translatedLabel !== "notesStyle") {
-          return translatedLabel;
-        }
-      }
-
-      // Fall back to English
-      return "Notes Style";
-    } else if (this.type === "page-style") {
-      // Try to get translated label
-      if (this.translationsReady) {
-        const translatedLabel = translate("clickingItem");
-        if (translatedLabel && translatedLabel !== "clickingItem") {
-          return translatedLabel;
-        }
-      }
-
-      // Fall back to English
-      return "Clic";
-    } else if (this.type === "icon-only") {
-      // No label for icon-only type
-      return "";
-    }
-
-    return this.label;
-  }
-
   render() {
     return html`
-      <div class="cycle-container">
-        ${this.type !== "icon-only"
-          ? html`${this.type === "language"
+      <div class="cycle">
+        <ds-button
+          variant=${this.variant ||
+          (this.type === "language" || this.type === "theme"
+            ? "secondary"
+            : "primary")}
+          ?disabled=${this.disabled}
+          @click=${this.handleButtonClick}
+        >
+          ${this.type === "notes-style-medium" || this.type === "icon-only"
+            ? html`<span
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >`
+            : this.type === "language"
               ? html`<ds-text
-                  key="language"
-                  default-value="Language"
-                  class="cycle-label"
+                  default-value=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>`
               : this.type === "theme"
                 ? html`<ds-text
-                    key="theme"
-                    default-value="Theme"
-                    class="cycle-label"
+                    text=${this.currentValue}
+                    default-value=${this.currentValue}
                   ></ds-text>`
-                : html`<span class="cycle-label">${this.label}</span>`}`
+                : this.type === "accent-color"
+                  ? html`<ds-text
+                      text=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>`
+                  : this.type === "page-style"
+                    ? html`<ds-text
+                        text=${this.currentValue === "note" ? "Note" : "Page"}
+                        default-value=${this.currentValue}
+                      ></ds-text>`
+                    : html`<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
+        </ds-button>
+
+        ${this.type === "accent-color"
+          ? html`
+              <div
+                class="color-preview"
+                style="background-color: var(${this.currentValue})"
+              ></div>
+            `
           : ""}
-        <div
-          style="display: flex; align-items: center; ${this.type === "icon-only"
-            ? "justify-content: center;"
-            : ""}"
-        >
-          <ds-button
-            variant=${this.variant ||
-            (this.type === "language" || this.type === "theme"
-              ? "secondary"
-              : "primary")}
-            ?disabled=${this.disabled}
-            @click=${this.handleButtonClick}
-          >
-            ${this.type === "notes-style-medium" || this.type === "icon-only"
-              ? html`<span
-                  style="display: inline-flex; align-items: center; gap: var(--025)"
-                  >${this.getValueDisplay(this.currentValue)}</span
-                >`
-              : html`<span>${this.getValueDisplay(this.currentValue)}</span>`}
-          </ds-button>
-          ${this.type === "accent-color"
-            ? html`
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              `
-            : ""}
-        </div>
       </div>
     `;
   }

package/DS1/2-core/ds-date.ts

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-date.css?inline";
 
 /**
  * A component for displaying the current year
@@ -6,14 +7,7 @@ import { LitElement, html, css } from "lit";
  * @element ds-date
  */
 export class DateComponent extends LitElement {
-  static styles = css`
-    :host {
-      display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
-      font-size: inherit;
-      color: inherit;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     const year = new Date().getFullYear();
@@ -28,4 +22,3 @@ declare global {
     "ds-date": DateComponent;
   }
 }
-

package/DS1/2-core/ds-gap.ts

@@ -0,0 +1,38 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-gap.css?inline";
+
+/**
+ * Full-width vertical spacer.
+ *
+ * Usage:
+ * - <ds-gap unit></ds-gap>
+ * - <ds-gap double></ds-gap>
+ * - <ds-gap size="05"></ds-gap>
+ */
+export class Gap extends LitElement {
+  static properties = {
+    /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+    size: { type: String, reflect: true },
+  };
+
+  declare size: string;
+
+  constructor() {
+    super();
+    this.size = "";
+  }
+
+  static styles = unsafeCSS(styles);
+
+  render() {
+    return html``;
+  }
+}
+
+customElements.define("ds-gap", Gap);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-gap": Gap;
+  }
+}

package/DS1/2-core/ds-icon.ts

@@ -1,5 +1,6 @@
-import { LitElement, html, css, type PropertyValues } from "lit";
+import { LitElement, html, unsafeCSS, type PropertyValues } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import styles from "./styles/ds-icon.css?inline";
 
 export class Icon extends LitElement {
   static properties = {
@@ -21,46 +22,16 @@ export class Icon extends LitElement {
     this.requestUpdate("type", oldVal);
   }
 
-  static styles = css`
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--icon-color, currentColor);
-    }
-
-    path {
-      fill: var(--icon-color, currentColor);
-    }
-
-    .icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   // Load all SVGs from `x Icon/` as raw strings at build time (Vite)
   // The keys will be the file base names (without extension), lowercased.
   private static readonly iconNameToSvgMap: Record<string, string> = (() => {
     try {
       // Note: folder name contains a space, keep it exact.
-      const modules = (import.meta as any).glob("../x Icon/*.svg", {
-        as: "raw",
+      const modules = (import.meta as any).glob("../x-icon/*.svg", {
+        query: "?raw",
+        import: "default",
         eager: true,
       }) as Record<string, string>;