@databricks/design-system 0.1.8 → 0.2.0

package/dist/styles.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=styles.js.map

package/dist/theme/borders.d.ts

@@ -1,7 +1,7 @@
-export declare const borders: {
-    borderRadiusMd: number;
-};
-declare const _default: {
-    borderRadiusMd: number;
-};
-export default _default;
+export declare const borders: {
+    borderRadiusMd: number;
+};
+declare const _default: {
+    borderRadiusMd: number;
+};
+export default _default;

package/dist/theme/colorList.d.ts

@@ -1,103 +1,75 @@
-export declare const colorPalette: {
-    primary: string;
-    blue100: string;
-    blue200: string;
-    blue300: string;
-    blue400: string;
-    blue500: string;
-    blue600: string;
-    blue700: string;
-    blue800: string;
-    green100: string;
-    green200: string;
-    green300: string;
-    green400: string;
-    green500: string;
-    green600: string;
-    green700: string;
-    green800: string;
-    white: string;
-    grey100: string;
-    grey200: string;
-    grey300: string;
-    grey400: string;
-    grey500: string;
-    grey600: string;
-    grey700: string;
-    grey800: string;
-    red100: string;
-    red200: string;
-    red300: string;
-    red400: string;
-    red500: string;
-    red600: string;
-    red700: string;
-    red800: string;
-    yellow100: string;
-    yellow200: string;
-    yellow300: string;
-    yellow400: string;
-    yellow500: string;
-    yellow600: string;
-    yellow700: string;
-    yellow800: string;
-};
-export declare const lightColorList: {
-    textValidationInfo: string;
-    backgroundValidationDanger: string;
-    backgroundValidationSuccess: string;
-    backgroundValidationWarning: string;
-    borderValidationDanger: string;
-    borderValidationSuccess: string;
-    borderValidationWarning: string;
-    backgroundPrimary: string;
-    actionDangerBackgroundDefault: string;
-    actionDangerBackgroundHover: string;
-    actionDangerBackgroundPress: string;
-    actionDefaultBackgroundDefault: string;
-    actionDefaultBackgroundHover: string;
-    actionDefaultBackgroundPress: string;
-    actionDefaultBorderDefault: string;
-    actionDefaultBorderFocus: string;
-    actionDefaultBorderHover: string;
-    actionDefaultBorderPress: string;
-    actionDefaultTextDefault: string;
-    actionDefaultTextHover: string;
-    actionDefaultTextPress: string;
-    actionDisabledBackground: string;
-    actionDisabledText: string;
-    actionPrimaryBackgroundDefault: string;
-    actionPrimaryBackgroundHover: string;
-    actionPrimaryBackgroundPress: string;
-    actionPrimaryTextDefault: string;
-    actionPrimaryTextHover: string;
-    actionPrimaryTextPress: string;
-    actionTertiaryBackgroundDefault: string;
-    actionTertiaryBackgroundHover: string;
-    actionTertiaryBackgroundPress: string;
-    actionTertiaryTextDefault: string;
-    actionTertiaryTextHover: string;
-    actionTertiaryTextPress: string;
-    backgroundDanger: string;
-    backgroundSecondary: string;
-    backgroundWarning: string;
-    border: string;
-    borderDecorative: string;
-    textPrimary: string;
-    textSecondary: string;
-    textValidationDanger: string;
-    textValidationSuccess: string;
-    textValidationWarning: string;
-    overlayOverlay: string;
-    tagBrown: string;
-    tagCoral: string;
-    tagIndigo: string;
-    tagLemon: string;
-    tagLime: string;
-    tagPink: string;
-    tagPurple: string;
-    tagTeal: string;
-    tagTurquoise: string;
-    tooltipBackgroundTooltip: string;
-};
-export declare const darkColorList: typeof lightColorList;
+export declare type ColorName = 'blue' | 'green' | 'grey' | 'red' | 'yellow';
+export declare type ColorWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+export declare type PrimaryColorToken = `${ColorName}${ColorWeight}` | 'primary' | 'white';
+export declare type SecondaryColorToken = 'brown' | 'coral' | 'indigo' | 'lemon' | 'lime' | 'pink' | 'purple' | 'teal' | 'turquoise';
+export declare type TagColorToken = `tag${Capitalize<SecondaryColorToken>}` | 'tagDefault';
+declare type ColorPalettePrimary = Record<PrimaryColorToken, string>;
+declare type ColorPaletteSecondary = Record<SecondaryColorToken, string>;
+export declare const colorPalettePrimary: ColorPalettePrimary;
+export declare const colorPaletteSecondary: ColorPaletteSecondary;
+export declare const lightColorList: {
+    textValidationInfo: string;
+    backgroundValidationDanger: string;
+    backgroundValidationSuccess: string;
+    backgroundValidationWarning: string;
+    borderValidationDanger: string;
+    borderValidationSuccess: string;
+    borderValidationWarning: string;
+    backgroundPrimary: string;
+    actionDangerBackgroundDefault: string;
+    actionDangerBackgroundHover: string;
+    actionDangerBackgroundPress: string;
+    actionDefaultBackgroundDefault: string;
+    actionDefaultBackgroundHover: string;
+    actionDefaultBackgroundPress: string;
+    actionDefaultBorderDefault: string;
+    actionDefaultBorderFocus: string;
+    actionDefaultBorderHover: string;
+    actionDefaultBorderPress: string;
+    actionDefaultTextDefault: string;
+    actionDefaultTextHover: string;
+    actionDefaultTextPress: string;
+    actionDisabledBackground: string;
+    actionDisabledText: string;
+    actionPrimaryBackgroundDefault: string;
+    actionPrimaryBackgroundHover: string;
+    actionPrimaryBackgroundPress: string;
+    actionPrimaryTextDefault: string;
+    actionPrimaryTextHover: string;
+    actionPrimaryTextPress: string;
+    actionTertiaryBackgroundDefault: string;
+    actionTertiaryBackgroundHover: string;
+    actionTertiaryBackgroundPress: string;
+    actionTertiaryTextDefault: string;
+    actionTertiaryTextHover: string;
+    actionTertiaryTextPress: string;
+    backgroundDanger: string;
+    backgroundSecondary: string;
+    backgroundWarning: string;
+    border: string;
+    borderDecorative: string;
+    textPrimary: string;
+    textSecondary: string;
+    textValidationDanger: string;
+    textValidationSuccess: string;
+    textValidationWarning: string;
+    overlayOverlay: string;
+    tagDefault: string;
+    tagBrown: string;
+    tagCoral: string;
+    tagIndigo: string;
+    tagLemon: string;
+    tagLime: string;
+    tagPink: string;
+    tagPurple: string;
+    tagTeal: string;
+    tagTurquoise: string;
+    tagText: string;
+    tagHover: string;
+    tagPress: string;
+    tagIconHover: string;
+    tagIconPress: string;
+    tooltipBackgroundTooltip: string;
+};
+export declare const darkColorList: typeof lightColorList;
+export {};

