@0xsquid/ui 0.23.2-beta.0 → 0.23.2-beta.1

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 (6) hide show
  1. package/dist/cjs/index.js +135 -84
  2. package/dist/cjs/types/types/config.d.ts +5 -24
  3. package/dist/esm/index.js +135 -84
  4. package/dist/esm/types/types/config.d.ts +5 -24
  5. package/dist/index.d.ts +2 -0
  6. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -3042,78 +3042,112 @@ function ArrowButton(_a) {
3042
3042
  'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
3043
3043
  }
3044
3044
 
3045
+ const INTERNAL_SQUID_THEME_KEYS = [
3046
+ 'grey-100',
3047
+ 'grey-200',
3048
+ 'grey-300',
3049
+ 'grey-400',
3050
+ 'grey-500',
3051
+ 'grey-600',
3052
+ 'grey-700',
3053
+ 'grey-800',
3054
+ 'grey-900',
3055
+ 'royal-300',
3056
+ 'royal-400',
3057
+ 'royal-500',
3058
+ 'royal-700',
3059
+ 'status-positive',
3060
+ 'status-negative',
3061
+ 'status-partial',
3062
+ 'material-light-thin',
3063
+ 'material-light-average',
3064
+ 'material-light-thick',
3065
+ 'material-dark-thin',
3066
+ 'material-dark-average',
3067
+ 'material-dark-thick',
3068
+ // grey-100 with 0.05 opacity
3069
+ 'grey-100-005',
3070
+ // material-light and grey-900 blended color
3071
+ 'material-light-blend-grey-900',
3072
+ ];
3045
3073
  const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
3046
3074
  /**
3047
3075
  * Mapping between readable variables name and css variables used TailwindCSS config
3048
3076
  */
