@fkui/design 5.40.0 → 5.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/fkui-exp.css +24 -24
  2. package/lib/fkui-exp.min.css +1 -1
  3. package/lib/fkui-int.css +24 -24
  4. package/lib/fkui-int.min.css +1 -1
  5. package/package.json +6 -6
  6. package/src/components/button/_button.scss +6 -12
  7. package/src/components/chip/_chip.scss +13 -12
  8. package/src/components/chip/_variables.scss +17 -0
package/lib/fkui-exp.css CHANGED
@@ -4991,9 +4991,9 @@ input[type=search]:focus,
4991
4991
  padding: 0.25rem;
4992
4992
  }
4993
4993
  .radio-button-group--chip .radio-button.disabled .radio-button__label {
4994
- background: var(--f-background-button-disabled, #f4f4f4);
4995
- border-color: var(--f-border-color-button-disabled, #8d8e91);
4996
- color: var(--f-text-color-button-disabled, #8d8e91);
4994
+ background: var(--fkds-color-background-disabled, #f4f4f4);
4995
+ border-color: var(--fkds-color-border-primary, #8d8e91);
4996
+ color: var(--fkds-color-text-disabled, #8d8e91);
4997
4997
  cursor: not-allowed;
4998
4998
  }
4999
4999
  .radio-button-group--chip .radio-button__label {
@@ -5003,9 +5003,9 @@ input[type=search]:focus,
5003
5003
  font-weight: var(--f-font-weight-medium, 700);
5004
5004
  padding: 0.5rem 1rem;
5005
5005
  border-radius: 20px;
5006
- border: var(--f-border-width-medium, 2px) solid var(--f-border-color-input, #8d8e91);
5007
- background-color: var(--f-background-chip, #ffffff);
5008
- color: var(--f-text-color-chip, #1b1e23);
5006
+ border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
5007
+ background-color: var(--fkds-color-background-primary, #ffffff);
5008
+ color: var(--fkds-color-text-primary, #1b1e23);
5009
5009
  justify-content: center;
5010
5010
  max-width: 400px;
5011
5011
  -webkit-user-select: none;
@@ -5019,14 +5019,14 @@ input[type=search]:focus,
5019
5019
  margin-right: 0.5rem;
5020
5020
  }
5021
5021
  .radio-button-group--chip .radio-button__label:hover {
5022
- border-color: var(--f-border-color-chip-hover, #35805b);
5023
- background-color: var(--f-background-chip-hover, #f3f8f5);
5024
- color: var(--f-text-color-chip-hover, #1b1e23);
5022
+ border-color: var(--fkds-color-border-primary, #8d8e91);
5023
+ background-color: var(--fkds-color-action-background-select-hover, #dbe9e2);
5024
+ color: var(--fkds-color-text-primary, #1b1e23);
5025
5025
  }
5026
5026
  .radio-button-group--chip input[type=radio]:checked + .radio-button__label {
5027
- background: var(--f-background-chip-active, #35805b);
5028
- border-color: var(--f-border-color-chip-active, #35805b);
5029
- color: var(--f-text-color-chip-active, #ffffff);
5027
+ background: var(--fkds-color-action-background-select-default, #35805b);
5028
+ border-color: transparent;
5029
+ color: var(--fkds-color-text-inverted, #ffffff);
5030
5030
  }
5031
5031
  .radio-button-group--chip input[type=radio]:focus + label.radio-button__label {
5032
5032
  border-radius: 20px;
@@ -5058,9 +5058,9 @@ input[type=search]:focus,
5058
5058
  padding: 0.25rem;
5059
5059
  }
5060
5060
  .checkbox-group--chip .checkbox.disabled .checkbox__label {
5061
- background: var(--f-background-button-disabled, #f4f4f4);
5062
- border-color: var(--f-border-color-button-disabled, #8d8e91);
5063
- color: var(--f-text-color-button-disabled, #8d8e91);
5061
+ background: var(--fkds-color-background-disabled, #f4f4f4);
5062
+ border-color: var(--fkds-color-border-primary, #8d8e91);
5063
+ color: var(--fkds-color-text-disabled, #8d8e91);
5064
5064
  cursor: not-allowed;
5065
5065
  }
5066
5066
  .checkbox-group--chip .checkbox__label {
@@ -5070,9 +5070,9 @@ input[type=search]:focus,
5070
5070
  font-weight: var(--f-font-weight-medium, 700);
5071
5071
  padding: 0.5rem 1rem;
5072
5072
  border-radius: 20px;
5073
- border: var(--f-border-width-medium, 2px) solid var(--f-border-color-input, #8d8e91);
5074
- background-color: var(--f-background-chip, #ffffff);
5075
- color: var(--f-text-color-chip, #1b1e23);
5073
+ border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
5074
+ background-color: var(--fkds-color-background-primary, #ffffff);
5075
+ color: var(--fkds-color-text-primary, #1b1e23);
5076
5076
  justify-content: center;
5077
5077
  max-width: 400px;
5078
5078
  -webkit-user-select: none;
@@ -5086,14 +5086,14 @@ input[type=search]:focus,
5086
5086
  margin-right: 0.5rem;
5087
5087
  }
5088
5088
  .checkbox-group--chip .checkbox__label:hover {
5089
- border-color: var(--f-border-color-chip-hover, #35805b);
5090
- background-color: var(--f-background-chip-hover, #f3f8f5);
5091
- color: var(--f-text-color-chip-hover, #1b1e23);
5089
+ border-color: var(--fkds-color-border-primary, #8d8e91);
5090
+ background-color: var(--fkds-color-action-background-select-hover, #dbe9e2);
5091
+ color: var(--fkds-color-text-primary, #1b1e23);
5092
5092
  }
5093
5093
  .checkbox-group--chip input[type=checkbox]:checked + .checkbox__label {
5094
- background: var(--f-background-chip-active, #35805b);
5095
- border-color: var(--f-border-color-chip-active, #35805b);
5096
- color: var(--f-text-color-chip-active, #ffffff);
5094
+ background: var(--fkds-color-action-background-select-default, #35805b);
5095
+ border-color: transparent;
5096
+ color: var(--fkds-color-text-inverted, #ffffff);
5097
5097
  }
5098
5098
  .checkbox-group--chip input[type=checkbox]:focus + label.checkbox__label {
5099
5099
  border-radius: 20px;