ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/DS1/1-root/one.css

@@ -1,79 +1,93 @@
-/* version 0.2.0-alpha.3 */
+/* version 0.2.5-alpha.10 */
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
+
+@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 */
+  /* DS one colors */
+
+  /* Base/[color]  */
+
   --black: #2a2a2a;
   --white: rgb(255 255 255);
   --slate: #bdbdbd;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
-  --light-green: #99ff73;
-  --green: #979441;
-  --light-blue: #ccccff;
-  --blue: #594dff;
+
+  /* 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;
-
-  /* accent color - defaults to blue but can be changed by user */
-  --accent-color: var(--light-green);
-
-  /* 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);
+
+  /* 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-dark: var(--white);
 
   /* 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-regular-jp: "Noto Sans JP";
   --typeface-mono: "Iosevka";
-  --type-size-default: calc(14px * var(--scaling-factor));
-  --type-size-small: calc(10px * var(--scaling-factor));
+
+  --type-size-default: calc(14px * var(--sf));
+  --type-size-small: calc(10px * var(--sf));
   --type-weight-default: 500;
-  --type-lineheight-default: calc(15px * var(--scaling-factor));
-  --type-size-heading: calc(15px * var(--scaling-factor));
+  --type-lineheight-default: calc(15px * var(--sf));
+  --type-size-heading: calc(15px * var(--sf));
   --type-weight-bold: 500;
 
-  --type-size-japanese-default: calc(12px * var(--scaling-factor));
-  --type-size-japanese-heading: calc(14px * var(--scaling-factor));
-  --type-lineheight-japanese-default: calc(17px * var(--scaling-factor));
+  --type-size-japanese-default: calc(12px * var(--sf));
+  --type-size-japanese-heading: calc(14px * var(--sf));
+  --type-lineheight-japanese-default: calc(17px * var(--sf));
   --type-weight-product: var(--type-weight-bold);
   --type-weight-heading: var(--type-weight-bold);
   --type-size-book: 9px;
   --type-weight-book: 400;
   --type-lineheight-book: 15px;
 
-  /* ezo-scaling-factor */
-  --scaling-factor: var(--scaling-factor-mobile);
-  --scaling-factor-mobile: 1;
-
   /* size */
   --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));
-  --outline-stroke-mobile: calc(1px * var(--scaling-factor)) solid
+  --outline-stroke-mobile: calc(1px * var(--sf)) solid
     light-dark(var(--black), var(--slate-dark));
-  --item-width: calc(79px * var(--scaling-factor));
-  --item-height: calc(19px * var(--scaling-factor));
-  --margin-correction: calc(1px * var(--scaling-factor));
+  --item-width: calc(79px * var(--sf));
+  --item-height: calc(19px * var(--sf));
+  --margin-correction: calc(1px * var(--sf));
 
-  /* sizes */
+  /* SIZING */
 
   /* main unit */
   --1: 20px;
   /* bigger sizes */
   --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
   --4: calc(var(--1) * 4);
 
   /* smaller sizes */