3049
- const themeTypesKeys = {
3050
- 'grey-100': {
3051
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
3052
- },
3053
- 'grey-200': {
3054
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
3055
- },
3056
- 'grey-300': {
3057
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
3058
- },
3059
- 'grey-400': {
3060
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
3061
- },
3062
- 'grey-500': {
3063
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
3064
- },
3065
- 'grey-600': {
3066
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
3067
- },
3068
- 'grey-700': {
3069
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
3070
- },
3071
- 'grey-800': {
3072
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
3073
- },
3074
- 'grey-900': {
3075
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
3076
- },
3077
- 'material-dark-average': {
3078
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
3079
- },
3080
- 'material-dark-thick': {
3081
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
3082
- },
3083
- 'material-dark-thin': {
3084
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
3085
- },
3086
- 'material-light-average': {
3087
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
3088
- },
3089
- 'material-light-thick': {
3090
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
3091
- },
3092
- 'material-light-thin': {
3093
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
3094
- },
3095
- 'royal-400': {
3096
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
3097
- },
3098
- 'royal-500': {
3099
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
3100
- },
3101
- 'status-negative': {
3102
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
3103
- },
3104
- 'status-positive': {
3105
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
3106
- },
3107
- 'status-partial': {
3108
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
3109
- },
3110
- 'grey-100-005': {
3111
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
3112
- },
3113
- 'material-light-blend-grey-900': {
3114
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
3077
+ const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) => [
3078
+ key,
3079
+ {
3080
+ cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}${key}`,
3115
3081
  },
3116
- };
3082
+ ]));
3083
+ // {
3084
+ // 'grey-100': {
3085
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
3086
+ // },
3087
+ // 'grey-200': {
3088
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
3089
+ // },
3090
+ // 'grey-300': {
3091
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
3092
+ // },
3093
+ // 'grey-400': {
3094
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
3095
+ // },
3096
+ // 'grey-500': {
3097
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
3098
+ // },
3099
+ // 'grey-600': {
3100
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
3101
+ // },
3102
+ // 'grey-700': {
3103
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
3104
+ // },
3105
+ // 'grey-800': {
3106
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
3107
+ // },
3108
+ // 'grey-900': {
3109
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
3110
+ // },
3111
+ // 'material-dark-average': {
3112
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
3113
+ // },
3114
+ // 'material-dark-thick': {
3115
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
3116
+ // },
3117
+ // 'material-dark-thin': {
3118
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
3119
+ // },
3120
+ // 'material-light-average': {
3121
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
3122
+ // },
3123
+ // 'material-light-thick': {
3124
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
3125
+ // },
3126
+ // 'material-light-thin': {
3127
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
3128
+ // },
3129
+ // 'royal-400': {
3130
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
3131
+ // },
3132
+ // 'royal-500': {
3133
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
3134
+ // },
3135
+ // 'status-negative': {
3136
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
3137
+ // },
3138
+ // 'status-positive': {
3139
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
3140
+ // },
3141
+ // 'status-partial': {
3142
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
3143
+ // },
3144
+ // 'grey-100-005': {
3145
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
3146
+ // },
3147
+ // 'material-light-blend-grey-900': {
3148
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
3149
+ // },
3150
+ // }
3117
3151
 
3118
3152
  function SearchIcon() {
3119
3153
  return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -17566,8 +17600,10 @@ const lightTheme = {
17566
17600
  'content-800': '#EDEEF3',
17567
17601
  'content-900': '#FBFBFD',
17568
17602
  // accent
17603
+ 'accent-300': '#8C53C5',
17569
17604
  'accent-400': '#9E79D2',
17570
17605
  'accent-500': '#B893EC',
17606
+ 'accent-700': '#E3D0FD',
17571
17607
  // status
17572
17608
  'status-positive': '#17CF26',
17573
17609
  'status-negative': '#FF5B4D',
@@ -17585,8 +17621,10 @@ const darkTheme = {
17585
17621
  'content-800': '#292C32',
17586
17622
  'content-900': '#17191C',
17587
17623
  // accent
17624
+ 'accent-300': '#D9BEF4',
17588
17625
  'accent-400': '#B893EC',
17589
17626
  'accent-500': '#9E79D2',
17627
+ 'accent-700': '#6B45A1',
17590
17628
  // status
17591
17629
  'status-positive': '#7AE870',
17592
17630
  'status-negative': '#FF4D5B',
@@ -61817,23 +61855,30 @@ const parseSquidTheme = (userTheme) => {
61817
61855
  // material-dark-thin -> grey-900 + 10% opacity
61818
61856
  // material-dark-average -> grey-900 + 33% opacity
61819
61857
  // material-dark-thick -> grey-900 + 66% opacity
61820
- const materialVariants = {
61821
- 'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
61822
- 'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
61823
- 'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
61824
- 'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
61825
- 'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
61826
- 'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
61827
- };
61858
+ let materialVariants = {};
61859
+ if (squidTheme['grey-100'] && squidTheme['grey-900']) {
61860
+ materialVariants = {
61861
+ 'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
61862
+ 'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
61863
+ 'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
61864
+ 'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
61865
+ 'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
61866
+ 'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
61867
+ };
61868
+ }
61828
61869
  squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
61829
61870
  const styleKeys = Object.keys(themeTypesKeys);
61830
- const parsed = styleKeys.map((sk) => {
61871
+ const parsed = styleKeys
61872
+ .map((sk) => {
61831
61873
  const themeItem = themeTypesKeys[sk];
61874
+ if (!themeItem)
61875
+ return {};
61832
61876
  let userValue = squidTheme[sk];
61833
61877
  return {
61834
61878
  [themeItem.cssVariable]: userValue,
61835
61879
  };
61836
- });
61880
+ })
61881
+ .filter((obj) => Object.keys(obj).length > 0);
61837
61882
  // adds a variant with 0.05 opacity for each color
61838
61883
  // will result in variables like this:
61839
61884
  // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
@@ -61848,13 +61893,19 @@ const parseSquidTheme = (userTheme) => {
61848
61893
  // [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
61849
61894
  // })
61850
61895
  // })
61851
- parsed.push({
61852
- [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
61853
- });
61854
- // color representing the blend of material-light and grey-900
61855
- parsed.push({
61856
- [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
61857
- });
61896
+ if (themeTypesKeys['grey-100-005'] && squidTheme['grey-100']) {
61897
+ parsed.push({
61898
+ [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
61899
+ });
61900
+ }
61901
+ if (themeTypesKeys['material-light-blend-grey-900'] &&
61902
+ squidTheme['material-light-thin'] &&
61903
+ squidTheme['grey-900']) {
61904
+ // color representing the blend of material-light and grey-900
61905
+ parsed.push({
61906
+ [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
61907
+ });
61908
+ }
61858
61909
  return parsed.reduce((a, v) => {
61859
61910
  const key = Object.keys(v)[0];
61860
61911
  return Object.assign(Object.assign({}, a), { [key]: v[key] });
package/dist/cjs/types/types/config.d.ts CHANGED
@@ -2,30 +2,8 @@
2
2
  * The color format must be of type #FFFFFF
3
3
  */
4
4
  export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
5
- export interface InternalSquidTheme {
6
- 'grey-100': string;
7
- 'grey-200': string;
8
- 'grey-300': string;
9
- 'grey-400': string;
10
- 'grey-500': string;
11
- 'grey-600': string;
12
- 'grey-700': string;
13
- 'grey-800': string;
14
- 'grey-900': string;
15
- 'royal-400': string;
16
- 'royal-500': string;
17
- 'status-positive': string;
18
- 'status-negative': string;
19
- 'status-partial': string;
20
- 'material-light-thin': string;
21
- 'material-light-average': string;
22
- 'material-light-thick': string;
23
- 'material-dark-thin': string;
24
- 'material-dark-average': string;
25
- 'material-dark-thick': string;
26
- 'grey-100-005': string;
27
- 'material-light-blend-grey-900': string;
28
- }
5
+ declare const INTERNAL_SQUID_THEME_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "status-positive", "status-negative", "status-partial", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900"];
6
+ export type InternalSquidTheme = Record<(typeof INTERNAL_SQUID_THEME_KEYS)[number], string>;
29
7
  export type SquidTheme = {
30
8
  'content-100': string;
31
9
  'content-200': string;
@@ -36,8 +14,10 @@ export type SquidTheme = {
36
14
  'content-700': string;
37
15
  'content-800': string;
38
16
  'content-900': string;
17
+ 'accent-300': string;
39
18
  'accent-400': string;
40
19
  'accent-500': string;
20
+ 'accent-700': string;
41
21
  'status-positive': string;
42
22
  'status-negative': string;
43
23
  'status-warning': string;
@@ -49,3 +29,4 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
49
29
  export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
50
30
  cssVariable: string;
51
31
  }>;
32
+ export {};
package/dist/esm/index.js CHANGED
@@ -3022,78 +3022,112 @@ function ArrowButton(_a) {
3022
3022
  'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsx(ArrowRightIcon, {}) })] })));
3023
3023
  }
3024
3024
 
3025
+ const INTERNAL_SQUID_THEME_KEYS = [
3026
+ 'grey-100',
3027
+ 'grey-200',
3028
+ 'grey-300',
3029
+ 'grey-400',
3030
+ 'grey-500',
3031
+ 'grey-600',
3032
+ 'grey-700',
3033
+ 'grey-800',
3034
+ 'grey-900',
3035
+ 'royal-300',
3036
+ 'royal-400',
3037
+ 'royal-500',
3038
+ 'royal-700',
3039
+ 'status-positive',
3040
+ 'status-negative',
3041
+ 'status-partial',
3042
+ 'material-light-thin',
3043
+ 'material-light-average',
3044
+ 'material-light-thick',
3045
+ 'material-dark-thin',
3046
+ 'material-dark-average',
3047
+ 'material-dark-thick',
3048
+ // grey-100 with 0.05 opacity
3049
+ 'grey-100-005',
3050
+ // material-light and grey-900 blended color
3051
+ 'material-light-blend-grey-900',
3052
+ ];
3025
3053
  const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
3026
3054
  /**
3027
3055
  * Mapping between readable variables name and css variables used TailwindCSS config
3028
3056
  */
3029
- const themeTypesKeys = {
3030
- 'grey-100': {
3031
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
3032
- },
3033
- 'grey-200': {
3034
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
3035
- },
3036
- 'grey-300': {
3037
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
3038
- },
3039
- 'grey-400': {
3040
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
3041
- },
3042
- 'grey-500': {
3043
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
3044
- },
3045
- 'grey-600': {
3046
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
3047
- },
3048
- 'grey-700': {
3049
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
3050
- },
3051
- 'grey-800': {
3052
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
3053
- },
3054
- 'grey-900': {
3055
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
3056
- },
3057
- 'material-dark-average': {
3058
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
3059
- },
3060
- 'material-dark-thick': {
3061
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
3062
- },
3063
- 'material-dark-thin': {
3064
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
3065
- },
3066
- 'material-light-average': {
3067
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
3068
- },
3069
- 'material-light-thick': {
3070
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
3071
- },
3072
- 'material-light-thin': {
3073
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
3074
- },
3075
- 'royal-400': {
3076
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
3077
- },
3078
- 'royal-500': {
3079
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
3080
- },
3081
- 'status-negative': {
3082
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
3083
- },
3084
- 'status-positive': {
3085
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
3086
- },
3087
- 'status-partial': {
3088
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
3089
- },
3090
- 'grey-100-005': {
3091
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
3092
- },
3093
- 'material-light-blend-grey-900': {
3094
- cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
3057
+ const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) => [
3058
+ key,
3059
+ {
3060
+ cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}${key}`,
3095
3061
  },
3096
- };
3062
+ ]));
3063
+ // {
3064
+ // 'grey-100': {
3065
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
3066
+ // },
3067
+ // 'grey-200': {
3068
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
3069
+ // },
3070
+ // 'grey-300': {
3071
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
3072
+ // },
3073
+ // 'grey-400': {
3074
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
3075
+ // },
3076
+ // 'grey-500': {
3077
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
3078
+ // },
3079
+ // 'grey-600': {
3080
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
3081
+ // },
3082
+ // 'grey-700': {
3083
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
3084
+ // },
3085
+ // 'grey-800': {
3086
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
3087
+ // },
3088
+ // 'grey-900': {
3089
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
3090
+ // },
3091
+ // 'material-dark-average': {
3092
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
3093
+ // },
3094
+ // 'material-dark-thick': {
3095
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
3096
+ // },
3097
+ // 'material-dark-thin': {
3098
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
3099
+ // },
3100
+ // 'material-light-average': {
3101
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
3102
+ // },
3103
+ // 'material-light-thick': {
3104
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
3105
+ // },
3106
+ // 'material-light-thin': {
3107
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
3108
+ // },
3109
+ // 'royal-400': {
3110
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
3111
+ // },
3112
+ // 'royal-500': {
3113
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
3114
+ // },
3115
+ // 'status-negative': {
3116
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
3117
+ // },
3118
+ // 'status-positive': {
3119
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
3120
+ // },
3121
+ // 'status-partial': {
3122
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
3123
+ // },
3124
+ // 'grey-100-005': {
3125
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
3126
+ // },
3127
+ // 'material-light-blend-grey-900': {
3128
+ // cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
3129
+ // },
3130
+ // }
3097
3131
 
