@grafana/components 0.0.44 → 0.0.45
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.
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js.map +1 -1
- package/dist/esm/components/GenericSkeleton/GenericSkeleton.styles.js.map +1 -1
- package/dist/esm/components/StackedChartNoData/StackedChartNoData.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport {
|
|
1
|
+
{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariablesByColorMode, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariablesByColorMode => {\n const { legacy } = getDesignTokens({ valueType: 'css' });\n\n return {\n dark: {\n 'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n },\n light: {\n 'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n },\n };\n};\n\nconst BADGE_HEIGHT = 28;\n\nexport const getComparisonBadgeStyles = ({\n highlight,\n direction,\n tooltip,\n}: {\n highlight: boolean;\n direction: string;\n tooltip?: boolean;\n}) => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n\n const labelColor = (() => {\n switch (true) {\n case highlight:\n case direction === 'up':\n return legacy.colors.text.maxContrast;\n default:\n return legacy.colors.primary.text;\n }\n })();\n\n return {\n container: css({\n boxSizing: 'border-box',\n background: 'transparent',\n borderRadius: legacy.borderRadius.pill,\n border: `1px solid\n ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n textAlign: 'left',\n display: 'inline-flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n height: `${BADGE_HEIGHT}px`,\n position: 'relative',\n transition: 'background 0.2s ease-in-out',\n ...(tooltip\n ? {\n cursor: 'pointer',\n '&:hover': {\n background: legacy.colors.background.secondary,\n },\n }\n : {}),\n }),\n clockIconWrapper: css({\n background: highlight\n ? 'var(--comparison-badge-icon-highlight-background-color)'\n : 'var(--comparison-badge-icon-background-color)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '22px',\n height: '22px',\n borderRadius: legacy.borderRadius.pill,\n color: legacy.colors.text.primary,\n }),\n trendLabelContainer: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.xxs,\n paddingLeft: spacing.xxs,\n fontWeight: typography.fontWeight.medium,\n whiteSpace: 'nowrap',\n }),\n trendLabel: css({\n display: 'flex',\n alignItems: 'center',\n color: labelColor,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.medium,\n fontVariantNumeric: 'tabular-nums',\n }),\n timeframeLabel: css({\n color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n paddingLeft: spacing.xxs,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.normal,\n }),\n trendIconWrapper: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '16px',\n height: '16px',\n }),\n dash: css({\n color: legacy.colors.text.secondary,\n }),\n };\n};\n"],"names":["cssVariables"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericSkeleton.styles.js","sources":["../../../../src/components/GenericSkeleton/GenericSkeleton.styles.ts"],"sourcesContent":["import { css, keyframes } from '@emotion/css';\nimport {
|
|
1
|
+
{"version":3,"file":"GenericSkeleton.styles.js","sources":["../../../../src/components/GenericSkeleton/GenericSkeleton.styles.ts"],"sourcesContent":["import { css, keyframes } from '@emotion/css';\nimport { CSSVariablesByColorMode, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariablesByColorMode => {\n const { legacy } = getDesignTokens({ valueType: 'css' });\n\n return {\n dark: {\n 'skeleton-gradient-background-color': legacy.palette.whiteBaseOpacity12,\n },\n light: {\n 'skeleton-gradient-background-color': legacy.palette.blackBaseOpacity12,\n },\n };\n};\n\nconst shimmer = keyframes({\n '0%': {\n transform: 'translateX(-100%);',\n },\n '100%': {\n transform: 'translateX(100%);',\n },\n});\n\nexport const getStyles = (animationDuration: number) => {\n return css({\n display: 'flex',\n width: '100%',\n height: '100%',\n background: 'transparent',\n position: 'relative',\n overflow: 'hidden',\n borderRadius: '5px',\n '&::before': {\n content: \"''\",\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n animation: `${shimmer} ${animationDuration}s ease-in-out infinite`,\n transform: 'translateX(-100%)',\n background:\n 'linear-gradient(90deg, transparent, var(--skeleton-gradient-background-color), transparent)',\n },\n });\n};\n"],"names":["cssVariables","getStyles"],"mappings":";;;AAGO,MAAMA,iBAAe,MAA+B;AACzD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,gBAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA,KACvD;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA;AACvD,GACF;AACF;AAEA,MAAM,UAAU,SAAA,CAAU;AAAA,EACxB,IAAA,EAAM;AAAA,IACJ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAEM,MAAMC,WAAA,GAAY,CAAC,iBAAA,KAA8B;AACtD,EAAA,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,UAAA,EAAY,aAAA;AAAA,IACZ,QAAA,EAAU,UAAA;AAAA,IACV,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,KAAA;AAAA,IACd,WAAA,EAAa;AAAA,MACX,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,SAAA,EAAW,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,iBAAiB,CAAA,sBAAA,CAAA;AAAA,MAC1C,SAAA,EAAW,mBAAA;AAAA,MACX,UAAA,EACE;AAAA;AACJ,GACD,CAAA;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackedChartNoData.styles.js","sources":["../../../../src/components/StackedChartNoData/StackedChartNoData.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens,
|
|
1
|
+
{"version":3,"file":"StackedChartNoData.styles.js","sources":["../../../../src/components/StackedChartNoData/StackedChartNoData.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens, CSSVariablesByColorMode } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariablesByColorMode => {\n const { legacy } = getDesignTokens({ valueType: 'css' });\n\n return {\n dark: {\n 'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity15,\n },\n light: {\n 'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity4,\n },\n };\n};\n\nexport const getStyles = (height: number) => {\n const {\n legacy,\n primitives: { typography, spacing },\n } = getDesignTokens({ valueType: 'css' });\n\n return {\n container: css({\n display: 'flex',\n flex: 1,\n width: '100%',\n height: `${height}px`,\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.sm,\n borderRadius: legacy.borderRadius.md,\n color: legacy.colors.text.secondary,\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n paddingTop: spacing.xxs,\n background: 'var(--stacked-chart-no-data-background-color)',\n }),\n label: css({\n fontWeight: typography.fontWeight.medium,\n textTransform: 'lowercase',\n }),\n };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,eAAe,MAA+B;AACzD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,gBAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA,KAC3D;AAAA,IACA,KAAA,EAAO;AAAA,MACL,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA;AAC3D,GACF;AACF;AAEO,MAAM,SAAA,GAAY,CAAC,MAAA,KAAmB;AAC3C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,UAAA,EAAY,OAAA;AAAQ,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,MACjB,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC1B,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,YAAY,OAAA,CAAQ,GAAA;AAAA,MACpB,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,aAAA,EAAe;AAAA,KAChB;AAAA,GACH;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Grafana Labs",
|
|
3
3
|
"name": "@grafana/components",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.45",
|
|
6
6
|
"description": "Product Design Engineering Components for Grafana",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
"@emotion/css": "^11.13.5",
|
|
129
129
|
"@emotion/react": "^11.14.0",
|
|
130
130
|
"@floating-ui/react": "^0.27.16",
|
|
131
|
-
"@grafana/design-tokens": "^0.0.
|
|
131
|
+
"@grafana/design-tokens": "^0.0.32",
|
|
132
132
|
"clsx": "^2.1.1",
|
|
133
133
|
"react-useportal": "^1.0.19"
|
|
134
134
|
},
|