@@ -81,7 +95,7 @@ input {
   --025: calc(var(--1) * 0.25);
   --08: calc(var(--1) * 0.8);
 
-  /* ezo-button */
+  /* button */
   --button-background-color-primary: var(--accent-color);
   --button-background-color-secondary: light-dark(
     var(--slate-light),
@@ -93,11 +107,11 @@ input {
     var(--slate-light)
   );
 
-  /* ezo-text-color */
+  /* text-color */
   --text-color-primary: light-dark(var(--black), var(--white));
   --text-color-dimmed: light-dark(var(--slate), var(--slate-light));
 
-  /* ezo-icon */
+  /* icon colors */
   --icon-background: light-dark(var(--slate-light), var(--slate-dark));
   --icon-color: light-dark(var(--black), var(--white));
 
@@ -132,32 +146,6 @@ input {
   navigation: auto;
 }
 
-::-webkit-scrollbar {
-  display: none;
-}
-
-html {
-  scrollbar-width: none;
-}
-
-@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;
@@ -165,15 +153,15 @@ body {
 
 .matrix__board {
   position: relative;
-  top: calc(21.5px * var(--scaling-factor));
-  left: calc(-20px * var(--scaling-factor));
+  top: calc(21.5px * var(--sf));
+  left: calc(-20px * var(--sf));
+  width: calc(240px * var(--sf));
   display: flex;
-  width: calc(240px * var(--scaling-factor));
 }
 
 .matrix__board--vertical {
   position: relative;
-  left: calc(20.5px * var(--scaling-factor));
+  left: calc(20.5px * var(--sf));
   display: flex;
   flex-direction: row;
   align-items: start;
@@ -181,8 +169,8 @@ body {
 
 .matrix__board--horizontal {
   position: relative;
-  top: calc(19.5px * var(--scaling-factor));
-  left: calc(-239.5px * var(--scaling-factor));
+  top: calc(19.5px * var(--sf));
+  left: calc(-239.5px * var(--sf));
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -212,11 +200,11 @@ body {
 
 .matrix__row-header {
   position: relative;
-  top: calc(0.5px * var(--scaling-factor));
+  top: calc(0.5px * var(--sf));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(19px * var(--scaling-factor));
+  width: calc(19px * var(--sf));
   height: var(--item-height);
   margin-right: var(--margin-correction);
   margin-bottom: var(--margin-correction);
@@ -268,13 +256,13 @@ body {
 
 .board__container {
   position: relative;
-  top: calc(0.5px * var(--scaling-factor));
+  top: calc(0.5px * var(--sf));
 }
 
 .board {
   position: relative;
-  top: calc(0.5px * var(--scaling-factor));
-  left: calc(0.5px * var(--scaling-factor));
+  top: calc(0.5px * var(--sf));
+  left: calc(0.5px * var(--sf));
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -339,14 +327,13 @@ body {
 .header {
   display: flex;
   justify-content: center;
-  width: calc(var(--item-width) * var(--scaling-factor));
-  height: calc(var(--item-height) * var(--scaling-factor));
+  width: calc(var(--item-width) * var(--sf));
+  height: calc(var(--item-height) * var(--sf));
 }
 
 .header.dragging {
-  outline: calc(var(--outline-stroke) * var(--scaling-factor)) solid
-    var(--black);
-  outline-offset: calc(var(--outline-stroke-offset) * var(--scaling-factor));
+  outline: calc(var(--outline-stroke) * var(--sf)) solid var(--black);
+  outline-offset: calc(var(--outline-stroke-offset) * var(--sf));
   background-color: var(--white);
 }
 
@@ -382,7 +369,7 @@ body {
   margin-top: 1px;
   z-index: 99;
   margin-bottom: 2px;
-  padding-left: calc(3px * var(--scaling-factor));
+  padding-left: calc(3px * var(--sf));
   color: var(--text-color-primary);
   outline: var(--outline-stroke);
   background-color: var(--accent-color);
@@ -398,7 +385,7 @@ body {
 }
 
 .item-container.mobile {
-  margin-left: calc(0.25px * var(--scaling-factor));
+  margin-left: calc(0.25px * var(--sf));
 }
 
 .group-children {
@@ -417,7 +404,7 @@ body {
   align-items: center;
   justify-content: start;
   width: var(--item-width);
-  padding-left: calc(5px * var(--scaling-factor));
+  padding-left: calc(5px * var(--sf));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -438,27 +425,9 @@ table {
 }
 
 tr {
-  background-color: var(--light-green);
+  background-color: var(--apple-green);
 }
 
 td {
   text-align: left;
 }
-
-.layout-grid {
-  margin-top: 0.5px;
-  margin-left: -0px;
-  display: grid;
-  z-index: -10;
-  grid-template-columns: repeat(19, 79px);
-  grid-template-rows: repeat(500, 19px);
-  gap: 1px;
-  row-rule: 1px solid #00000012;
-  column-rule: 1px solid #00000012;
-  outline: 1px solid #100101e7;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-}

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

@@ -0,0 +1,3 @@
+// ds-banner.ts
+// Core component
+

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

@@ -2,7 +2,7 @@
 // Core button component
 
 import { LitElement, html, css, type PropertyValues } from "lit";
-import { getText, currentLanguage } from "../utils/language";
+import { getText, currentLanguage } from "../0-face/i18n";
 
 export class Button extends LitElement {
   static properties = {
@@ -15,14 +15,13 @@ export class Button extends LitElement {
       attribute: "no-background",
     },
     blank: { type: Boolean, reflect: true },
-    notionKey: { type: String, attribute: "notion-key" },
     key: { 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 },
+    _text: { type: String, state: true },
   };
 
   // Public properties
@@ -31,7 +30,6 @@ export class Button extends LitElement {
   declare bold: boolean;
   declare "no-background": boolean;
   declare blank: boolean;
-  declare notionKey: string | null;
   declare key: string;
   declare fallback: string;
   declare language: string;
@@ -40,7 +38,7 @@ export class Button extends LitElement {
 
   // Private state
   declare _loading: boolean;
-  declare _notionText: string | null;
+  declare _text: string | null;
 
   constructor() {
     super();
@@ -49,25 +47,24 @@ export class Button extends LitElement {
     this.bold = false;
     this["no-background"] = false;
     this.blank = false;
-    this.notionKey = null;
     this.key = "";
     this.fallback = "";
     this.language = "en-US";
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._notionText = null;
+    this._text = null;
   }
 
   static styles = css`
     button {
-      max-height: calc(var(--08) * var(--scaling-factor));
+      max-height: calc(var(--08) * var(--sf));
       border: none;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
+      font-size: calc(var(--type-size-default) * var(--sf));
+      padding: 0 calc(1px * var(--sf));
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.title {
@@ -79,13 +76,13 @@ export class Button extends LitElement {
       background-color: var(--accent-color);
       color: var(--button-text-color);
       text-decoration-line: none;
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.secondary {
       background-color: var(--button-background-color-secondary);
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button[bold] {
@@ -141,9 +138,9 @@ export class Button extends LitElement {
    */
   private _updateText() {
     if (this.key) {
-      this._notionText = getText(this.key);
+      this._text = getText(this.key);
     } else {
-      this._notionText = this.defaultText || this.fallback || null;
+      this._text = this.defaultText || this.fallback || null;
     }
     this.requestUpdate();
   }
@@ -157,7 +154,7 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._notionText ? this._notionText : html`<slot></slot>`}
+        ${this._text ? this._text : html`<slot></slot>`}
       </button>
     `;
   }

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

@@ -5,13 +5,14 @@ import {
   getAvailableLanguagesSync,
   getLanguageDisplayName,
   setLanguage,
-} from "../utils/language";
-import type { LanguageCode } from "../utils/language";
-import { currentTheme, setTheme } from "../utils/theme";
-import type { ThemeType } from "../utils/theme";
-import { saveSettings } from "../utils/settings";
+} from "../0-face/i18n";
+import type { LanguageCode } from "../0-face/i18n";
+import { currentTheme, setTheme } from "../0-face/theme";
+import type { ThemeType } from "../0-face/theme";
+import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
+import "./ds-text";
 
 // Accent color utilities
 const saveAccentColor = (color: string) => {
@@ -19,7 +20,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 = () => {
@@ -169,12 +170,12 @@ export class Cycle extends LitElement {
     } 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",
       ];
@@ -185,9 +186,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"];
@@ -271,9 +269,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();
@@ -362,8 +357,8 @@ export class Cycle extends LitElement {
         setLanguage(newLanguage as LanguageCode);
       }
 
-      // Save settings
-      saveSettings({ language: newLanguage as LanguageCode });
+      // Save preferences
+      savePreferences({ language: newLanguage as LanguageCode });
 
       // Dispatch language change event
       window.dispatchEvent(
@@ -383,8 +378,8 @@ export class Cycle extends LitElement {
       // Set the new theme using the shared helper
       setTheme(newTheme as ThemeType);
 
-      // Save settings
-      saveSettings({ theme: newTheme as ThemeType });
+      // Save preferences
+      savePreferences({ theme: newTheme as ThemeType });
 
       // Theme helper already emits the change event, so no manual dispatch here
     } else if (this.type === "accent-color") {
@@ -402,8 +397,8 @@ export class Cycle extends LitElement {
       // Apply the new accent color
       applyAccentColor();
 
-      // Save settings
-      saveSettings({ accentColor: newColor });
+      // Save preferences
+      savePreferences({ accentColor: newColor });
 
       // Dispatch accent color change event
       window.dispatchEvent(
@@ -423,8 +418,8 @@ export class Cycle extends LitElement {
       // Save the new notes style medium
       saveNotesStyleMedium(newStyle);
 
-      // Save settings
-      saveSettings({ notesStyleMedium: newStyle });
+      // Save preferences
+      savePreferences({ notesStyleMedium: newStyle });
 
       // Dispatch notes style medium change event
       window.dispatchEvent(
@@ -444,8 +439,8 @@ export class Cycle extends LitElement {
       // Save the new note behavior
       savePageStyle(newBehavior);
 
-      // Save settings
-      saveSettings({ pageStyle: newBehavior });
+      // Save preferences
+      savePreferences({ pageStyle: newBehavior });
 
       // Dispatch note behavior change event
       window.dispatchEvent(
@@ -465,8 +460,8 @@ export class Cycle extends LitElement {
       // Save the new page style
       savePageStyle(newIconOnlyValue);
 
-      // Save settings
-      saveSettings({ pageStyle: newIconOnlyValue });
+      // Save preferences
+      savePreferences({ pageStyle: newIconOnlyValue });
 
       // No label update for icon-only type
       this.label = "";
@@ -494,8 +489,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;
         }
       }
@@ -533,16 +528,32 @@ export class Cycle extends LitElement {
     return value;
   }
 
+  getColorKey(colorVar: string): string {
+    // Map CSS variables to language keys
+    const colorMap: { [key: string]: string } = {
+      "--tuned-red": "red",
+      "--orange": "orange",
+      "--yellow": "yellow",
+      "--apple-green": "appleGreen",
+      "--every-green": "green",
+      "--zenith-blue": "lightBlue",
+      "--sharp-blue": "blue",
+      "--pink": "pink",
+    };
+
+    return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+  }
+
   getColorName(colorVar: string): string {
     // Map CSS variables to language keys
     const colorMap: { [key: string]: string } = {
-      "--red": "red",
+      "--tuned-red": "red",
       "--orange": "orange",
       "--yellow": "yellow",
-      "--light-green": "lightGreen",
-      "--green": "green",
-      "--light-blue": "lightBlue",
-      "--blue": "blue",
+      "--apple-green": "appleGreen",
+      "--every-green": "green",
+      "--zenith-blue": "lightBlue",
+      "--sharp-blue": "blue",
       "--pink": "pink",
     };
 
@@ -641,7 +652,25 @@ export class Cycle extends LitElement {
     return html`
       <div class="cycle-container">
         ${this.type !== "icon-only"
-          ? html`<span class="cycle-label">${this.label}</span>`
+          ? html`${this.type === "language"
+              ? html`<ds-text
+                  key="language"
+                  default-value="Language"
+                  class="cycle-label"
+                ></ds-text>`
+              : this.type === "theme"
+                ? html`<ds-text
+                    key="theme"
+                    default-value="Theme"
+                    class="cycle-label"
+                  ></ds-text>`
+                : this.type === "accent-color"
+                  ? html`<ds-text
+                      key="accentColor"
+                      default-value="Accent color"
+                      class="cycle-label"
+                    ></ds-text>`
+                  : html`<span class="cycle-label">${this.label}</span>`}`
           : ""}
         <div
           style="display: flex; align-items: center; ${this.type === "icon-only"
@@ -661,7 +690,24 @@ export class Cycle extends LitElement {
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
                 >`
-              : html`<span>${this.getValueDisplay(this.currentValue)}</span>`}
+              : this.type === "theme"
+                ? html`<ds-text
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
+                  ></ds-text>`
+                : this.type === "accent-color"
+                  ? html`<ds-text
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>`
+                  : this.type === "page-style"
+                    ? html`<ds-text
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
+                      ></ds-text>`
+                    : html`<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
           </ds-button>
           ${this.type === "accent-color"
             ? html`
@@ -736,4 +782,3 @@ declare global {
     "ds-cycle": Cycle;
   }
 }
-