uikit-react-public 0.32.4 → 0.36.0

package/dist/theme/useTheme.d.ts

@@ -3,6 +3,7 @@ import { ThemeType } from './original/defaultTheme';
 export declare const themes: {
     readonly default: ThemeType;
     readonly light: ThemeType;
+    readonly dark: ThemeType;
 };
 export type ThemeName = keyof typeof themes;
 export declare const ThemeContextProvider: React.FC<{
@@ -143,44 +144,6 @@ declare const useTheme: () => [{
                 };
             };
         };
-        whiteAlpha: {
-            "10": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "11": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "12": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "13": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "14": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "15": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-        };
         red: {
             "10": {
                 $value: {
@@ -757,6 +720,7 @@ declare const useTheme: () => [{
         border: {
             default: string;
             brand: string;
+            brandPrimary: string;
             brandHover: string;
             brandSubtle: string;
             primary: string;
@@ -767,6 +731,8 @@ declare const useTheme: () => [{
             inverse: string;
             brandInverse: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             focus: string;
             success: string;
             critical: string;
@@ -774,8 +740,10 @@ declare const useTheme: () => [{
         };
         fill: {
             default: string;
-            hover: string;
+            primary: string;
+            subtle: string;
             brand: string;
+            brandSubtle: string;
             brandHover: string;
             brandPressed: string;
             brandSubtleSelected: string;
@@ -789,11 +757,15 @@ declare const useTheme: () => [{
             criticalHover: string;
             criticalSelected: string;
             criticalPressed: string;
-            warning: string;
-            warningHover: string;
-            warningSelected: string;
-            warningPressed: string;
+            criticalSubtle: string;
+            caution: string;
+            cautionHover: string;
+            cautionSelected: string;
+            cautionPressed: string;
+            cautionSubtle: string;
+            warningSubtle: string;
             success: string;
+            successSubtle: string;
         };
         icon: {
             default: string;
@@ -804,19 +776,23 @@ declare const useTheme: () => [{
             disabledOnBgFill: string;
             brand: string;
             brandHover: string;
+            brandPressed: string;
             brandSelectedOnBgFill: string;
             visited: string;
             brandPrimary: string;
-            brandInverted: string;
+            brandInverse: string;
             inverse: string;
-            inverseHover: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             inverseTertiary: string;
             inverseDisabled: string;
             critical: string;
             criticalOnBgFill: string;
             success: string;
             successOnBgFill: string;
+            caution: string;
+            cautionSubtle: string;
             warning: string;
             warningOnBgFill: string;
         };
@@ -827,13 +803,11 @@ declare const useTheme: () => [{
             brand: string;
             brandHover: string;
             brandSelected: string;
+            brandSecondary: string;
+            brandTertiary: string;
             warning: string;
             success: string;
             critical: string;
-            hover: string;
-            selected: string;
-            disabled: string;
-            tertiary: string;
             inverseBrand: string;
             inverseBrandPrimary: string;
             backdrop: string;
@@ -846,12 +820,19 @@ declare const useTheme: () => [{
             inverse: string;
             onBgFillDisabled: string;
             brand: string;
+            brandOnLight: string;
             brandAccent: string;
             brandHover: string;
+            brandPressed: string;
             brandInverse: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             brandPrimary: string;
             critical: string;
+            cautionSubtle: string;
+            caution: string;
+            success: string;
             warningOnBgFill: string;
         };
         link: {
@@ -1477,44 +1458,6 @@ declare const useTheme: () => [{
                 };
             };
         };
-        whiteAlpha: {
-            "10": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "11": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "12": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "13": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "14": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-            "15": {
-                $value: {
-                    hex: string;
-                    alpha: number;
-                };
-            };
-        };
         red: {
             "10": {
                 $value: {
@@ -2091,6 +2034,7 @@ declare const useTheme: () => [{
         border: {
             default: string;
             brand: string;
+            brandPrimary: string;
             brandHover: string;
             brandSubtle: string;
             primary: string;
@@ -2101,6 +2045,8 @@ declare const useTheme: () => [{
             inverse: string;
             brandInverse: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             focus: string;
             success: string;
             critical: string;
@@ -2108,8 +2054,10 @@ declare const useTheme: () => [{
         };
         fill: {
             default: string;
-            hover: string;
+            primary: string;
+            subtle: string;
             brand: string;
+            brandSubtle: string;
             brandHover: string;
             brandPressed: string;
             brandSubtleSelected: string;
@@ -2123,11 +2071,15 @@ declare const useTheme: () => [{
             criticalHover: string;
             criticalSelected: string;
             criticalPressed: string;
-            warning: string;
-            warningHover: string;
-            warningSelected: string;
-            warningPressed: string;
+            criticalSubtle: string;
+            caution: string;
+            cautionHover: string;
+            cautionSelected: string;
+            cautionPressed: string;
+            cautionSubtle: string;
+            warningSubtle: string;
             success: string;
+            successSubtle: string;
         };
         icon: {
             default: string;
@@ -2138,19 +2090,23 @@ declare const useTheme: () => [{
             disabledOnBgFill: string;
             brand: string;
             brandHover: string;
+            brandPressed: string;
             brandSelectedOnBgFill: string;
             visited: string;
             brandPrimary: string;
-            brandInverted: string;
+            brandInverse: string;
             inverse: string;
-            inverseHover: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             inverseTertiary: string;
             inverseDisabled: string;
             critical: string;
             criticalOnBgFill: string;
             success: string;
             successOnBgFill: string;
+            caution: string;
+            cautionSubtle: string;
             warning: string;
             warningOnBgFill: string;
         };
@@ -2161,13 +2117,11 @@ declare const useTheme: () => [{
             brand: string;
             brandHover: string;
             brandSelected: string;
+            brandSecondary: string;
+            brandTertiary: string;
             warning: string;
             success: string;
             critical: string;
-            hover: string;
-            selected: string;
-            disabled: string;
-            tertiary: string;
             inverseBrand: string;
             inverseBrandPrimary: string;
             backdrop: string;
@@ -2180,12 +2134,19 @@ declare const useTheme: () => [{
             inverse: string;
             onBgFillDisabled: string;
             brand: string;
+            brandOnLight: string;
             brandAccent: string;
             brandHover: string;
+            brandPressed: string;
             brandInverse: string;
             brandInverseSecondary: string;
+            brandInverseSecondaryHover: string;
+            brandInverseSecondarySelected: string;
             brandPrimary: string;
             critical: string;
+            cautionSubtle: string;
+            caution: string;
+            success: string;
             warningOnBgFill: string;
         };
         link: {

package/lib/components/Button/style/buttonPrimarySubtleStyle.ts

@@ -15,9 +15,9 @@ const buttonPrimarySubtleStyle = (
 
   const bgColour = fill.inverse;
   const borderColour = border.subtle;
-  const bgHoverColour = fill.hover;
-  const bgActiveColour = fill.hover;
-  const selectedFillColour = fill.brandSubtleHover;
+  const bgHoverColour = fill.brandSubtleHover;
+  const bgActiveColour = fill.brandSubtleSelected;
+  const selectedFillColour = fill.brandSubtleSelected;
   const selectedBorderColour = border.brand;
   const selectedTextColour = text.brandHover;
 

package/lib/components/Button/style/buttonPrimaryWarningStyle.ts

@@ -13,10 +13,10 @@ const buttonPrimaryWarningStyle = (
   } = theme;
 
   const textColour = text.default;
-  const bgColour = fill.warning;
-  const bgHoverColour = fill.warningHover;
-  const bgActiveColour = fill.warningPressed;
-  const selectedBgColour = fill.warningSelected;
+  const bgColour = fill.caution;
+  const bgHoverColour = fill.cautionHover;
+  const bgActiveColour = fill.cautionPressed;
+  const selectedBgColour = fill.cautionSelected;
 
   const baseStyle = css`
     background-color: ${bgColour};