color updates

TykTechnologies · Jul 15, 2024 · 5ac63e3 · 5ac63e3
1 parent 4460dc8
commit 5ac63e3
Show file tree

Hide file tree

Showing 18 changed files with 36 additions and 24 deletions.
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/sass/common/sass/variables.scss b/lib/sass/common/sass/variables.scss
@@ -143,18 +143,18 @@ $form-control-addon-padding-left: 10px !default;
 $form-control-addon-padding-right: 10px !default;
 $form-control-border: $general-border-width solid theme-color('secondary', 'dark') !default;
 $form-control-disabled-border: $general-border-width solid theme-color('secondary', 'base-dark') !default;
-$form-control-placeholder-color: --color-secondary--dark !default;
+$form-control-placeholder-color: var(--color-secondary--dark) !default;
 $form-control-disabled-background-color: $color-background !default;
 $form-control-disabled-color: $text-color !default;
-$form-control-border-focus: 2px solid theme-color('success', 'base') !default;
+$form-control-border-focus: var(--general-border-width) solid var(--form-control-border-focus) !default;
 $form-control-placeholder-font-family: $font-family-medium !default;
 $form-control-error-colour: theme-color('danger', 'dark') !default;
 $form-default-color: theme-color('secondary', 'dark') !default;
 $form-primary-color: theme-color('primary', 'base') !default;
 $form-success-color: theme-color('success', 'base') !default;
 
 $error-border: $general-border-width solid theme-color('danger', 'dark') !default;
-$error-border-left: 2px solid theme-color('danger', 'dark') !default;
+$error-border-left: var(--general-border-width) solid theme-color('danger', 'dark') !default;
 $help-block-color: $text-color !default;
 $help-block-font-style: normal !default;
 $help-block-padding: 0 0 0 $form-control-padding-left !default;

diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.css.map b/lib/tyk-ui.css.map
diff --git a/lib/tyk-ui.js b/lib/tyk-ui.js
diff --git a/lib/tyk-ui.js.map b/lib/tyk-ui.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.3.0-alpha3",
+  "version": "4.3.0-alpha4",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/common/css/layout.css b/src/common/css/layout.css
@@ -21,7 +21,7 @@ body {
 
 .well {
   background: transparent;
-  border: var(--general-border-width) solid var(--color-default-light);
+  border: var(--general-border-width) solid var(--color-secondary-dark);
   border-radius: var(--general-border-radius);
   box-shadow: none;
 

diff --git a/src/common/sass/variables.scss b/src/common/sass/variables.scss
@@ -143,18 +143,18 @@ $form-control-addon-padding-left: 10px !default;
 $form-control-addon-padding-right: 10px !default;
 $form-control-border: $general-border-width solid theme-color('secondary', 'dark') !default;
 $form-control-disabled-border: $general-border-width solid theme-color('secondary', 'base-dark') !default;
-$form-control-placeholder-color: --color-secondary--dark !default;
+$form-control-placeholder-color: var(--color-secondary--dark) !default;
 $form-control-disabled-background-color: $color-background !default;
 $form-control-disabled-color: $text-color !default;
-$form-control-border-focus: 2px solid theme-color('success', 'base') !default;
+$form-control-border-focus: var(--general-border-width) solid var(--form-control-border-focus) !default;
 $form-control-placeholder-font-family: $font-family-medium !default;
 $form-control-error-colour: theme-color('danger', 'dark') !default;
 $form-default-color: theme-color('secondary', 'dark') !default;
 $form-primary-color: theme-color('primary', 'base') !default;
 $form-success-color: theme-color('success', 'base') !default;
 
 $error-border: $general-border-width solid theme-color('danger', 'dark') !default;
-$error-border-left: 2px solid theme-color('danger', 'dark') !default;
+$error-border-left: var(--general-border-width) solid theme-color('danger', 'dark') !default;
 $help-block-color: $text-color !default;
 $help-block-font-style: normal !default;
 $help-block-padding: 0 0 0 $form-control-padding-left !default;

diff --git a/src/components/ButtonGroup/Readme.md b/src/components/ButtonGroup/Readme.md
@@ -31,6 +31,13 @@ import Dropdown from '../../form/components/Dropdown';
       />
     </Dropdown>
 </ButtonGroup>
+<ButtonGroup
+  label="Button Group"
+>
+  <Button theme="secondary">button 1</Button>
+  <Button theme="secondary">button 2</Button>
+  <Button theme="secondary">button 3</Button>
+</ButtonGroup>
 <ButtonGroup
   label="Button Group"
 >

diff --git a/src/components/Panel/Panel.css b/src/components/Panel/Panel.css
@@ -5,7 +5,7 @@
   --padding-panel-body: 25px;
   --padding-x-right-panel-collapsable: 48px;
   --padding-x-left-panel-collapsable: var(--padding-x-right-panel-collapsable);
-  --panel-border-radius: 0;
+  --panel-border-radius: 8px;
   --panel-default-border-bottom-color: var(--color-secondary-dark);
   --panel-header-font-size: var(--base-font-size);
   --panel-header-font-family: var(--font-family-bold);

diff --git a/src/components/Table/Table.css b/src/components/Table/Table.css
@@ -23,6 +23,7 @@
     text-transform: capitalize;
     padding: var(--table-th-padding);
     vertical-align: middle;
+    white-space: nowrap;
 
     &.fit {
       white-space: nowrap;

diff --git a/src/form/components/EditableList/EditableList.css b/src/form/components/EditableList/EditableList.css
@@ -37,12 +37,17 @@
 }
 
 .tyk-editable-list__header {
-  padding-block: var(--spacing-base);
-  font-size: 11px;
-  text-transform: uppercase;
-  background-color: white;
-  border-start-start-radius: var(--general-border-radius);
+  background-color: var(--color-secondary-light);
+  border-block-end: 1px solid var(--color-secondary-dark);
   border-start-end-radius: var(--general-border-radius);
+  border-start-start-radius: var(--general-border-radius);
+  color: var(--text-color);
+  font-size: var(--sm-font-size);
+  line-height: var(--sm-line-height);
+  font-family: var(--font-family-bold);
+  text-transform: capitalize;
+
+  padding-block: var(--spacing-base);
   border: var(--general-border-width) solid var(--color-secondary-dark);
   border-block-end: 1px solid var(--color-secondary-dark) !important;
   color: var(--text-color) !important;

diff --git a/src/form/components/EditableList/js/EditableListForm.js b/src/form/components/EditableList/js/EditableListForm.js
@@ -314,7 +314,7 @@ class EditableListForm extends Component {
                     disabled={this.hasMainFormErrors(errors)}
                     className="tyk-editable-list__submit-btn"
                     onClick={this.submitForm}
-                    theme="default"
+                    theme="primary"
                     type="button"
                     size={displayType === 'inline' ? 'sm' : 'md'}
                   >

diff --git a/src/form/components/Toggle/Toggle.css b/src/form/components/Toggle/Toggle.css
@@ -56,7 +56,6 @@
   font-size: var(--toggle-label-font-size);
   padding: var(--toggle-padding);
   inline-size: 100%;
-  color: var(--toggle-label-color);
 }
 
 .tyk-toggle.inline-label .tyk-toggle__label {