@gridify/studio 0.0.0-stage → 1.0.0-rc.1

package/gfy-common/code/_gfy-code-palette.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+
+$kinds: keyword, string, comment, number, function, type, decorator, attribute, tag, variable;
+
+$light: (
+    keyword: #0000ff,
+    string: #a31515,
+    comment: #007600,
+    number: #08734b,
+    function: #795e26,
+    type: #206d84,
+    decorator: #a800d2,
+    attribute: #cd0000,
+    tag: #0000ff,
+    variable: #001080,
+);
+
+$dark: (
+    keyword: #61a3d9,
+    string: #ce9178,
+    comment: #7aaa65,
+    number: #b5cea8,
+    function: #dcdcaa,
+    type: #4ec9b0,
+    decorator: #c689c1,
+    attribute: #9cdcfe,
+    tag: #61a3d9,
+    variable: #9cdcfe,
+);
+
+@mixin light() {
+    @each $kind, $color in $light {
+        --gfy-code-token-#{$kind}: #{$color};
+    }
+}
+
+@mixin dark() {
+    @each $kind, $color in $dark {
+        --gfy-code-token-#{$kind}: #{$color};
+    }
+}
+
+@mixin token-classes() {
+    @each $kind in $kinds {
+        .gfy-tk-#{$kind} {
+            color: var(--_tk-#{$kind}, var(--gfy-code-token-#{$kind}, #{map.get($light, $kind)}));
+        }
+    }
+    .gfy-tk-comment {
+        font-style: italic;
+    }
+}

package/gfy-common/density/gfy-density.scss

