fix: update tokens and styles (#33)

- add new color primitive tokens
- update theme tokens using the new primitive tokens
- update color tokens documentation with the new primitive tokens and theme tokens
- second iteration to align button, input, select and textarea Circular design system styles

Co-authored-by: Juan Cardenas <juan.cardenas@interzero.de>

docs/assets/plugins/code-block/code-block.css

@@ -7,7 +7,7 @@
 
 .code-block__preview {
   position: relative;
-  border: solid 1px var(--o-color-neutral-200);
+  border: solid 1px var(--o-color-neutral-400);
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
@@ -41,7 +41,7 @@
   font-size: 20px;
   color: var(--o-color-neutral-600);
   background-color: var(--o-color-neutral-0);
-  border-left: solid 1px var(--o-color-neutral-200);
+  border-left: solid 1px var(--o-color-neutral-400);
   border-top-right-radius: 3px;
   cursor: ew-resize;
   transition: 250ms background-color;
@@ -58,7 +58,7 @@
 }
 
 .code-block__source {
-  border: solid 1px var(--o-color-neutral-200);
+  border: solid 1px var(--o-color-neutral-400);
   border-bottom: none;
   border-radius: 0 !important;
   display: none;
@@ -74,7 +74,7 @@
 
 .code-block__buttons {
   position: relative;
-  border: solid 1px var(--o-color-neutral-200);
+  border: solid 1px var(--o-color-neutral-400);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   display: flex;
@@ -97,7 +97,7 @@
 }
 
 .code-block__button:not(:last-of-type) {
-  border-right: solid 1px var(--o-color-neutral-200);
+  border-right: solid 1px var(--o-color-neutral-400);
 }
 
 .code-block__button--html,

docs/assets/styles/docs.css

@@ -37,6 +37,11 @@ a:hover {
   color: var(--o-color-primary-700);
 }
 
+a:focus-visible {
+  outline: var(--o-focus-ring);
+  z-index: 2;
+}
+
 strong {
   font-weight: var(--o-font-weight-bold);
 }

docs/components/input.md

@@ -105,7 +105,12 @@ const App = () => <OInput placeholder="Type something" filled />;
 Use the `disabled` attribute to disable an input.
 
 ```html preview
-<o-input placeholder="Disabled" disabled></o-input>
+<o-input placeholder="Disabled" disabled></o-input><br />
+
+<o-input placeholder="Disabled" disabled>
+  <o-icon name="house" slot="prefix"></o-icon>
+  <o-icon name="chat" slot="suffix"></o-icon>
+</o-input>
 ```
 
 ```jsx react

src/components/button/button.styles.ts

@@ -100,14 +100,14 @@ export default css`
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--o-color-primary-500);
-    border-color: var(--o-color-primary-500);
+    background-color: var(--o-color-primary-700);
+    border-color: var(--o-color-primary-700);
     color: var(--o-color-neutral-0);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--o-color-primary-600);
-    border-color: var(--o-color-primary-600);
+    background-color: var(--o-color-primary-800);
+    border-color: var(--o-color-primary-800);
     color: var(--o-color-neutral-0);
   }
 
