diff --git a/index.html b/index.html index 4b042bf..945256a 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ Sakai Vue + + diff --git a/src/assets/layout/_content.scss b/src/assets/layout/_content.scss index 2c40e1d..48985ae 100644 --- a/src/assets/layout/_content.scss +++ b/src/assets/layout/_content.scss @@ -4,7 +4,7 @@ min-height: 100vh; justify-content: space-between; padding: 7rem 2rem 2rem 4rem; - transition: margin-left $transitionDuration; + transition: margin-left var(--layout-section-transition-duration); } .layout-main { diff --git a/src/assets/layout/_footer.scss b/src/assets/layout/_footer.scss index 367d312..4700fb3 100644 --- a/src/assets/layout/_footer.scss +++ b/src/assets/layout/_footer.scss @@ -1,5 +1,5 @@ .layout-footer { - transition: margin-left $transitionDuration; + transition: margin-left var(--layout-section-transition-duration); display: flex; align-items: center; justify-content: center; diff --git a/src/assets/layout/_main.scss b/src/assets/layout/_main.scss index dd9ac50..3e76013 100644 --- a/src/assets/layout/_main.scss +++ b/src/assets/layout/_main.scss @@ -4,11 +4,11 @@ html { height: 100%; - font-size: $scale; + font-size: 14px; } body { - font-family: var(--font-family); + font-family: 'CircularStd', sans-serif; color: var(--text-color); background-color: var(--surface-ground); margin: 0; diff --git a/src/assets/layout/_menu.scss b/src/assets/layout/_menu.scss index 3a9aa0e..108857d 100644 --- a/src/assets/layout/_menu.scss +++ b/src/assets/layout/_menu.scss @@ -7,11 +7,16 @@ user-select: none; top: 7rem; left: 2rem; - transition: transform $transitionDuration, left $transitionDuration; + transition: + transform var(--layout-section-transition-duration), + left var(--layout-section-transition-duration); background-color: var(--surface-overlay); - border-radius: $borderRadius; + border-radius: var(--content-border-radius); padding: 0.5rem 1.5rem; - box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08); + box-shadow: + 0px 3px 5px rgba(0, 0, 0, 0.02), + 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); } .layout-menu { @@ -24,7 +29,7 @@ font-size: 0.857rem; text-transform: uppercase; font-weight: 700; - color: var(--surface-900); + color: var(--text-color); margin: 0.75rem 0; } @@ -64,8 +69,10 @@ color: var(--text-color); cursor: pointer; padding: 0.75rem 1rem; - border-radius: $borderRadius; - transition: background-color $transitionDuration, box-shadow $transitionDuration; + border-radius: var(--content-border-radius); + transition: + background-color var(--element-transition-duration), + box-shadow var(--element-transition-duration); .layout-menuitem-icon { margin-right: 0.5rem; @@ -74,7 +81,7 @@ .layout-submenu-toggler { font-size: 75%; margin-left: auto; - transition: transform $transitionDuration; + transition: transform var(--element-transition-duration); } &.active-route { @@ -93,7 +100,7 @@ ul { overflow: hidden; - border-radius: $borderRadius; + border-radius: var(--content-border-radius); li { a { diff --git a/src/assets/layout/_mixins.scss b/src/assets/layout/_mixins.scss index ec26860..ad330b1 100644 --- a/src/assets/layout/_mixins.scss +++ b/src/assets/layout/_mixins.scss @@ -1,13 +1,15 @@ @mixin focused() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: var(--focus-ring); + outline-width: var(--focus-ring-width); + outline-style: var(--focus-ring-style); + outline-color: var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + box-shadow: var(--focus-ring-shadow); + transition: + box-shadow var(--transition-duration), + outline-color var(--transition-duration); } @mixin focused-inset() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: inset var(--focus-ring); + outline-offset: -1px; + box-shadow: inset var(--focus-ring-shadow); } diff --git a/src/assets/layout/_responsive.scss b/src/assets/layout/_responsive.scss index 4678f3d..fccaa69 100644 --- a/src/assets/layout/_responsive.scss +++ b/src/assets/layout/_responsive.scss @@ -1,10 +1,10 @@ @media screen and (min-width: 1960px) { - .layout-main, .landing-wrapper { + .layout-main, + .landing-wrapper { width: 1504px; margin-left: auto !important; margin-right: auto !important; } - } @media (min-width: 992px) { @@ -93,7 +93,7 @@ .layout-mask { display: block; - animation: fadein $transitionDuration; + animation: fadein var(--layout-section-transition-duration); } } } diff --git a/src/assets/layout/_topbar.scss b/src/assets/layout/_topbar.scss index 13162ea..4e9d0d5 100644 --- a/src/assets/layout/_topbar.scss +++ b/src/assets/layout/_topbar.scss @@ -7,15 +7,18 @@ width: 100%; padding: 0 2rem; background-color: var(--surface-card); - transition: left $transitionDuration; + transition: left var(--layout-section-transition-duration); display: flex; align-items: center; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + box-shadow: + 0px 3px 5px rgba(0, 0, 0, 0.02), + 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); .layout-topbar-logo { display: flex; align-items: center; - color: var(--surface-900); + color: var(--text-color); font-size: 1.5rem; font-weight: 500; width: 300px; @@ -23,7 +26,7 @@ img { height: 2.5rem; - margin-right: .5rem; + margin-right: 0.5rem; } &:focus { @@ -41,7 +44,7 @@ width: 3rem; height: 3rem; cursor: pointer; - transition: background-color $transitionDuration; + transition: background-color var(--element-transition-duration); &:hover { color: var(--text-color); @@ -111,7 +114,10 @@ position: absolute; flex-direction: column; background-color: var(--surface-overlay); - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + box-shadow: + 0px 3px 5px rgba(0, 0, 0, 0.02), + 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 1rem; right: 2rem; @@ -122,7 +128,7 @@ animation: scalein 0.15s linear; &.layout-topbar-menu-mobile-active { - display: block + display: block; } .layout-topbar-button { @@ -136,7 +142,7 @@ i { font-size: 1rem; - margin-right: .5rem; + margin-right: 0.5rem; } span { @@ -153,13 +159,15 @@ top: calc(100% + 2px); right: 0; width: 16rem; - padding: .75rem; - background-color: var(--overlay-background); + padding: 0.75rem; + background-color: var(--surface-overlay); border-radius: 6px; - border: 1px solid var(--border-color); + border: 1px solid var(--surface-border); transform-origin: top; - box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - + box-shadow: + 0 4px 6px -1px rgb(0 0 0 / 0.1), + 0 2px 4px -2px rgb(0 0 0 / 0.1); + .config-panel-content { display: flex; flex-direction: column; @@ -167,7 +175,7 @@ } .config-panel-label { - font-size: .875rem; + font-size: 0.875rem; color: var(--text-secondary-color); font-weight: 600; line-height: 1; @@ -175,9 +183,9 @@ .config-panel-colors { > div { - padding-top: .5rem; + padding-top: 0.5rem; display: flex; - gap: .5rem; + gap: 0.5rem; flex-wrap: wrap; justify-content: space-between; @@ -205,4 +213,4 @@ flex-direction: column; gap: 0.5rem; } -} \ No newline at end of file +} diff --git a/src/assets/layout/_typography.scss b/src/assets/layout/_typography.scss index b9a0c8f..b17bbc2 100644 --- a/src/assets/layout/_typography.scss +++ b/src/assets/layout/_typography.scss @@ -1,9 +1,14 @@ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin: 1.5rem 0 1rem 0; font-family: inherit; - font-weight: 500; - line-height: 1.2; - color: var(--surface-900); + font-weight: 700; + line-height: 1.5; + color: var(--text-color); &:first-child { margin-top: 0; @@ -35,16 +40,16 @@ h6 { } mark { - background: #FFF8E1; - padding: .25rem .4rem; - border-radius: $borderRadius; + background: #fff8e1; + padding: 0.25rem 0.4rem; + border-radius: var(--content-border-radius); font-family: monospace; } blockquote { margin: 1rem 0; padding: 0 2rem; - border-left: 4px solid #90A4AE; + border-left: 4px solid #90a4ae; } hr { diff --git a/src/assets/layout/_utils.scss b/src/assets/layout/_utils.scss index 3a6fb0d..ef29382 100644 --- a/src/assets/layout/_utils.scss +++ b/src/assets/layout/_utils.scss @@ -1,17 +1,16 @@ /* Utils */ .clearfix:after { - content: " "; + content: ' '; display: block; clear: both; } .card { background: var(--surface-card); - border: 1px solid var(--surface-border); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--card-shadow); - border-radius: $borderRadius; + border-radius: var(--content-border-radius); &:last-child { margin-bottom: 0; @@ -24,4 +23,4 @@ &.p-toast-top-center { top: 100px; } -} \ No newline at end of file +} diff --git a/src/assets/layout/_variables.scss b/src/assets/layout/_variables.scss deleted file mode 100644 index 8e9b025..0000000 --- a/src/assets/layout/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/* General */ -$scale:14px; /* main font size */ -$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */ -$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */ diff --git a/src/assets/layout/layout.scss b/src/assets/layout/layout.scss index 6191d3d..40b4dac 100644 --- a/src/assets/layout/layout.scss +++ b/src/assets/layout/layout.scss @@ -1,4 +1,6 @@ -@import './_variables'; +@import './variables/_common'; +@import './variables/_light'; +@import './variables/_dark'; @import './_mixins'; @import './_preloading'; @import './_main'; diff --git a/src/assets/layout/variables/_common.scss b/src/assets/layout/variables/_common.scss new file mode 100644 index 0000000..7cd7beb --- /dev/null +++ b/src/assets/layout/variables/_common.scss @@ -0,0 +1,21 @@ +:root { + --primary-color: var(--p-primary-color); + --primary-contrast-color: var(--p-primary-contrast-color); + --text-color: var(--p-text-color); + --text-color-secondary: var(--p-text-muted-color); + --surface-border: var(--p-content-border-color); + --surface-card: var(--p-content-background); + --surface-hover: var(--p-content-hover-background); + --surface-overlay: var(--p-overlay-popover-background); + --transition-duration: var(--p-transition-duration); + --maskbg: var(--p-mask-background); + --card-shadow: var(--p-card-shadow); + --content-border-radius: var(--p-content-border-radius); + --layout-section-transition-duration: 0.2s; + --element-transition-duration: var(--p-transition-duration); + --focus-ring-width: var(--p-focus-ring-width); + --focus-ring-style: var(--p-focus-ring-style); + --focus-ring-color: var(--p-focus-ring-color); + --focus-ring-offset: var(--p-focus-ring-offset); + --focus-ring-shadow: var(--p-focus-ring-shadow); +} diff --git a/src/assets/layout/variables/_dark.scss b/src/assets/layout/variables/_dark.scss new file mode 100644 index 0000000..fa4cf5a --- /dev/null +++ b/src/assets/layout/variables/_dark.scss @@ -0,0 +1,3 @@ +:root[class*='app-dark'] { + --surface-ground: var(--p-surface-950); +} diff --git a/src/assets/layout/variables/_light.scss b/src/assets/layout/variables/_light.scss new file mode 100644 index 0000000..06b5abc --- /dev/null +++ b/src/assets/layout/variables/_light.scss @@ -0,0 +1,3 @@ +:root { + --surface-ground: var(--p-surface-50); +} diff --git a/src/layout/AppConfigurator.vue b/src/layout/AppConfigurator.vue index 522597a..2f6fd22 100644 --- a/src/layout/AppConfigurator.vue +++ b/src/layout/AppConfigurator.vue @@ -221,10 +221,10 @@ function applyTheme(type, color) { function onPresetChange(value) { setPreset(value); - const preset = presetOptions[value]; + const presetValue = presets[value]; const surfacePalette = surfaces.value.find((s) => s.name === selectedSurfaceColor.value)?.palette; - $t().preset(preset).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); + $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); } const selectedPrimaryColor = computed(() => { @@ -236,7 +236,7 @@ const selectedSurfaceColor = computed(() => { }); const preset = computed(() => { - return layoutConfig.preset; + return layoutConfig.preset.value; }); diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue index 12005cc..55dd058 100644 --- a/src/layout/AppMenu.vue +++ b/src/layout/AppMenu.vue @@ -178,7 +178,7 @@ const model = ref([
  • - Prime Blocks + Prime Blocks
    • diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue index 0ae68aa..99de49f 100644 --- a/src/layout/AppTopbar.vue +++ b/src/layout/AppTopbar.vue @@ -88,7 +88,7 @@ const isOutsideClicked = (event) => { -
    +