package/dist/theme/colors.d.ts

@@ -1,137 +1,155 @@
-import { ThemeName } from './index';
-declare const lightColors: {
-    primary: string;
-    blue100: string;
-    blue200: string;
-    blue300: string;
-    blue400: string;
-    blue500: string;
-    blue600: string;
-    blue700: string;
-    blue800: string;
-    green100: string;
-    green200: string;
-    green300: string;
-    green400: string;
-    green500: string;
-    green600: string;
-    green700: string;
-    green800: string;
-    white: string;
-    grey100: string;
-    grey200: string;
-    grey300: string;
-    grey400: string;
-    grey500: string;
-    grey600: string;
-    grey700: string;
-    grey800: string;
-    red100: string;
-    red200: string;
-    red300: string;
-    red400: string;
-    red500: string;
-    red600: string;
-    red700: string;
-    red800: string;
-    yellow100: string;
-    yellow200: string;
-    yellow300: string;
-    yellow400: string;
-    yellow500: string;
-    yellow600: string;
-    yellow700: string;
-    yellow800: string;
-    textValidationInfo: string;
-    backgroundValidationDanger: string;
-    backgroundValidationSuccess: string;
-    backgroundValidationWarning: string;
-    borderValidationDanger: string;
-    borderValidationSuccess: string;
-    borderValidationWarning: string;
-    backgroundPrimary: string;
-    actionDangerBackgroundDefault: string;
-    actionDangerBackgroundHover: string;
-    actionDangerBackgroundPress: string;
-    actionDefaultBackgroundDefault: string;
-    actionDefaultBackgroundHover: string;
-    actionDefaultBackgroundPress: string;
-    actionDefaultBorderDefault: string;
-    actionDefaultBorderFocus: string;
-    actionDefaultBorderHover: string;
-    actionDefaultBorderPress: string;
-    actionDefaultTextDefault: string;
-    actionDefaultTextHover: string;
-    actionDefaultTextPress: string;
-    actionDisabledBackground: string;
-    actionDisabledText: string;
-    actionPrimaryBackgroundDefault: string;
-    actionPrimaryBackgroundHover: string;
-    actionPrimaryBackgroundPress: string;
-    actionPrimaryTextDefault: string;
-    actionPrimaryTextHover: string;
-    actionPrimaryTextPress: string;
-    actionTertiaryBackgroundDefault: string;
-    actionTertiaryBackgroundHover: string;
-    actionTertiaryBackgroundPress: string;
-    actionTertiaryTextDefault: string;
-    actionTertiaryTextHover: string;
-    actionTertiaryTextPress: string;
-    backgroundDanger: string;
-    backgroundSecondary: string;
-    backgroundWarning: string;
-    border: string;
-    borderDecorative: string;
-    textPrimary: string;
-    textSecondary: string;
-    textValidationDanger: string;
-    textValidationSuccess: string;
-    textValidationWarning: string;
-    overlayOverlay: string;
-    tagBrown: string;
-    tagCoral: string;
-    tagIndigo: string;
-    tagLemon: string;
-    tagLime: string;
-    tagPink: string;
-    tagPurple: string;
-    tagTeal: string;
-    tagTurquoise: string;
-    tooltipBackgroundTooltip: string;
-};
-declare type DesignSystemColors = typeof lightColors;
-interface AntdColors {
-    bodyBackground: string;
-    textColor: string;
-    textColorSecondary: string;
-    primaryColor: string;
-    infoColor: string;
-    errorColor: string;
-    successColor: string;
-    warningColor: string;
-    alertErrorTextColor: string;
-    alertWarningTextColor: string;
-    alertWarningBorderColor: string;
-    alertSuccessTextColor: string;
-    alertTextColor: string;
-    alertMessageColor: string;
-    alertInfoBgColor: string;
-    alertInfoIconColor: string;
-    alertInfoTextColor: string;
-    alertInfoBorderColor: string;
-    alertErrorBorderColor: string;
-}
-export declare function getAntdColors(theme: ThemeName): AntdColors;
-declare const deprecatedColors: {
-    radioInteractiveAvailable: string;
-    radioInteractiveHover: string;
-    radioInteractivePress: string;
-    radioDisabled: string;
-    radioDefaultBorder: string;
-    radioDefaultBackground: string;
-    radioInteractiveHoverSecondary: string;
-    radioInteractivePressSecondary: string;
-    typographyCodeBg: string;
-};
-export declare function getColors(theme: ThemeName): typeof deprecatedColors & DesignSystemColors;
-export {};
+import { ThemeName } from './index';
+declare const lightColors: {
+    brown: string;
+    coral: string;
+    indigo: string;
+    lemon: string;
+    lime: string;
+    pink: string;
+    purple: string;
+    teal: string;
+    turquoise: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    grey100: string;
+    grey200: string;
+    grey300: string;
+    grey400: string;
+    grey500: string;
+    grey600: string;
+    grey700: string;
+    grey800: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    red600: string;
+    red700: string;
+    red800: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    primary: string;
+    white: string;
+    textValidationInfo: string;
+    backgroundValidationDanger: string;
+    backgroundValidationSuccess: string;
+    backgroundValidationWarning: string;
+    borderValidationDanger: string;
+    borderValidationSuccess: string;
+    borderValidationWarning: string;
+    backgroundPrimary: string;
+    actionDangerBackgroundDefault: string;
+    actionDangerBackgroundHover: string;
+    actionDangerBackgroundPress: string;
+    actionDefaultBackgroundDefault: string;
+    actionDefaultBackgroundHover: string;
+    actionDefaultBackgroundPress: string;
+    actionDefaultBorderDefault: string;
+    actionDefaultBorderFocus: string;
+    actionDefaultBorderHover: string;
+    actionDefaultBorderPress: string;
+    actionDefaultTextDefault: string;
+    actionDefaultTextHover: string;
+    actionDefaultTextPress: string;
+    actionDisabledBackground: string;
+    actionDisabledText: string;
+    actionPrimaryBackgroundDefault: string;
+    actionPrimaryBackgroundHover: string;
+    actionPrimaryBackgroundPress: string;
+    actionPrimaryTextDefault: string;
+    actionPrimaryTextHover: string;
+    actionPrimaryTextPress: string;
+    actionTertiaryBackgroundDefault: string;
+    actionTertiaryBackgroundHover: string;
+    actionTertiaryBackgroundPress: string;
+    actionTertiaryTextDefault: string;
+    actionTertiaryTextHover: string;
+    actionTertiaryTextPress: string;
+    backgroundDanger: string;
+    backgroundSecondary: string;
+    backgroundWarning: string;
+    border: string;
+    borderDecorative: string;
+    textPrimary: string;
+    textSecondary: string;
+    textValidationDanger: string;
+    textValidationSuccess: string;
+    textValidationWarning: string;
+    overlayOverlay: string;
+    tagDefault: string;
+    tagBrown: string;
+    tagCoral: string;
+    tagIndigo: string;
+    tagLemon: string;
+    tagLime: string;
+    tagPink: string;
+    tagPurple: string;
+    tagTeal: string;
+    tagTurquoise: string;
+    tagText: string;
+    tagHover: string;
+    tagPress: string;
+    tagIconHover: string;
+    tagIconPress: string;
+    tooltipBackgroundTooltip: string;
+};
+declare type DesignSystemColors = typeof lightColors;
+interface AntdColors {
+    bodyBackground: string;
+    textColor: string;
+    textColorSecondary: string;
+    primaryColor: string;
+    infoColor: string;
+    errorColor: string;
+    successColor: string;
+    warningColor: string;
+    alertErrorTextColor: string;
+    alertWarningTextColor: string;
+    alertWarningBorderColor: string;
+    alertSuccessTextColor: string;
+    alertTextColor: string;
+    alertMessageColor: string;
+    alertInfoBgColor: string;
+    alertInfoIconColor: string;
+    alertInfoTextColor: string;
+    alertInfoBorderColor: string;
+    alertErrorBorderColor: string;
+    alertWarningBgColor: string;
+    alertWarningIconColor: string;
+    spinDotDefault: string;
+}
+export declare function getAntdColors(theme: ThemeName): AntdColors;
+declare const deprecatedColors: {
+    radioInteractiveAvailable: string;
+    radioInteractiveHover: string;
+    radioInteractivePress: string;
+    radioDisabled: string;
+    radioDefaultBorder: string;
+    radioDefaultBackground: string;
+    radioInteractiveHoverSecondary: string;
+    radioInteractivePressSecondary: string;
+    typographyCodeBg: string;
+};
+export declare function getColors(theme: ThemeName): typeof deprecatedColors & DesignSystemColors;
+export {};