@@ -0,0 +1,297 @@
+:root,
+[data-gfy-density='classic'] {
+
+    --gfy-density-font-size: 13px;
+    --gfy-density-control-height: 28px;
+    --gfy-density-control-padding-x: 10px;
+    --gfy-density-control-padding-y: 3px;
+    --gfy-density-control-gap: 6px;
+
+    --gfy-density-tab-height: 30px;
+
+    --gfy-density-menu-font-size: 13px;
+    --gfy-density-status-font-size: 12px;
+    --gfy-density-menu-bar-height: 28px;
+    --gfy-menu-bar-padding-x: 6px;
+    --gfy-menu-head-padding-x: 9px;
+    --gfy-menu-more-padding-x: 7px;
+
+    --gfy-density-menu-item-height: 24px;
+    --gfy-menu-item-padding-start: 6px;
+    --gfy-menu-item-padding-end: 12px;
+    --gfy-menu-item-gap: 8px;
+    --gfy-menu-list-padding-y: 3px;
+    --gfy-menu-separator-margin: 3px;
+
+    --gfy-density-status-bar-height: 24px;
+    --gfy-status-bar-padding-x: 4px;
+    --gfy-status-item-padding-x: 8px;
+    --gfy-status-item-gap: 5px;
+    --gfy-status-more-padding-x: 6px;
+
+    --gfy-density-ribbon-row-height: 24px;
+    --gfy-ribbon-row-gap: 2px;
+    --gfy-ribbon-col-gap: 6px;
+    --gfy-ribbon-section-padding: 6px;
+    --gfy-ribbon-tab-padding-y: 6px;
+    --gfy-ribbon-tab-padding-x: 12px;
+    --gfy-ribbon-body-padding-y: 8px;
+
+    --gfy-density-toolbar-row-height: 26px;
+    --gfy-toolbar-gap: 2px;
+    --gfy-toolbar-padding-x: 4px;
+    --gfy-toolbar-padding-y: 2px;
+
+    --gfy-form-spacing-x: 8px;
+    --gfy-form-spacing-y: 8px;
+}
+
+[data-gfy-density='dense'] {
+
+    --gfy-density-font-size: 11px;
+    --gfy-density-control-height: 22px;
+    --gfy-density-control-padding-x: 6px;
+    --gfy-density-control-padding-y: 2px;
+    --gfy-density-control-gap: 4px;
+
+    --gfy-density-tab-height: 24px;
+
+    --gfy-density-menu-font-size: 11px;
+    --gfy-density-status-font-size: 11px;
+    --gfy-density-menu-bar-height: 22px;
+    --gfy-menu-bar-padding-x: 2px;
+    --gfy-menu-head-padding-x: 5px;
+    --gfy-menu-more-padding-x: 4px;
+
+    --gfy-density-menu-item-height: 18px;
+    --gfy-menu-item-padding-start: 3px;
+    --gfy-menu-item-padding-end: 6px;
+    --gfy-menu-item-gap: 5px;
+    --gfy-menu-list-padding-y: 1px;
+    --gfy-menu-separator-margin: 1px;
+
+    --gfy-density-status-bar-height: 18px;
+    --gfy-status-bar-padding-x: 1px;
+    --gfy-status-item-padding-x: 5px;
+    --gfy-status-item-gap: 3px;
+    --gfy-status-more-padding-x: 3px;
+
+    --gfy-density-ribbon-row-height: 20px;
+    --gfy-ribbon-row-gap: 1px;
+    --gfy-ribbon-col-gap: 3px;
+    --gfy-ribbon-section-padding: 3px;
+    --gfy-ribbon-tab-padding-y: 3px;
+    --gfy-ribbon-tab-padding-x: 8px;
+    --gfy-ribbon-body-padding-y: 4px;
+
+    --gfy-density-toolbar-row-height: 22px;
+    --gfy-toolbar-gap: 1px;
+    --gfy-toolbar-padding-x: 2px;
+    --gfy-toolbar-padding-y: 1px;
+
+    --gfy-form-spacing-x: 4px;
+    --gfy-form-spacing-y: 4px;
+}
+
+[data-gfy-density='compact'] {
+
+    --gfy-density-font-size: 12px;
+    --gfy-density-control-height: 25px;
+    --gfy-density-control-padding-x: 8px;
+    --gfy-density-control-padding-y: 3px;
+    --gfy-density-control-gap: 5px;
+
+    --gfy-density-tab-height: 27px;
+
+    --gfy-density-menu-font-size: 12px;
+    --gfy-density-status-font-size: 11px;
+    --gfy-density-menu-bar-height: 24px;
+    --gfy-menu-bar-padding-x: 4px;
+    --gfy-menu-head-padding-x: 7px;
+    --gfy-menu-more-padding-x: 5px;
+
+    --gfy-density-menu-item-height: 20px;
+    --gfy-menu-item-padding-start: 4px;
+    --gfy-menu-item-padding-end: 8px;
+    --gfy-menu-item-gap: 6px;
+    --gfy-menu-list-padding-y: 2px;
+    --gfy-menu-separator-margin: 2px;
+
+    --gfy-density-status-bar-height: 20px;
+    --gfy-status-bar-padding-x: 2px;
+    --gfy-status-item-padding-x: 6px;
+    --gfy-status-item-gap: 4px;
+    --gfy-status-more-padding-x: 4px;
+
+    --gfy-density-ribbon-row-height: 22px;
+    --gfy-ribbon-row-gap: 2px;
+    --gfy-ribbon-col-gap: 4px;
+    --gfy-ribbon-section-padding: 4px;
+    --gfy-ribbon-tab-padding-y: 4px;
+    --gfy-ribbon-tab-padding-x: 10px;
+    --gfy-ribbon-body-padding-y: 6px;
+
+    --gfy-density-toolbar-row-height: 24px;
+    --gfy-toolbar-gap: 1px;
+    --gfy-toolbar-padding-x: 3px;
+    --gfy-toolbar-padding-y: 1px;
+
+    --gfy-form-spacing-x: 6px;
+    --gfy-form-spacing-y: 6px;
+}
+
+[data-gfy-density='relaxed'] {
+
+    --gfy-density-font-size: 14px;
+    --gfy-density-control-height: 32px;
+    --gfy-density-control-padding-x: 12px;
+    --gfy-density-control-padding-y: 4px;
+    --gfy-density-control-gap: 8px;
+
+    --gfy-density-tab-height: 34px;
+
+    --gfy-density-menu-font-size: 14px;
+    --gfy-density-status-font-size: 13px;
+    --gfy-density-menu-bar-height: 32px;
+    --gfy-menu-bar-padding-x: 8px;
+    --gfy-menu-head-padding-x: 11px;
+    --gfy-menu-more-padding-x: 9px;
+
+    --gfy-density-menu-item-height: 28px;
+    --gfy-menu-item-padding-start: 7px;
+    --gfy-menu-item-padding-end: 14px;
+    --gfy-menu-item-gap: 9px;
+    --gfy-menu-list-padding-y: 4px;
+    --gfy-menu-separator-margin: 4px;
+
+    --gfy-density-status-bar-height: 28px;
+    --gfy-status-bar-padding-x: 5px;
+    --gfy-status-item-padding-x: 10px;
+    --gfy-status-item-gap: 6px;
+    --gfy-status-more-padding-x: 7px;
+
+    --gfy-density-ribbon-row-height: 28px;
+    --gfy-ribbon-row-gap: 3px;
+    --gfy-ribbon-col-gap: 8px;
+    --gfy-ribbon-section-padding: 8px;
+    --gfy-ribbon-tab-padding-y: 8px;
+    --gfy-ribbon-tab-padding-x: 14px;
+    --gfy-ribbon-body-padding-y: 10px;
+
+    --gfy-density-toolbar-row-height: 30px;
+    --gfy-toolbar-gap: 3px;
+    --gfy-toolbar-padding-x: 6px;
+    --gfy-toolbar-padding-y: 3px;
+
+    --gfy-form-spacing-x: 10px;
+    --gfy-form-spacing-y: 10px;
+}
+
+[data-gfy-density='spacious'] {
+
+    --gfy-density-font-size: 15px;
+    --gfy-density-control-height: 36px;
+    --gfy-density-control-padding-x: 14px;
+    --gfy-density-control-padding-y: 5px;
+    --gfy-density-control-gap: 10px;
+
+    --gfy-density-tab-height: 38px;
+
+    --gfy-density-menu-font-size: 15px;
+    --gfy-density-status-font-size: 14px;
+    --gfy-density-menu-bar-height: 36px;
+    --gfy-menu-bar-padding-x: 10px;
+    --gfy-menu-head-padding-x: 14px;
+    --gfy-menu-more-padding-x: 11px;
+
+    --gfy-density-menu-item-height: 32px;
+    --gfy-menu-item-padding-start: 9px;
+    --gfy-menu-item-padding-end: 18px;
+    --gfy-menu-item-gap: 11px;
+    --gfy-menu-list-padding-y: 5px;
+    --gfy-menu-separator-margin: 5px;
+
+    --gfy-density-status-bar-height: 32px;
+    --gfy-status-bar-padding-x: 6px;
+    --gfy-status-item-padding-x: 12px;
+    --gfy-status-item-gap: 7px;
+    --gfy-status-more-padding-x: 9px;
+
+    --gfy-density-ribbon-row-height: 32px;
+    --gfy-ribbon-row-gap: 4px;
+    --gfy-ribbon-col-gap: 10px;
+    --gfy-ribbon-section-padding: 10px;
+    --gfy-ribbon-tab-padding-y: 10px;
+    --gfy-ribbon-tab-padding-x: 16px;
+    --gfy-ribbon-body-padding-y: 12px;
+
+    --gfy-density-toolbar-row-height: 34px;
+    --gfy-toolbar-gap: 4px;
+    --gfy-toolbar-padding-x: 8px;
+    --gfy-toolbar-padding-y: 4px;
+
+    --gfy-form-spacing-x: 12px;
+    --gfy-form-spacing-y: 12px;
+}
+
+:root,
+[data-gfy-script='latin'] {
+    --gfy-script-line-height: 1.4;
+    --gfy-script-font-scale: 1;
+
+    --gfy-script-optical-shift: 0.1em;
+
+    --gfy-script-min-font-size: 10px;
+    --gfy-script-strong-weight: 700;
+}
+
+[data-gfy-script='tall'] {
+    --gfy-script-line-height: 1.7;
+    --gfy-script-font-scale: 1.08;
+    --gfy-script-optical-shift: 0em;
+    --gfy-script-min-font-size: 12px;
+    --gfy-script-strong-weight: 500;
+}
+
+:root,
+[data-gfy-density],
+[data-gfy-script] {
+    --gfy-font-size: calc(var(--gfy-density-font-size) * var(--gfy-script-font-scale));
+
+    --gfy-font-size-base: var(--gfy-font-size, 13px);
+    --gfy-line-height: var(--gfy-script-line-height);
+    --gfy-control-padding-x: var(--gfy-density-control-padding-x);
+    --gfy-control-padding-y: var(--gfy-density-control-padding-y);
+    --gfy-control-gap: var(--gfy-density-control-gap);
+
+    --gfy-control-height: max(var(--gfy-density-control-height), round(up, calc(var(--gfy-font-size) * var(--gfy-line-height) + 2 * var(--gfy-control-padding-y) + 2px), 1px));
+
+    --gfy-menu-font-size: calc(var(--gfy-density-menu-font-size) * var(--gfy-script-font-scale));
+    --gfy-status-font-size: calc(var(--gfy-density-status-font-size) * var(--gfy-script-font-scale));
+
+    --gfy-menu-bar-height: max(var(--gfy-density-menu-bar-height), round(up, calc(var(--gfy-menu-font-size) * var(--gfy-script-line-height) + 4px), 1px));
+    --gfy-menu-item-height: max(var(--gfy-density-menu-item-height), round(up, calc(var(--gfy-menu-font-size) * var(--gfy-script-line-height) + 2px), 1px));
+    --gfy-status-bar-height: max(var(--gfy-density-status-bar-height), round(up, calc(var(--gfy-status-font-size) * var(--gfy-script-line-height) + 2px), 1px));
+
+    --gfy-ribbon-row-height: max(var(--gfy-density-ribbon-row-height), round(up, calc(12px * var(--gfy-script-line-height) + 2px), 1px));
+
+    --gfy-toolbar-row-height: max(var(--gfy-density-toolbar-row-height), round(up, calc(12px * var(--gfy-script-line-height) + 2px), 1px));
+}
+
+:lang(ja) {
+    --gfy-font-main: 'Yu Gothic UI', 'Meiryo UI', 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', system-ui, sans-serif;
+}
+:lang(zh) {
+    --gfy-font-main: 'Microsoft YaHei UI', 'PingFang SC', 'Noto Sans SC', 'Segoe UI', system-ui, sans-serif;
+}
+:lang(zh-Hant),
+:lang(zh-TW),
+:lang(zh-HK) {
+    --gfy-font-main: 'Microsoft JhengHei UI', 'PingFang TC', 'Noto Sans TC', 'Segoe UI', system-ui, sans-serif;
+}
+:lang(ko) {
+    --gfy-font-main: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif;
+}
+:lang(th) {
+    --gfy-font-main: 'Leelawadee UI', 'Noto Sans Thai', Tahoma, 'Segoe UI', system-ui, sans-serif;
+}

package/gfy-common/themes/_gfy-scrollbars.scss

@@ -0,0 +1,3 @@
+@mixin colors {
+    scrollbar-color: var(--gfy-scrollbar-thumb, color-mix(in srgb, var(--gfy-text-main) 40%, transparent)) var(--gfy-scrollbar-track, transparent);
+}