@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/DS1/1-root/one.css

@@ -0,0 +1,602 @@
+/* version 0.3.0-alpha.13 */
+
+@import "./grid.css";
+@import "./component-tokens.css";
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@350&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@350&display=swap");
+
+@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;
+}
+
+@font-face {
+  font-family: GT-Canon-M-Standard-Medium;
+  src: url("./fonts/GT-Canon-M-Standard-Medium-Trial.woff2") format("woff2");
+  font-display: swap;
+}
+
+/* Arrows are always Inter: its arrows alone (fonts/Inter-LICENSE.md), first in
+   every typeface token, so the unicode-range draws only arrows with it. */
+@font-face {
+  font-family: "Inter Arrows";
+  src: url("./fonts/Inter-Arrows.woff2") format("woff2");
+  unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* The code font: Iosevka cut down to what code uses (fonts/Iosevka-LICENSE.md). */
+@font-face {
+  font-family: Iosevka;
+  src: url("./fonts/Iosevka-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+input {
+  padding: 0;
+}
+
+:root {
+  /* Design system 1 colors */
+
+  /* Default scale for CSS-only usage. The device helper can override this. */
+  --sf: 1;
+
+  /* Base/[color]  */
+
+  --white: rgb(255 255 255);
+  --light-grey: #e8e8e8;
+  --base-light-grey: #e8e8e8;
+  --base-darker-grey: #797979;
+  --base-slate: #1e1e1e;
+  --slate: #1e1e1e;
+  --slate-light: #e6e6e6;
+  --slate-dark: #3c3c3c;
+  --stealth: #554455;
+  --black: #2a2a2a;
+
+  /* Accent/[color]  */
+  --tuned-red: #ff5f5f;
+  --pink: #f5aad1;
+  --sharp-blue: #594dff;
+  --zenith-blue: #ccccff;
+  --every-green: #979441;
+  --apple-green: #99ff73;
+  --chartreuse-green: #ccff4d;
+  --yellow: #eaff00;
+  --orange: #fec20d;
+
+  --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: #1e1e1e2b;
+  --grid-color-dark: var(--white);
+
+  /* typefaces */
+  --typeface-regular: "Inter Arrows", "GT-America-Standard-Regular";
+  --typeface-medium: "Inter Arrows", "GT-America-Standard-Medium";
+  --typeface-compressed: "Inter Arrows", "GT-America-Compressed-Regular";
+  --typeface-mono: "Inter Arrows", "Iosevka", ui-monospace, "SF Mono", Menlo, monospace;
+  --typeface-canon: "Inter Arrows", "GT-Canon-M-Standard-Medium";
+
+  /* language specific typefaces */
+
+  --typeface-regular-jp: "Inter Arrows", "Noto Sans JP";
+  --typeface-regular-zh-hans: "Inter Arrows", "Noto Sans SC";
+  --typeface-regular-zh-hant: "Inter Arrows", "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;
+  --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(--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;
+
+  /* ----------------------------------------------------------
+   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)
+   ---------------------------------------------------------- */
+
+  /* Layouts */
+
+  /* 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));
+  --home-layout-areas: "banner" "." "header" "." "lists";
+
+  /* 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";
+
+  /* Settings layout */
+  --settings-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    1fr;
+  --settings-layout-areas: "banner" "." "settings";
+
+  /* size */
+  --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));
+
+  --column-width: calc(var(--quad) * var(--sf));
+
+  --column-header-height: calc(var(--unit) * var(--sf));
+  --column-header-width: calc(var(--quad) * var(--sf));
+
+  /* ----------------------------------------------------------
+   SURFACE COLORS
+   - 
+   ---------------------------------------------------------- */
+
+  --background: light-dark(var(--white), var(--black));
+  --dialog-background: var(--background);
+
+  /* button */
+  --button-background-color-primary: var(--accent-color);
+  --button-background-color-secondary: light-dark(var(--slate-light), var(--slate-dark));
+  --button-text-color: light-dark(var(--black), var(--white));
+  --button-text-color-on-light: var(--black);
+  --button-text-color-secondary: light-dark(
+    var(--slate-dark),
+    var(--slate-light)
+  );
+
+  /* text-color */
+  --text-color: light-dark(var(--black), var(--white));
+  --text-color-dimmed: light-dark(var(--slate), var(--slate-light));
+
+  /* icon colors */
+  --icon-background: light-dark(var(--slate-light), var(--slate-dark));
+  --icon-color: light-dark(var(--black), var(--white));
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+
+  color-scheme: light dark;
+}
+
+:root.light-theme {
+  color-scheme: light;
+}
+
+:root.dark-theme {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not(.light-theme):not(.dark-theme) {
+    color-scheme: light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light-theme):not(.dark-theme) {
+    color-scheme: dark;
+  }
+}
+
+@view-transition {
+  navigation: auto;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* ----------------------------------------------------------
+   CSS-ONLY COMPONENTS
+   Native HTML classes that do not require the JavaScript bundle.
+   ---------------------------------------------------------- */
+
+.ds-text {
+  margin: 0;
+  color: var(--text-color);
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: var(--type-lineheight-default);
+}
+
+.ds-text--heading {
+  font-family: var(--typeface-medium);
+  font-size: var(--type-size-heading);
+  font-weight: var(--type-weight-heading);
+}
+
+.ds-text--small {
+  font-size: var(--type-size-small);
+}
+
+.ds-button {
+  appearance: none;
+  box-sizing: border-box;
+  min-height: calc(var(--08) * var(--sf));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0 calc(var(--025) * var(--sf));
+  background: transparent;
+  color: var(--button-text-color);
+  cursor: pointer;
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  line-height: var(--type-lineheight-default);
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-button--primary {
+  background: var(--button-background-color-primary);
+  color: var(--button-text-color-on-light);
+}
+
+.ds-button--secondary {
+  background: var(--button-background-color-secondary);
+  color: var(--button-text-color-secondary);
+}
+
+.ds-button:hover:not(:disabled, [aria-disabled="true"]) {
+  filter: brightness(0.96);
+}
+
+.ds-button:active:not(:disabled, [aria-disabled="true"]) {
+  transform: translateY(1px);
+}
+
+.ds-button:focus-visible,
+.ds-input:focus-visible {
+  outline: 2px solid var(--sharp-blue);
+  outline-offset: 2px;
+}
+
+.ds-button:disabled,
+.ds-button[aria-disabled="true"],
+.ds-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ds-input {
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--unit) * var(--sf));
+  border: 1px solid transparent;
+  padding: 0 calc(2px * var(--sf));
+  background: var(--button-background-color-secondary);
+  color: var(--button-text-color-secondary);
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  line-height: var(--type-lineheight-default);
+}
+
+.ds-input::placeholder {
+  color: var(--base-darker-grey);
+}
+
+.ds-card {
+  box-sizing: border-box;
+  padding: calc(var(--half) * var(--sf));
+  border: var(--outline-stroke);
+  background: var(--background);
+  color: var(--text-color);
+}
+
+.matrix__board {
+  position: relative;
+  left: calc(-20px * var(--sf));
+  width: calc(240px * var(--sf));
+  display: flex;
+}
+
+.matrix__board--vertical {
+  position: relative;
+  left: calc(20.5px * var(--sf));
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+}
+
+.matrix__board--horizontal {
+  position: relative;
+  top: calc(19.5px * var(--sf));
+  left: calc(-239.5px * var(--sf));
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.matrix__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.matrix__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.matrix__column-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: var(--item-height);
+  margin-right: var(--margin-correction);
+  margin-bottom: var(--margin-correction);
+  background-color: light-dark(var(--white), var(--black));
+}
+
+.matrix__row-header {
+  position: relative;
+  /* top: calc(0.5px * var(--sf)); */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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));
+}
+
+.matrix__column-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #64f814;
+}
+
+.matrix__row-content {
+  display: flex;
+  align-items: center;
+  background-color: light-dark(#dbe4ee, var(--slate-dark));
+}
+
+.matrix__row-content--dragging {
+  background-color: #b4f6ac;
+}
+
+.matrix__column-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: var(--item-height);
+  margin-right: var(--margin-correction);
+  margin-bottom: var(--margin-correction);
+  outline: var(--outline-stroke);
+}
+
+.matrix__row-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: var(--item-height);
+  margin-right: var(--margin-correction);
+  outline: var(--outline-stroke);
+}
+
+.board__container {
+  position: relative;
+  top: calc(0.5px * var(--sf));
+}
+
+.board {
+  position: relative;
+  top: calc(0.5px * var(--sf));
+  left: calc(0.5px * var(--sf));
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--margin-correction);
+  flex-wrap: nowrap;
+  touch-action: pan-x;
+  cursor: move;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.column__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: var(--item-height);
+  background-color: #00000000;
+  opacity: 1;
+}
+
+.column__header:hover {
+  background-color: var(--slate-light);
+  outline: 0.5px solid var(--slate-light);
+  opacity: 1;
+}
+
+.mobile .column__header {
+  outline: var(--outline-stroke-mobile);
+}
+
+.column__header.dragging {
+  background-color: var(--slate-light);
+  opacity: 1;
+}
+
+.move-icon {
+  color: var(--slate);
+  width: 16px;
+  height: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.column__header:hover .move-icon {
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.column__header.dragging .move-icon {
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  width: calc(var(--item-width) * var(--sf));
+  height: calc(var(--item-height) * var(--sf));
+}
+
+.header.dragging {
+  outline: calc(var(--outline-stroke) * var(--sf)) solid var(--black);
+  outline-offset: calc(var(--outline-stroke-offset) * var(--sf));
+  background-color: var(--white);
+}
+
+.card {
+  position: relative;
+  left: 0.5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: var(--item-height);
+  margin-top: var(--margin-correction);
+  margin-right: var(--margin-correction);
+  outline: var(--outline-stroke);
+  background-color: light-dark(var(--white), var(--slate-dark));
+  color: var(--text-color-primary);
+}
+
+.mobile .card {
+  outline: var(--outline-stroke-mobile);
+}
+
+.card:active {
+  cursor: grabbing;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: var(--item-width);
+  height: 19px;
+  margin-top: 1px;
+  z-index: 99;
+  margin-bottom: 2px;
+  padding-left: calc(3px * var(--sf));
+  color: var(--text-color-primary);
+  outline: var(--outline-stroke);
+  background-color: transparent;
+}
+
+.item-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--item-width);
+  height: 100%;
+}
+
+.item-container.mobile {
+  margin-left: calc(0.25px * var(--sf));
+}
+
+.group-children {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.item-container.dragging .group-children {
+  display: none;
+}
+
+.item-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  width: var(--item-width);
+  padding-left: calc(5px * var(--sf));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grouped-item {
+  width: var(--item-width);
+  background-color: transparent;
+}
+
+.grouped-item .card {
+  width: var(--item-width);
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tr {
+  background-color: transparent;
+}
+
+td {
+  text-align: left;
+}