3098
3132
  function SearchIcon() {
3099
3133
  return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -17546,8 +17580,10 @@ const lightTheme = {
17546
17580
  'content-800': '#EDEEF3',
17547
17581
  'content-900': '#FBFBFD',
17548
17582
  // accent
17583
+ 'accent-300': '#8C53C5',
17549
17584
  'accent-400': '#9E79D2',
17550
17585
  'accent-500': '#B893EC',
17586
+ 'accent-700': '#E3D0FD',
17551
17587
  // status
17552
17588
  'status-positive': '#17CF26',
17553
17589
  'status-negative': '#FF5B4D',
@@ -17565,8 +17601,10 @@ const darkTheme = {
17565
17601
  'content-800': '#292C32',
17566
17602
  'content-900': '#17191C',
17567
17603
  // accent
17604
+ 'accent-300': '#D9BEF4',
17568
17605
  'accent-400': '#B893EC',
17569
17606
  'accent-500': '#9E79D2',
17607
+ 'accent-700': '#6B45A1',
17570
17608
  // status
17571
17609
  'status-positive': '#7AE870',
17572
17610
  'status-negative': '#FF4D5B',
@@ -61797,23 +61835,30 @@ const parseSquidTheme = (userTheme) => {
61797
61835
  // material-dark-thin -> grey-900 + 10% opacity
61798
61836
  // material-dark-average -> grey-900 + 33% opacity
61799
61837
  // material-dark-thick -> grey-900 + 66% opacity
61800
- const materialVariants = {
61801
- 'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
61802
- 'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
61803
- 'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
61804
- 'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
61805
- 'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
61806
- 'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
61807
- };
61838
+ let materialVariants = {};
61839
+ if (squidTheme['grey-100'] && squidTheme['grey-900']) {
61840
+ materialVariants = {
61841
+ 'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
61842
+ 'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
61843
+ 'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
61844
+ 'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
61845
+ 'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
61846
+ 'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
61847
+ };
61848
+ }
61808
61849
  squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
61809
61850
  const styleKeys = Object.keys(themeTypesKeys);
61810
- const parsed = styleKeys.map((sk) => {
61851
+ const parsed = styleKeys
61852
+ .map((sk) => {
61811
61853
  const themeItem = themeTypesKeys[sk];
61854
+ if (!themeItem)
61855
+ return {};
61812
61856
  let userValue = squidTheme[sk];
61813
61857
  return {
61814
61858
  [themeItem.cssVariable]: userValue,
61815
61859
  };
61816
- });
61860
+ })
61861
+ .filter((obj) => Object.keys(obj).length > 0);
61817
61862
  // adds a variant with 0.05 opacity for each color
61818
61863
  // will result in variables like this:
61819
61864
  // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
@@ -61828,13 +61873,19 @@ const parseSquidTheme = (userTheme) => {
61828
61873
  // [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
61829
61874
  // })
61830
61875
  // })
61831
- parsed.push({
61832
- [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
61833
- });
61834
- // color representing the blend of material-light and grey-900
61835
- parsed.push({
61836
- [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
61837
- });
61876
+ if (themeTypesKeys['grey-100-005'] && squidTheme['grey-100']) {
61877
+ parsed.push({
61878
+ [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
61879
+ });
61880
+ }
61881
+ if (themeTypesKeys['material-light-blend-grey-900'] &&
61882
+ squidTheme['material-light-thin'] &&
61883
+ squidTheme['grey-900']) {
61884
+ // color representing the blend of material-light and grey-900
61885
+ parsed.push({
61886
+ [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
61887
+ });
61888
+ }
61838
61889
  return parsed.reduce((a, v) => {
61839
61890
  const key = Object.keys(v)[0];
61840
61891
  return Object.assign(Object.assign({}, a), { [key]: v[key] });
package/dist/esm/types/types/config.d.ts CHANGED
@@ -2,30 +2,8 @@
2
2
  * The color format must be of type #FFFFFF
3
3
  */
4
4
  export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
5
- export interface InternalSquidTheme {
6
- 'grey-100': string;
7
- 'grey-200': string;
8
- 'grey-300': string;
9
- 'grey-400': string;
10
- 'grey-500': string;
11
- 'grey-600': string;
12
- 'grey-700': string;
13
- 'grey-800': string;
14
- 'grey-900': string;
15
- 'royal-400': string;
16
- 'royal-500': string;
17
- 'status-positive': string;
18
- 'status-negative': string;
19
- 'status-partial': string;
20
- 'material-light-thin': string;
21
- 'material-light-average': string;
22
- 'material-light-thick': string;
23
- 'material-dark-thin': string;
24
- 'material-dark-average': string;
25
- 'material-dark-thick': string;
26
- 'grey-100-005': string;
27
- 'material-light-blend-grey-900': string;
28
- }
5
+ declare const INTERNAL_SQUID_THEME_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "status-positive", "status-negative", "status-partial", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900"];
6
+ export type InternalSquidTheme = Record<(typeof INTERNAL_SQUID_THEME_KEYS)[number], string>;
29
7
  export type SquidTheme = {
30
8
  'content-100': string;
31
9
  'content-200': string;
@@ -36,8 +14,10 @@ export type SquidTheme = {
36
14
  'content-700': string;
37
15
  'content-800': string;
38
16
  'content-900': string;
17
+ 'accent-300': string;
39
18
  'accent-400': string;
40
19
  'accent-500': string;
20
+ 'accent-700': string;
41
21
  'status-positive': string;
42
22
  'status-negative': string;
43
23
  'status-warning': string;
@@ -49,3 +29,4 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
49
29
  export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
50
30
  cssVariable: string;
51
31
  }>;
32
+ export {};
package/dist/index.d.ts CHANGED
@@ -2299,8 +2299,10 @@ type SquidTheme = {
2299
2299
  'content-700': string;
2300
2300
  'content-800': string;
2301
2301
  'content-900': string;
2302
+ 'accent-300': string;
2302
2303
  'accent-400': string;
2303
2304
  'accent-500': string;
2305
+ 'accent-700': string;
2304
2306
  'status-positive': string;
2305
2307
  'status-negative': string;
2306
2308
  'status-warning': string;
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.23.2-beta.0",
8
+ "version": "0.23.2-beta.1",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {