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

package/DS1/1-root/one.css

@@ -1,57 +1,76 @@
-/* version 0.2.5-alpha.8 */
+/* version 0.3.0-alpha.1 */
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@800");
+
+@font-face {
+  font-family: GT-America-Standard-Regular;
+  src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GT-America-Standard-Medium;
+  src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GT-America-Compressed-Regular;
+  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
+}
 
 input {
   padding: 0;
 }
 
 :root {
-  /* colors */
-  --black: #2a2a2a;
+  /* DS one colors */
+
+  /* Base/[color]  */
+
   --white: rgb(255 255 255);
-  --slate: #bdbdbd;
+  --light-grey: #e8e8e8;
+  --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
-  --light-green: #99ff73;
-  --green: #979441;
-  --light-blue: #ccccff;
-  --blue: #594dff;
+  --stealth: #554455;
+  --black: #2a2a2a;
+
+  /* Accent/[color]  */
+  --tuned-red: #ff5f5f;
   --pink: #f5aad1;
-  --red: #ff5f5f;
+  --sharp-blue: #594dff;
+  --zenith-blue: #ccccff;
+  --every-green: #979441;
+  --apple-green: #99ff73;
+  --chartreuse-green: #ccff4d;
+  --yellow: #eaff00;
   --orange: #fec20d;
-  --yellow: #ffff00;
-
-  /* DS1 Documentation Colors */
-  --ds1-docs-header-bg: light-dark(#f5f5f5, #232323);
-  --ds1-docs-header-border: light-dark(#e0e0e0, #000000);
-  --ds1-docs-header-text: light-dark(#2a2a2a, #f1f1f1);
-  --ds1-docs-header-text-secondary: light-dark(#666666, #cdcdcd);
-  --ds1-docs-accent-green: #72ff3d;
-  --ds1-docs-sidebar-bg: light-dark(#fafafa, #1f1f1f);
-  --ds1-docs-content-bg: light-dark(#ffffff, #171717);
-  --ds1-docs-search-bg: light-dark(#f0f0f0, #171717);
-  --ds1-docs-divider: light-dark(#e0e0e0, #000000);
+
+  --accent-color: var(--apple-green);
 
   /* 4-page component colors */
 
   /* ds-grid color */
   --grid-color: light-dark(var(--grid-color-light), var(--grid-color-dark));
-  --grid-color-light: var(--slate);
+  --grid-color-light: #1e1e1e2b;
   --grid-color-dark: var(--white);
 
-  /* ds-layout colors */
-
-  --layout-color: light-dark(
-    var(--layout-color-light),
-    var(--layout-color-dark)
-  );
-
   /* typefaces */
-  --typeface: "GT-America-Standard-Regular";
+  --typeface-regular: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
   --typeface-compressed: "GT-America-Compressed-Regular";
-  --typeface-japanese: "Noto Sans JP";
   --typeface-mono: "Iosevka";
 
+  /* language specific typefaces */
+
+  --typeface-regular-jp: "Noto Sans JP";
+  --typeface-regular-zh-hans: "Noto Sans SC";
+  --typeface-regular-zh-hant: "Noto Sans TC";
+  --typeface-regular-zh: var(--typeface-regular-zh-hant);
+
+  /* typefaces sizes and weight */
+
   --type-size-default: calc(14px * var(--sf));
   --type-size-small: calc(10px * var(--sf));
   --type-weight-default: 500;
@@ -68,27 +87,80 @@ input {
   --type-weight-book: 400;
   --type-lineheight-book: 15px;
 
+  /* ----------------------------------------------------------
+   SIZING SCALE
+   - Define a base unit ( --1 ) and derive all other sizes
+   - Larger sizes are simple multipliers (×2, ×3, ×4)
+   - Smaller sizes use fractional multipliers (0.1, 0.25, 0.8)
+   ---------------------------------------------------------- */
+
+  --01: calc(var(--1) * 0.1);
+  --025: calc(var(--1) * 0.25);
+  --05: calc(var(--1) * 0.5);
+  --08: calc(var(--1) * 0.8);
+  --1: 20px; /* SET BASE UNIT HERE FOR EXAMPLE 20px */
+  --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
+  --4: calc(var(--1) * 4);
+  --8: calc(var(--1) * 8);
+  --12: calc(var(--1) * 12);
+  --20: calc(var(--1) * 20);
+
+  /* Semantic sizing units */
+
+  --tenth: var(--01);
+  --quarter: var(--025);
+  --half: var(--05);
+  --eight-tenth: var(--08);
+  --unit: var(--1);
+  --double: var(--2);
+  --triple: var(--3);
+  --quad: var(--4);
+  --oct: var(--8);
+  --dozen: var(--12);
+  --twenty: var(--20);
+
+  /* Layouts */
+
+  /* App layout (used for app) */
+  --app-layout: 
+
+
+  /* Home layout (used for lists) */ --home-layout: calc(
+      var(--unit) * var(--sf)
+    )
+    calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--unit) * var(--sf)) calc(var(--oct) * var(--sf))
+    calc(var(--oct) * var(--sf)) calc(var(--quad) * var(--sf))
+    calc(var(--double) * var(--sf));
+  --home-layout-areas: "banner" "." "header" "." "message" "lists" "." "footer";
+
+  /* App layout */
+  --app-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf))
+    calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));
+  --app-layout-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";
+
   /* size */
-  --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));
-  --outline-stroke-mobile: calc(1px * var(--sf)) solid
-    light-dark(var(--black), var(--slate-dark));
+  --outline-stroke: 1px solid var(--slate-light);
+  --outline-stroke-mobile: 2px solid var(--sharp-blue);
   --item-width: calc(79px * var(--sf));
   --item-height: calc(19px * var(--sf));
   --margin-correction: calc(1px * var(--sf));
 
-  /* SIZING */
+  --column-width: calc(var(--quad) * var(--sf));
 
-  /* main unit */
-  --1: 20px;
-  /* bigger sizes */
-  --2: calc(var(--1) * 2);
-  --3: calc(var(--1) * 3);
-  --4: calc(var(--1) * 4);
+  --column-header-height: calc(var(--unit) * var(--sf));
+  --column-header-width: calc(var(--quad) * var(--sf));
 
-  /* smaller sizes */
-  --01: calc(var(--1) * 0.1);
-  --025: calc(var(--1) * 0.25);
-  --08: calc(var(--1) * 0.8);
+  /* ----------------------------------------------------------
+   SURFACE COLORS
+   - 
+   ---------------------------------------------------------- */
+
+  --background: light-dark(var(--white), var(--black));
+  --dialog-background: var(--background);
 
   /* button */
   --button-background-color-primary: var(--accent-color);
@@ -103,7 +175,7 @@ input {
   );
 
   /* text-color */
-  --text-color-primary: light-dark(var(--black), var(--white));
+  --text-color: light-dark(var(--black), var(--white));
   --text-color-dimmed: light-dark(var(--slate), var(--slate-light));
 
   /* icon colors */
@@ -141,24 +213,6 @@ input {
   navigation: auto;
 }
 
-@font-face {
-  font-family: GT-America-Standard-Regular;
-  src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Standard-Medium;
-  src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Compressed-Regular;
-  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -166,7 +220,6 @@ body {
 
 .matrix__board {
   position: relative;
-  top: calc(21.5px * var(--sf));
   left: calc(-20px * var(--sf));
   width: calc(240px * var(--sf));
   display: flex;
@@ -207,28 +260,22 @@ body {
   height: var(--item-height);
   margin-right: var(--margin-correction);
   margin-bottom: var(--margin-correction);
-  outline: var(--outline-stroke);
   background-color: light-dark(var(--white), var(--black));
 }
 
 .matrix__row-header {
   position: relative;
-  top: calc(0.5px * var(--sf));
+  /* top: calc(0.5px * var(--sf)); */
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(19px * var(--sf));
-  height: var(--item-height);
-  margin-right: var(--margin-correction);
-  margin-bottom: var(--margin-correction);
-  outline: var(--outline-stroke);
+  width: calc(var(--unit) * var(--sf));
+  height: calc(var(--unit) * var(--sf));
+  /* margin-right: var(--margin-correction);
+  margin-bottom: var(--margin-correction); */
   background-color: light-dark(rgb(220 241 213), var(--slate-dark));
 }
 
-.mobile .matrix__row-header {
-  outline: var(--outline-stroke-mobile);
-}
-
 .matrix__column-content {
   display: flex;
   flex-direction: column;
@@ -438,7 +485,7 @@ table {
 }
 
 tr {
-  background-color: var(--light-green);
+  background-color: var(--apple-green);
 }
 
 td {

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

@@ -1,3 +1,122 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
 
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+import styles from "./styles/ds-banner.css?inline";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Banner extends LitElement {
+  static properties = {
+    text: { type: String },
+    action: { type: String },
+    href: { type: String },
+    mailto: { type: String },
+    subject: { type: String },
+    describe: { type: String },
+    appVersion: { type: String, attribute: "app-version" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+  };
+
+  text: string = "";
+  action: string = "";
+  href: string = "";
+  mailto: string = "";
+  subject: string = "";
+  describe: string = "";
+  appVersion: string = "";
+  variant: string = "warning"; // warning, info, success, error
+  version: string = "";
+  _showVersion: boolean = false;
+
+  private _boundUpdate = () => this.requestUpdate();
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for translations and language changes to rebuild mailto URL
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+
+  static styles = unsafeCSS(styles);
+
+  private _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+
+  private _getMailtoHref(): string {
+    // If a direct href is provided, use it
+    if (this.href && this.href !== "#") return this.href;
+
+    // If mailto is provided, build internationalized URL
+    if (this.mailto) {
+      try {
+        const subject = this.subject
+          ? getText(this.subject) || this.subject
+          : "Issue report";
+        const describe = this.describe
+          ? getText(this.describe) || this.describe
+          : "Describe the issue:";
+        const appVersionLabel = this.appVersion
+          ? getText(this.appVersion) || this.appVersion
+          : "App version:";
+
+        const body = `${describe}\n\n\n${appVersionLabel} ${this.version || ""}`;
+
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        // Fallback if translations fail
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+
+    return "#";
+  }
+
+  render() {
+    const mailtoHref = this._getMailtoHref();
+
+    return html`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version
+          ? html`<ds-text default-value=${this.version}></ds-text>`
+          : html`<ds-text text=${this.text}><slot></slot></ds-text>`}
+      </div>
+      ${this.action
+        ? html`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text text=${this.action}></ds-text>
+              </a>
+            </div>
+          `
+        : ""}
+    `;
+  }
+}
+
+customElements.define("ds-banner", Banner);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-banner": Banner;
+  }
+}

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

@@ -1,8 +1,9 @@
 // ds-button.ts
 // Core button component
 
-import { LitElement, html, css, type PropertyValues } from "lit";
-import { getText, currentLanguage } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import "./ds-text";
+import styles from "./styles/ds-button.css?inline";
 
 export class Button extends LitElement {
   static properties = {
@@ -15,14 +16,12 @@ export class Button extends LitElement {
       attribute: "no-background",
     },
     blank: { type: Boolean, reflect: true },
-    notionKey: { type: String, attribute: "notion-key" },
-    key: { type: String },
+    text: { type: String },
     fallback: { type: String },
     language: { type: String },
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _notionText: { type: String, state: true },
   };
 
   // Public properties
@@ -31,8 +30,7 @@ export class Button extends LitElement {
   declare bold: boolean;
   declare "no-background": boolean;
   declare blank: boolean;
-  declare notionKey: string | null;
-  declare key: string;
+  declare text: string;
   declare fallback: string;
   declare language: string;
   declare defaultText: string;
@@ -40,7 +38,6 @@ export class Button extends LitElement {
 
   // Private state
   declare _loading: boolean;
-  declare _notionText: string | null;
 
   constructor() {
     super();
@@ -49,106 +46,23 @@ export class Button extends LitElement {
     this.bold = false;
     this["no-background"] = false;
     this.blank = false;
-    this.notionKey = null;
-    this.key = "";
+    this.text = "";
     this.fallback = "";
     this.language = "en-US";
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._notionText = null;
   }
 
-  static styles = css`
-    button {
-      max-height: calc(var(--08) * var(--scaling-factor));
-      border: none;
-      cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-    }
-
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface);
-    }
-
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    button[bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-    }
-
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
-      padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    button[no-background][bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    .loading {
-      opacity: 0.7;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();
-    this._updateText();
-
-    // Listen for language changes
-    window.addEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  _handleLanguageChange = () => {
-    this._updateText();
-  };
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("key") || changedProps.has("defaultText")) {
-      this._updateText();
-    }
-  }
-
-  /**
-   * Update text from translations (synchronous like Portfolio)
-   */
-  private _updateText() {
-    if (this.key) {
-      this._notionText = getText(this.key);
-    } else {
-      this._notionText = this.defaultText || this.fallback || null;
-    }
-    this.requestUpdate();
   }
 
   render() {
+    const hasTextProps = this.text || this.defaultText || this.fallback;
+
     return html`
       <button
         class=${this.variant}
@@ -157,7 +71,13 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._notionText ? this._notionText : html`<slot></slot>`}
+        ${hasTextProps
+          ? html`<ds-text
+              .text=${this.text}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>`
+          : html`<slot></slot>`}
       </button>
     `;
   }