diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss index e0d0d9803..a7ee63392 100644 --- a/ui-v2/app/styles/app.scss +++ b/ui-v2/app/styles/app.scss @@ -1,7 +1,7 @@ @charset 'utf-8'; -@import 'base/index'; @import 'base/reset/index'; +@import 'base/index'; @import 'variables/index'; /*TODO: Move this to its own local component*/ @@ -23,4 +23,3 @@ @import 'routes/dc/kv/index'; @import 'routes/dc/acls/index'; @import 'routes/dc/acls/tokens/index'; -@import 'routes/dc/acls/policies/index'; diff --git a/ui-v2/app/styles/base/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss index 08cb2c403..421d0950d 100644 --- a/ui-v2/app/styles/base/components/buttons/layout.scss +++ b/ui-v2/app/styles/base/components/buttons/layout.scss @@ -24,19 +24,15 @@ text-align: center; justify-content: center; align-items: center; - padding: calc(0.375em - 1px) calc(2.2em - 1px); - height: 2.55em; + padding: calc(0.5em - 1px) calc(2.2em - 1px); min-width: 100px; } %button:not(:last-child) { margin-right: 8px; } %button-compact { - /* @extend %button;*/ - padding-left: calc(1.6em - 1px) !important; - padding-right: calc(1.6em - 1px) !important; - padding-top: calc(0.35em - 1px) !important; - height: 2.3em !important; + padding-top: calc(0.4em - 1px) !important; + padding-bottom: calc(0.4em - 1px) !important; } %internal-button { padding: 0.75rem 1rem; diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss index 95b1e132e..1f29e0b4c 100644 --- a/ui-v2/app/styles/base/components/pill/layout.scss +++ b/ui-v2/app/styles/base/components/pill/layout.scss @@ -6,7 +6,8 @@ } %pill button { padding: 0; - height: 10px; - margin-right: 3px; + width: 9px; + height: 9px; + margin-right: 4px; font-size: 0; } diff --git a/ui-v2/app/styles/base/components/tabs/skin.scss b/ui-v2/app/styles/base/components/tabs/skin.scss index 1f98e6918..4bbe754da 100644 --- a/ui-v2/app/styles/base/components/tabs/skin.scss +++ b/ui-v2/app/styles/base/components/tabs/skin.scss @@ -1,6 +1,7 @@ %tab-nav { /* %frame-gray-something */ border-bottom: $decor-border-100; + /* TODO: structure tabs don't actually have a top border */ border-top: $decor-border-200; } %tab-nav { @@ -18,7 +19,7 @@ text-decoration: none; } %tab-button { - border-bottom: $decor-border-200; + border-bottom: $decor-border-300; } %tab-button { border-color: $color-transparent; diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss index 042e026ae..55a6d459d 100644 --- a/ui-v2/app/styles/base/components/tooltip/layout.scss +++ b/ui-v2/app/styles/base/components/tooltip/layout.scss @@ -15,9 +15,6 @@ white-space: nowrap; content: attr(data-tooltip); text-indent: 0; - /* TODO: should this be hardcoded here ? */ - font-size: 14px; - /* structure */ min-width: 192px; } %tooltip-bubble { diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss index 6663e84b2..493fb4a51 100644 --- a/ui-v2/app/styles/base/components/tooltip/skin.scss +++ b/ui-v2/app/styles/base/components/tooltip/skin.scss @@ -19,7 +19,6 @@ border-bottom: 18px solid $gray-500; } %tooltip-bubble { - font-weight: normal; border-radius: $decor-radius-200; /* this isn't quite like the values in structure */ /* but this looks closer visually */ diff --git a/ui-v2/app/styles/base/reset/index.scss b/ui-v2/app/styles/base/reset/index.scss index 0aec96d2d..8a7dce89c 100644 --- a/ui-v2/app/styles/base/reset/index.scss +++ b/ui-v2/app/styles/base/reset/index.scss @@ -1,3 +1,6 @@ @import './base-variables'; +@import '../color/base-variables'; +@import '../color/semantic-variables'; +@import '../typography/base-variables'; @import './system'; @import './minireset'; diff --git a/ui-v2/app/styles/base/typography/base-placeholders.scss b/ui-v2/app/styles/base/typography/base-placeholders.scss index f153f07b4..c0936bf58 100644 --- a/ui-v2/app/styles/base/typography/base-placeholders.scss +++ b/ui-v2/app/styles/base/typography/base-placeholders.scss @@ -18,9 +18,14 @@ font-weight: $typo-weight-bold; } %h2, -%h3 { +%h3, +%h4 { font-weight: $typo-weight-semibold; } +%h5, +%h6 { + font-weight: $typo-weight-medium; +} %h1 { font-size: $typo-size-100; } @@ -30,6 +35,15 @@ %h3 { font-size: $typo-size-300; } +/*p1 strong, differing weights */ +%h4, +%h5 { + font-size: $typo-size-600; +} +/*p2 strong */ +%h6 { + font-size: $typo-size-700; +} %typo-p { line-height: inherit; font-size: inherit; diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 73370bf76..ac73b2c80 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -19,6 +19,9 @@ main { } } // TODO: This should be its own component +%app-view h1 { + padding-bottom: 0.2em; +} %app-view h1 span[data-tooltip] { @extend %with-external-source-icon; margin-top: 13px; diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss index a36dbefa5..f297aa647 100644 --- a/ui-v2/app/styles/components/app-view/layout.scss +++ b/ui-v2/app/styles/components/app-view/layout.scss @@ -29,7 +29,7 @@ } %app-view h2 { padding-bottom: 0.2em; - margin-bottom: 0.2em; + margin-bottom: 0.5em; } %app-view-header .actions > *:not(:last-child) { margin-right: 12px; diff --git a/ui-v2/app/styles/components/confirmation-dialog/layout.scss b/ui-v2/app/styles/components/confirmation-dialog/layout.scss index 29c0cd12a..017dfff89 100644 --- a/ui-v2/app/styles/components/confirmation-dialog/layout.scss +++ b/ui-v2/app/styles/components/confirmation-dialog/layout.scss @@ -4,12 +4,9 @@ %confirmation-dialog-inline p { margin-right: 12px; padding-left: 12px; - padding-top: 5px; - padding-bottom: 5px; - margin-bottom: 0; + margin-bottom: 0 !important; } %confirmation-dialog-inline { display: flex; align-items: center; - line-height: 1; } diff --git a/ui-v2/app/styles/core/layout.scss b/ui-v2/app/styles/core/layout.scss index 654bf1001..94e8bc8b1 100644 --- a/ui-v2/app/styles/core/layout.scss +++ b/ui-v2/app/styles/core/layout.scss @@ -40,7 +40,10 @@ html.template-edit main { padding: 0; } } -/* TODO: keep margin below forms, move elsewhere */ +%main-content p:not(:last-child) { + margin-bottom: 1em; +} +/* TODO: keep margin below forms, move elsewhere? */ %main-content form, %main-content form + div .with-confirmation { margin-bottom: 2em; diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 5cf3c8db4..56de5735c 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -1,131 +1,95 @@ -%button { - font-family: $typo-family-sans; +body, +%form-element-textarea { + @extend %typo-body; } -main p:not(:last-child), -%modal-window p:not(:last-child) { - margin-bottom: 1em; +h1 { + @extend %h1; + font-size: $typo-header-100; } +h2 { + @extend %h2; + font-size: $typo-header-200; +} +h3 { + @extend %h3; + font-size: $typo-header-300; +} +fieldset > header, +%header-nav, +%app-view-content div > dl > dt, +%table caption, +%tbody-th, +%form-element > span { + @extend %h4; +} +%internal-button, +%breadcrumbs li > *, +%tab-nav { + @extend %h5; +} +%healthcheck-output dt, +%table th, +%table td strong, +%tooltip-bubble, +%sliding-toggle label span { + @extend %h6; +} + +pre code, +%notice, +%notice p, +%filter-bar input, +%phrase-editor input { + @extend %p1; +} +.type-dialog, +%table td p, +%table td, +%healthcheck-output dl > dd, +%form-element-label, +%stats-card header a span, +%footer, +%app-view h1 span.kind-proxy { + @extend %p2; +} +.template-error > div, %button, -%form-element textarea, -%form-element [type='text'], -%form-element [type='password'] { - line-height: 1.5; +%main-content p, +%app-view > div.disabled > div, +%form-element-note, +%form-element-error > strong { + @extend %p3; } -h3, + +%button { + font-weight: $typo-weight-semibold; +} + %radio-group label { - line-height: 1.25; -} -%filter-bar [role='radiogroup'] label { - line-height: 1.7; + line-height: $typo-lead-200; } %header-nav, %tab-nav { letter-spacing: 0.03em; } -%footer { - letter-spacing: -0.05em; -} - -%button, -%internal-button { - font-family: $typo-family-sans; -} -/* Weighting */ -h1, -%app-view-content div > dt, %header-drop-nav .is-active { font-weight: $typo-weight-bold; } -h2, -h3, -fieldset > header, -caption, -%header-nav, -%healthcheck-output dt, -%copy-button, -%app-view-content div > dl > dt, -%tbody-th, -%form-element > span, -%toggle label span { - font-weight: $typo-weight-semibold; -} -%button { - font-weight: $typo-weight-semibold !important; -} -main label a[rel*='help'], +%main-content label a[rel*='help'], %pill, -%tbody-th em, %form-element > strong, +%tbody-th em, %app-view h1 em { font-weight: $typo-weight-normal; } -th, -td strong, -%breadcrumbs li > *, -%action-group-action, -%tab-nav, -%tooltip-bubble { - font-weight: $typo-weight-medium; -} -/* Styling */ %form-element > em, %tbody-th em, %app-view h1 em { font-style: normal; } -/* Sizing */ -%footer > * { - font-size: inherit; -} - -h1 { - font-size: $typo-header-100; -} -h2 { - font-size: $typo-header-200; -} -h3 { - font-size: $typo-header-300; -} %header-drop-nav .is-active, %app-view h1 em { font-size: $typo-size-500; } -body, -pre code, -input, -textarea, -%internal-button, -%action-group-action, -%tbody-th { - font-size: $typo-size-600; -} -th, -td, -caption, -.type-dialog, -%healthcheck-output dl > *, -%form-element > span, -%tooltip-bubble, -%stats-card header a span, -%footer, -%app-view h1 span.kind-proxy { - font-size: $typo-size-700; -} -%toggle label span { - font-size: $typo-size-700 !important; -} -fieldset > p, -.template-error > div, -[role='tabpanel'] > p:only-child, -.with-confirmation p, -%app-view-content > p:only-child, -%app-view > div.disabled > div, -%button, -%form-element > em, -%form-element > strong, -%feedback-dialog-inline p { - font-size: $typo-size-800; -} diff --git a/ui-v2/app/styles/routes/dc/acls/index.scss b/ui-v2/app/styles/routes/dc/acls/index.scss index 849ed0337..420091a1b 100644 --- a/ui-v2/app/styles/routes/dc/acls/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/index.scss @@ -10,7 +10,7 @@ td a.is-management::after { .template-policy.template-list main header .actions, .template-token.template-list main header .actions { position: relative; - top: 45px; + top: 42px; } } diff --git a/ui-v2/app/styles/routes/dc/acls/policies/index.scss b/ui-v2/app/styles/routes/dc/acls/policies/index.scss deleted file mode 100644 index e69de29bb..000000000