feat(core)!: full rework of editorial typo styles incl. removal of de…

…fault margins (#405)
haiilo · Oct 20, 2023 · 70e6b9e · 70e6b9e
1 parent 1c39966
commit 70e6b9e
Show file tree

Hide file tree

Showing 34 changed files with 141 additions and 279 deletions.
diff --git a/.github/workflows/angular.yml b/.github/workflows/angular.yml
@@ -3,7 +3,10 @@ name: Angular
 on:
   push:
     branches:
-      - "*"
+      - main
+    paths:
+      - "angular/**"
+  pull_request:
     paths:
       - "angular/**"
 

diff --git a/.github/workflows/core.yml b/.github/workflows/core.yml
@@ -3,7 +3,10 @@ name: Core
 on:
   push:
     branches:
-      - "*"
+      - main
+    paths:
+      - "core/**"
+  pull_request:
     paths:
       - "core/**"
 

diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml
@@ -3,7 +3,10 @@ name: React
 on:
   push:
     branches:
-      - "*"
+      - main
+    paths:
+      - "react/**"
+  pull_request:
     paths:
       - "react/**"
 

diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml
@@ -3,7 +3,10 @@ name: Tokens
 on:
   push:
     branches:
-      - "*"
+      - main
+    paths:
+      - "tokens/**"
+  pull_request:
     paths:
       - "tokens/**"
 

diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss
@@ -7,7 +7,6 @@
   gap: 0.5rem;
   padding: 1.25rem;
   border-radius: cat-border-radius('l');
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-card/cat-card.scss b/core/src/components/cat-card/cat-card.scss
@@ -5,7 +5,6 @@ $-padding: 1.25rem;
 
 :host {
   display: block;
-  margin-bottom: $cat-body-margin-bottom;
   border-radius: cat-border-radius('l');
   background-color: cat-token('color.ui.background.surface');
   padding: $-padding;

diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss
@@ -1,7 +1,6 @@
 @use 'variables' as *;
 @use 'mixins' as *;
 @use 'src/components/cat-form-hint/cat-form-hint';
-@use '_snippets/checkbox-hint';
 
 $checkbox-width: 1.25rem;
 $checkbox-height: 1.25rem;
@@ -10,7 +9,6 @@ $checkbox-height: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss
@@ -6,7 +6,6 @@
 
 :host {
   display: inline-flex;
-  margin-bottom: $cat-body-margin-bottom;
 
   > div {
     display: flex;

diff --git a/core/src/components/cat-datepicker/cat-datepicker.scss b/core/src/components/cat-datepicker/cat-datepicker.scss
@@ -3,7 +3,6 @@
 
 :host {
   display: flex;
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-form-hint/cat-form-hint.scss b/core/src/components/cat-form-hint/cat-form-hint.scss
@@ -1,15 +1,22 @@
 @use 'variables' as *;
 @use 'mixins' as *;
 
-.hint-section {
+.hint-wrapper {
+  flex: 0 1 auto;
   display: flex;
   gap: 0.5rem;
+}
+
+.hint-section {
+  flex: 1 1 auto;
+  display: flex;
   flex-direction: column;
-  color: rgb(var(--cat-hint-color, inherit));
+  gap: 0.25rem;
+  color: cat-token('color.ui.font.muted');
+  @include cat-body('s', null);
 
   .input-hint,
   ::slotted([slot='hint']) {
-    @include cat-body('s');
     margin: 0 !important;
   }
 }
diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss
@@ -6,8 +6,7 @@
 
 :host {
   display: flex;
-  @include cat-body('m');
-  margin-bottom: $cat-body-margin-bottom;
+  @include cat-body('m', null);
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss
@@ -1,7 +1,6 @@
 @use 'variables' as *;
 @use 'mixins' as *;
 @use 'src/components/cat-form-hint/cat-form-hint';
-@use '_snippets/checkbox-hint';
 
 $radio-width: 1.25rem;
 $radio-height: 1.25rem;
@@ -10,7 +9,6 @@ $radio-height: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-select-demo/cat-select-demo.tsx b/core/src/components/cat-select-demo/cat-select-demo.tsx
@@ -15,8 +15,7 @@ interface Country {
 }
 
 @Component({
-  tag: 'cat-select-demo',
-  shadow: true
+  tag: 'cat-select-demo'
 })
 export class CatSelectTest {
   private multipleSelect?: HTMLCatSelectElement;

diff --git a/core/src/components/cat-select/cat-select.scss b/core/src/components/cat-select/cat-select.scss
@@ -10,7 +10,6 @@
   gap: 0.5rem;
   line-height: 1.25rem;
   position: relative;
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {
@@ -38,12 +37,6 @@ label {
   gap: 1rem;
 }
 
-.input-optional {
-  margin-left: 0.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
-}
-
 .select-wrapper {
   display: flex;
   align-items: flex-start;
@@ -208,14 +201,14 @@ cat-spinner {
 }
 
 .select-empty {
-  margin: $cat-body-margin-bottom 0;
+  margin: 1rem 0;
   padding: 0 1.25rem;
 }
 
 .select-options {
   list-style-type: none;
   margin: 0;
-  padding: $cat-body-margin-bottom * 0.5 0;
+  padding: 0.5rem 0;
 
   cat-checkbox,
   .select-option-single {

diff --git a/core/src/components/cat-skeleton/cat-skeleton.scss b/core/src/components/cat-skeleton/cat-skeleton.scss
@@ -34,11 +34,11 @@ $skeleton-sizes: (
   display: none;
 }
 
-:host([variant='head']) {
+:host([variant='head']:not(:last-child)) {
   margin-bottom: $cat-head-margin-bottom;
 }
 
-:host([variant='body']) {
+:host([variant='body']:not(:last-child)) {
   margin-bottom: $cat-body-margin-bottom;
 }
 

diff --git a/core/src/components/cat-textarea/cat-textarea.scss b/core/src/components/cat-textarea/cat-textarea.scss
@@ -9,7 +9,6 @@
   flex-direction: column;
   gap: 0.5rem;
   @include cat-body('m');
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss
@@ -1,7 +1,6 @@
 @use 'variables' as *;
 @use 'mixins' as *;
 @use 'src/components/cat-form-hint/cat-form-hint';
-@use '_snippets/checkbox-hint';
 
 $toggle-width: 2rem;
 $toggle-height: 1.25rem;
@@ -10,7 +9,6 @@ $toggle-height: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-bottom: $cat-body-margin-bottom;
 }
 
 :host([hidden]) {

diff --git a/core/src/index.html b/core/src/index.html
@@ -337,32 +337,31 @@ <h3>Layout</h3>
               <h2>Button</h2>
               <cat-button>Button</cat-button>
 
-              <h3>Variant</h3>
-              <cat-button variant="filled">Filled</cat-button>
-              <cat-button variant="outlined">Outlined</cat-button>
-              <cat-button variant="text">Text</cat-button>
-              <cat-button variant="link">Link</cat-button>
-
-              <h3>Color</h3>
+              <h3>Color & Variant</h3>
               <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
               <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
               <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
               <br /><br />
               <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
               <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
               <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
               <br /><br />
               <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
               <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
               <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
               <br /><br />
               <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
               <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
               <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
               <br /><br />
               <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
               <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
               <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
 
               <h3>Size</h3>
               <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
@@ -973,6 +972,11 @@ <h2>Scrollable</h2>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
               </cat-scrollable>
             </section>
 
@@ -1145,7 +1149,7 @@ <h1>Whereas recognition of the inherent dignity</h1>
               <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
               <hr />
               <h2>Whereas recognition of the inherent dignity</h2>
-              <span class="cat-mono-s cat-muted">h2, .cat-h3</span>
+              <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
               <hr />
               <h3>Whereas recognition of the inherent dignity</h3>
               <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
@@ -1219,7 +1223,7 @@ <h6 class="cat-muted cat-mb-l">Body styles</h6>
             </div>
           </aside>
           <!-- Example typesetting -->
-          <cat-article class="example">
+          <article class="cat-article example">
             <h6 class="cat-muted cat-mb-l">Example article</h6>
             <h1>Typesetting test</h1>
             <p class="cat-lead">
@@ -1340,7 +1344,7 @@ <h3>Measuring Employee Engagement</h3>
               Understanding the level of engagement in an organization is essential for its continual improvement.
               Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
             </p>
-          </cat-article>
+          </article>
         </section>
       </div>
 

diff --git a/core/src/styles/_snippets/_checkbox-hint.scss b/core/src/styles/_snippets/_checkbox-hint.scss
diff --git a/core/src/styles/_snippets/_form-label.scss b/core/src/styles/_snippets/_form-label.scss
@@ -31,23 +31,19 @@ $cat-input-height: 2.5rem;
   flex-grow: 1;
   justify-content: space-between;
   gap: 0.25rem;
+  color: cat-token('color.ui.font.muted');
 }
 
-.label-optional {
-  display: flex;
+.label-optional,
+.label-character-count {
+  display: inline-flex;
   align-items: center;
   max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
+  @include cat-body('xs', null);
 }
 
 .label-character-count {
-  display: flex;
-  align-items: center;
   margin-left: auto;
-  max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
 }
 
 .input-horizontal,
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ @@
     :host {
       display: inline-flex;
-      margin-bottom: $cat-body-margin-bottom;
       > div {
         display: flex;
@@ Expand Down @@