@@ -169,20 +169,20 @@ export default css`
 
   /* Danger */
   .button--standard.button--danger {
-    background-color: var(--o-color-danger-600);
-    border-color: var(--o-color-danger-600);
+    background-color: var(--o-color-danger-700);
+    border-color: var(--o-color-danger-700);
     color: var(--o-color-neutral-0);
   }
 
   .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: var(--o-color-danger-500);
-    border-color: var(--o-color-danger-500);
+    background-color: var(--o-color-danger-800);
+    border-color: var(--o-color-danger-800);
     color: var(--o-color-neutral-0);
   }
 
   .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: var(--o-color-danger-600);
-    border-color: var(--o-color-danger-600);
+    background-color: var(--o-color-danger-900);
+    border-color: var(--o-color-danger-900);
     color: var(--o-color-neutral-0);
   }
 

src/components/input/input.styles.ts

@@ -41,17 +41,17 @@ export default css`
   .input--standard.input--focused:not(.input--disabled) {
     background-color: var(--o-input-background-color-focus);
     border-color: var(--o-input-border-color-focus);
-    box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
+    border-width: var(--o-input-border-width-medium);
+    // box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
   }
 
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--o-input-color-focus);
-  }
+  // .input--standard.input--focused:not(.input--disabled) .input__control {
+  //   color: var(--o-input-color-focus);
+  // }
 
   .input--standard.input--disabled {
     background-color: var(--o-input-background-color-disabled);
     border-color: var(--o-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -152,6 +152,11 @@ export default css`
     color: var(--o-input-icon-color);
   }
 
+  .input--standard.input--disabled .input__prefix::slotted(o-icon),
+  .input--standard.input--disabled .input__suffix::slotted(o-icon) {
+    color: var(--o-input-icon-color-disabled);
+  }
+
   /*
    * Size modifiers
    */

src/components/select/select.styles.ts

@@ -64,9 +64,9 @@ export default css`
     -webkit-appearance: none;
   }
 
-  .select:not(.select--disabled):hover .select__display-input {
-    color: var(--o-input-color-hover);
-  }
+  // .select:not(.select--disabled):hover .select__display-input {
+  //   color: var(--o-input-color-hover);
+  // }
 
   .select__display-input:focus {
     outline: none;
@@ -118,11 +118,15 @@ export default css`
     border: solid var(--o-input-border-width) var(--o-input-border-color);
   }
 
+  .select--standard:not(.select--disabled) .select__combobox:hover {
+    background-color: var(--o-input-background-color-hover);
+    border-color: var(--o-input-border-color-hover);
+  }
+
   .select--standard.select--disabled .select__combobox {
     background-color: var(--o-input-background-color-disabled);
     border-color: var(--o-input-border-color-disabled);
     color: var(--o-input-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
     outline: none;
   }
@@ -131,7 +135,8 @@ export default css`
   .select--standard:not(.select--disabled).select--focused .select__combobox {
     background-color: var(--o-input-background-color-focus);
     border-color: var(--o-input-border-color-focus);
-    box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
+    border-width: var(--o-input-border-width-medium);
+    // box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
   }
 
   /* Filled selects */

src/components/textarea/textarea.styles.ts

@@ -35,31 +35,30 @@ export default css`
     background-color: var(--o-input-background-color-hover);
     border-color: var(--o-input-border-color-hover);
   }
-  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
-    color: var(--o-input-color-hover);
-  }
+  // .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
+  //   color: var(--o-input-color-hover);
+  // }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--o-input-background-color-focus);
     border-color: var(--o-input-border-color-focus);
-    color: var(--o-input-color-focus);
-    box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
+    border-width: var(--o-input-border-width-medium);
+    // box-shadow: 0 0 0 var(--o-focus-ring-width) var(--o-input-focus-ring-color);
   }
 
-  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
-    color: var(--o-input-color-focus);
-  }
+  // .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
+  //   color: var(--o-input-color-focus);
+  // }
 
   .textarea--standard.textarea--disabled {
     background-color: var(--o-input-background-color-disabled);
     border-color: var(--o-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--o-input-color-disabled);
-  }
+  // .textarea--standard.textarea--disabled .textarea__control {
+  //   color: var(--o-input-color-disabled);
+  // }
 
   .textarea--standard.textarea--disabled .textarea__control::placeholder {
     color: var(--o-input-placeholder-color-disabled);

src/styles/form-control.styles.ts

@@ -13,7 +13,8 @@ export default css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: var(--o-input-label-color);
-    margin-bottom: var(--o-spacing-3x-small);
+    margin-bottom: var(--o-spacing-x-small);
+    line-height: var(--o-line-height-loose);
   }
 
   .form-control--has-label.form-control--small .form-control__label {
@@ -38,7 +39,8 @@ export default css`
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--o-input-help-text-color);
-    margin-top: var(--o-spacing-3x-small);
+    margin-top: var(--o-spacing-x-small);
+    line-height: var(--o-line-height-loose);
   }
 
   .form-control--has-help-text.form-control--small .form-control__help-text {