package/dist/theme/convertToLessVars.d.ts

@@ -1,18 +1,18 @@
-import { ThemeName } from '.';
-/**
- * Condense our variables into a single object that will be used
- * to build exported `less` configurations.
- */
-export declare function getLessVariables(theme: ThemeName): Record<string, any>;
-/**
- * This is used if you want to pass the theme to `modifyVars`.
- * We use that in `rollup`, but not in `storybook` since we want theme changes
- * to rebuild and refresh in the latter.
- */
-export declare function getLessVariablesObject(theme: ThemeName): Record<string, string | any>;
-/**
- * This exports a synthetic `less` file containing our `less` variables.
- * We use this in storybook so that we can force that environment to refresh
- * as we work on the theme during active development.
- */
-export declare function getLessVariablesText(theme: ThemeName): string;
+import { ThemeName } from '.';
+/**
+ * Condense our variables into a single object that will be used
+ * to build exported `less` configurations.
+ */
+export declare function getLessVariables(theme: ThemeName): Record<string, any>;
+/**
+ * This is used if you want to pass the theme to `modifyVars`.
+ * We use that in `rollup`, but not in `storybook` since we want theme changes
+ * to rebuild and refresh in the latter.
+ */
+export declare function getLessVariablesObject(theme: ThemeName): Record<string, string | any>;
+/**
+ * This exports a synthetic `less` file containing our `less` variables.
+ * We use this in storybook so that we can force that environment to refresh
+ * as we work on the theme during active development.
+ */
+export declare function getLessVariablesText(theme: ThemeName): string;

