ds-one 0.2.5-alpha.3 → 0.2.5-alpha.4

package/DS1/0-face/device.ts

@@ -93,9 +93,14 @@ export function initDeviceDetection(): DeviceInfo {
     const actualWidth = deviceInfo.screenWidth;
     const scalingFactor = actualWidth / designWidth;
 
-    // Set CSS custom property for scaling
+    // Set CSS custom property for scaling on html element
     document.documentElement.style.setProperty(
-      "--scaling-factor-mobile",
+      "--sf",
+      scalingFactor.toFixed(3)
+    );
+    // Also set --sf for backwards compatibility
+    document.documentElement.style.setProperty(
+      "--sf",
       scalingFactor.toFixed(3)
     );
 
@@ -105,10 +110,9 @@ export function initDeviceDetection(): DeviceInfo {
   } else {
     // Desktop - no scaling
     if (typeof document !== "undefined") {
-      document.documentElement.style.setProperty(
-        "--scaling-factor-mobile",
-        "1"
-      );
+      document.documentElement.style.setProperty("--sf", "1");
+      // Also set --sf for backwards compatibility
+      document.documentElement.style.setProperty("--sf", "1");
     }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`

package/DS1/0-face/i18n.ts

@@ -579,7 +579,9 @@ export function translate(key: string): string {
     return translationData[defaultLanguage][key];
   }
 
-  console.warn(`[translate] No translation found for key "${key}"`);
+  console.warn(
+    `[DS one (Internationalization)] No translation found for key "${key}"`
+  );
   return key;
 }
 

package/DS1/1-root/one.css

@@ -20,9 +20,6 @@ input {
   --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);
@@ -34,10 +31,19 @@ input {
   --ds1-docs-search-bg: light-dark(#f0f0f0, #171717);
   --ds1-docs-divider: light-dark(#e0e0e0, #000000);
 
-  /* grid colors */
-  --grid-color: light-dark(var(--slate), var(--slate-dark));
+  /* 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);
 
+  /* ds-layout colors */
 
+  --layout-color: light-dark(
+    var(--layout-color-light),
+    var(--layout-color-dark)
+  );
 
   /* typefaces */
   --typeface: "GT-America-Standard-Regular";
@@ -45,40 +51,41 @@ input {
   --typeface-compressed: "GT-America-Compressed-Regular";
   --typeface-japanese: "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 */
 
+  --gridrcolor: light-dark(var(--slate), var(--slate-dark));
+
   /* main unit */
   --1: 20px;
   /* bigger sizes */
   --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
   --4: calc(var(--1) * 4);
 
   /* smaller sizes */
@@ -86,7 +93,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),
@@ -98,11 +105,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));
 
@@ -137,7 +144,6 @@ input {
   navigation: auto;
 }
 
-
 @font-face {
   font-family: GT-America-Standard-Regular;
   src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
@@ -163,15 +169,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;
@@ -179,8 +185,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;
@@ -210,11 +216,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);
@@ -266,13 +272,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;
@@ -337,14 +343,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);
 }
 
@@ -380,7 +385,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);
@@ -396,7 +401,7 @@ body {
 }
 
 .item-container.mobile {
-  margin-left: calc(0.25px * var(--scaling-factor));
+  margin-left: calc(0.25px * var(--sf));
 }
 
 .group-children {
@@ -415,7 +420,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;
@@ -442,5 +447,3 @@ tr {
 td {
   text-align: left;
 }
-
-

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

@@ -12,6 +12,7 @@ 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) => {
@@ -641,7 +642,19 @@ 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>`
+                : html`<span class="cycle-label">${this.label}</span>`}`
           : ""}
         <div
           style="display: flex; align-items: center; ${this.type === "icon-only"

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

@@ -26,8 +26,8 @@ export class Icon extends LitElement {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     svg {
@@ -44,8 +44,8 @@ export class Icon extends LitElement {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     /* Notes style color variable for future implementation */

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

@@ -44,10 +44,16 @@ export class Text extends LitElement {
   static styles = css`
     :host {
       display: inline;
-    }
-
-    .loading {
-      opacity: 0.6;
+      font-family: var(--typeface);
+      font-size: calc(var(--type-size-default) * var(--scaling-factor));
+      font-weight: var(--type-weight-default);
+      line-height: calc(var(--type-lineheight-default) * var(--scaling-factor));
+      letter-spacing: calc(
+        var(--type-letterspacing-default) * var(--scaling-factor)
+      );
+      text-align: var(--text-align-default);
+      text-transform: var(--text-transform-default);
+      text-decoration: var(--text-decoration-default);
     }
   `;
 

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

@@ -79,10 +79,10 @@ export class Tooltip extends LitElement {
       position: absolute;
       left: 50%;
       bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--scaling-factor)));
+      transform: translate(-50%, calc(-2px * var(--sf)));
       z-index: 1000;
       pointer-events: none;
-      height: calc(var(--08) * var(--scaling-factor));
+      height: calc(var(--08) * var(--sf));
       opacity: 0;
       transition:
         opacity 120ms ease,
@@ -91,7 +91,7 @@ export class Tooltip extends LitElement {
       color: light-dark(var(--white), var(--black));
       border-radius: 0;
       font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--scaling-factor));
+      padding: 0px calc(1px * var(--sf));
       font-family: var(
         --typeface,
         -apple-system,

package/DS1/3-unit/ds-portfolio-singlenav.ts

@@ -27,15 +27,15 @@ export class PortfolioSingleNav extends LitElement {
     :host {
       display: flex;
       justify-content: end;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
+      gap: calc(5px * var(--sf));
+      padding: calc(2px * var(--sf));
       align-items: center;
     }
 
     a {
       display: inline-flex;
       align-items: center;
-      gap: calc(5px * var(--scaling-factor));
+      gap: calc(5px * var(--sf));
       text-decoration: none;
       color: inherit;
     }
@@ -76,4 +76,3 @@ declare global {
     "portfolio-singlenav": PortfolioSingleNav;
   }
 }
-

package/DS1/3-unit/ds-row.ts

@@ -23,18 +23,18 @@ export class Row extends LitElement {
     :host {
       display: flex;
       align-items: end;
-      width: calc(240px * var(--scaling-factor));
+      width: calc(240px * var(--sf));
     }
 
     :host([type="fill"]) {
       justify-content: space-between;
-      height: calc(var(--1) * var(--scaling-factor));
+      height: calc(var(--1) * var(--sf));
     }
 
     :host([type="centered"]) {
       justify-content: center;
-      height: calc(var(--1) * var(--scaling-factor));
-      gap: calc(var(--025) * var(--scaling-factor));
+      height: calc(var(--1) * var(--sf));
+      gap: calc(var(--025) * var(--sf));
     }
   `;
 
@@ -50,4 +50,3 @@ declare global {
     "ds-row": Row;
   }
 }
-

package/DS1/4-page/ds-grid.ts

@@ -2,7 +2,6 @@
 // Simple grid layout component
 
 import { LitElement, html, css } from "lit";
-import { detectMobileDevice } from "../0-face/device";
 
 declare global {
   interface CustomElementRegistry {
@@ -14,44 +13,9 @@ declare global {
 export class Grid extends LitElement {
   static properties = {
     align: { type: String },
-    _isMobile: { type: Boolean, state: true },
   };
 
   align?: string;
-  _isMobile: boolean = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._isMobile = detectMobileDevice();
-    console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
-
-    // Apply mobile class immediately
-    if (this._isMobile) {
-      this.classList.add("mobile");
-      console.log(`[ds-grid] Mobile class added`);
-    }
-
-    // Calculate mobile grid dimensions to fit screen
-    if (this._isMobile && typeof window !== "undefined") {
-      const screenWidth = window.innerWidth;
-      const columns = 14;
-      const gap = 0.5;
-
-      // Calculate column size accounting for gaps between columns
-      // Total width = (columns * columnSize) + ((columns - 1) * gap)
-      // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
-      const totalGapWidth = (columns - 1) * gap;
-      const columnSize = (screenWidth - totalGapWidth) / columns;
-
-      console.log(
-        `[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`
-      );
-
-      // Set custom property for this grid instance
-      this.style.setProperty("--mobile-column-size", `${columnSize}px`);
-      this.style.setProperty("--mobile-gap", `${gap}px`);
-    }
-  }
 
   static styles = css`
     :host {
@@ -59,17 +23,13 @@ export class Grid extends LitElement {
       margin-left: 0.5px !important;
       display: grid;
       width: 1440px;
-      height: 100%;
+      height: 360px;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
-      row-rule: calc(1px * var(--scaling-factor)) solid
-        light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
-      column-rule: calc(1px * var(--scaling-factor)) solid
-        light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
-      outline:
-        1px solid light-dark(rgb(147, 147, 147)),
-        rgb(147, 147, 147);
+      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
+      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
+      outline: 1px solid black;
       position: fixed;
       top: 0;
       left: 50%;
@@ -80,21 +40,20 @@ export class Grid extends LitElement {
 
     /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
     :host(.mobile) {
-      outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
-      width: calc(100% - calc(1px * var(--scaling-factor)));
+      width: calc(100% - calc(1px * var(--sf)));
       max-width: 100vw;
       margin-left: 0 !important;
       margin-top: 0 !important;
       box-sizing: border-box;
       position: fixed;
-      top: calc(0.5px * var(--scaling-factor));
+      top: calc(0.5px * var(--sf));
       left: 50%;
       transform: translateX(-50%);
       pointer-events: none;
       z-index: 300;
-      gap: calc(1px * var(--scaling-factor));
-      grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
+      gap: calc(1px * var(--sf));
+      grid-template-columns: repeat(14, calc(19px * var(--sf)));
+      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
     }
 
     :host([align="left"]) {
@@ -114,15 +73,6 @@ export class Grid extends LitElement {
     }
   `;
 
-  updated() {
-    // Apply mobile class if detected as mobile device
-    if (this._isMobile) {
-      this.classList.add("mobile");
-    } else {
-      this.classList.remove("mobile");
-    }
-  }
-
   render() {
     return html``;
   }