package/dist/theme/generalVariables.d.ts

@@ -1,9 +1,11 @@
-declare const antdGeneralVariables: {
-    classnamePrefix: string;
-    iconfontCssPrefix: string;
-    borderRadiusBase: number;
-    borderWidth: number;
-    heightSm: number;
-    heightBase: number;
-};
-export default antdGeneralVariables;
+declare const antdGeneralVariables: {
+    classnamePrefix: string;
+    iconfontCssPrefix: string;
+    borderRadiusBase: number;
+    borderWidth: number;
+    heightSm: number;
+    heightBase: number;
+    iconSize: number;
+    buttonHeight: number;
+};
+export default antdGeneralVariables;

package/dist/theme/index.d.ts

@@ -1,16 +1,16 @@
-import { getColors } from './colors';
-import generalVariables from './generalVariables';
-import spacing from './spacing';
-import typography from './typography';
-import borders from './borders';
-export declare type ThemeName = 'default' | 'dark';
-export declare type ComponentTheme = ReturnType<typeof getTheme>;
-export interface Theme {
-    colors: ReturnType<typeof getColors>;
-    spacing: typeof spacing;
-    general: typeof generalVariables;
-    typography: typeof typography;
-    borders: typeof borders;
-    themeName: ThemeName;
-}
-export declare function getTheme(themeName: ThemeName): Theme;
+import { getColors } from './colors';
+import generalVariables from './generalVariables';
+import spacing from './spacing';
+import typography from './typography';
+import borders from './borders';
+export declare type ThemeName = 'default' | 'dark';
+export declare type ComponentTheme = ReturnType<typeof getTheme>;
+export interface Theme {
+    colors: ReturnType<typeof getColors>;
+    spacing: typeof spacing;
+    general: typeof generalVariables;
+    typography: typeof typography;
+    borders: typeof borders;
+    themeName: ThemeName;
+}
+export declare function getTheme(themeName: ThemeName): Theme;