@redsift/design-system 6.0.0-alpha.0 → 6.0.0-alpha.2

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/esm/_internal/AppBar.js.map +1 -1
  2. package/esm/_internal/AppContent.js.map +1 -1
  3. package/esm/_internal/AppSidePanel.js +1 -1
  4. package/esm/_internal/AppSidePanel.js.map +1 -1
  5. package/package.json +3 -2
  6. package/style/redsift.css +366 -2
  7. package/style/redsift-design-tokens.css +0 -143
  8. package/style/redsift-fonts.css +0 -225
package/esm/_internal/AppBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 64px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css `\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css `\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiMenu } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppBar';\nconst CLASSNAME = 'redsift-app-bar';\nconst DEFAULT_PROPS: Partial<AppBarProps> = {};\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n const barRef = ref || useRef<HTMLHeadingElement>();\n\n const {\n children,\n className,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n title: propsTitle,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppBar\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppBar.className, className)}\n ref={barRef as RefObject<HTMLHeadingElement>}\n >\n <div className={`${AppBar.className}__left`}>\n {appContainerState && appContainerState.isSidePanelCollapsed ? (\n <IconButton\n className={`${AppBar.className}-left__expand-button`}\n {...iconButtonProps}\n aria-label=\"Expand left side panel\"\n icon={mdiMenu}\n onPress={appContainerState.expandSidePanel}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null}\n {appContainerState && appContainerState.title ? (\n <h1>{appContainerState.title}</h1>\n ) : propsTitle ? (\n <h1>{propsTitle}</h1>\n ) : null}\n </div>\n <div className={`${AppBar.className}__right`}>\n {children}\n </div>\n </StyledAppBar>\n );\n});\nAppBar.className = CLASSNAME;\nAppBar.defaultProps = DEFAULT_PROPS;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["StyledAppBar","styled","header","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppBar","forwardRef","props","ref","barRef","useRef","children","className","iconButtonProps","iconButtonRef","title","propsTitle","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","mdiMenu","expandSidePanel","defaultProps","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 64px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiMenu } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppBar';\nconst CLASSNAME = 'redsift-app-bar';\nconst DEFAULT_PROPS: Partial<AppBarProps> = {};\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n const barRef = ref || useRef<HTMLHeadingElement>();\n\n const {\n children,\n className,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n title: propsTitle,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppBar\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppBar.className, className)}\n ref={barRef as RefObject<HTMLHeadingElement>}\n >\n <div className={`${AppBar.className}__left`}>\n {appContainerState && appContainerState.isSidePanelCollapsed ? (\n <IconButton\n className={`${AppBar.className}-left__expand-button`}\n {...iconButtonProps}\n aria-label=\"Expand left side panel\"\n icon={mdiMenu}\n onPress={appContainerState.expandSidePanel}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null}\n {appContainerState && appContainerState.title ? (\n <h1>{appContainerState.title}</h1>\n ) : propsTitle ? (\n <h1>{propsTitle}</h1>\n ) : null}\n </div>\n <div className={`${AppBar.className}__right`}>\n {children}\n </div>\n </StyledAppBar>\n );\n});\nAppBar.className = CLASSNAME;\nAppBar.defaultProps = DEFAULT_PROPS;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["StyledAppBar","styled","header","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppBar","forwardRef","props","ref","barRef","useRef","children","className","iconButtonProps","iconButtonRef","title","propsTitle","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","mdiMenu","expandSidePanel","defaultProps","displayName"],"mappings":"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"}
package/esm/_internal/AppContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppContent.js","sources":["../../../src/components/app-content/styles.ts","../../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n box-sizing: border-box;\n margin-top: 64px;\n padding: 16px 32px;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css `\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n\n ${({ $isLoaded }) => $isLoaded ? css `\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppContent';\nconst CLASSNAME = 'redsift-app-content';\nconst DEFAULT_PROPS: Partial<AppContentProps> = {};\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n const contentRef = ref || useRef<HTMLElement>();\n\n const {\n children,\n className,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppContent\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppContent.className, className)}\n ref={contentRef as RefObject<HTMLElement>}\n >\n {children}\n </StyledAppContent>\n );\n});\nAppContent.className = CLASSNAME;\nAppContent.defaultProps = DEFAULT_PROPS;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppContent","forwardRef","props","ref","contentRef","useRef","children","className","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","defaultProps","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAAV,CAKzB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,+EAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,qBAAAA;GAAH,GAAA,IAAA,CAAA;AAAA,EAAA,OAA+B,CAACA,qBAAD,GAAyBC,GAAzB,CAA/B,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,wEAAA,CAAA,CAAA,CAAA,CAAA,GAAA,wDAAA,CAAA;AAAA,CALyB,EAazB,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAmBA,SAAS,GAAGD,GAAH,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,qEAAA,CAAA,CAAA,CAAA,CAAA,GAE3B,EAFD,CAAA;AAAA,CAbyB,CAAtB;;;ACEP,MAAME,cAAc,GAAG,mBAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,qBAAlB,CAAA;AACA,MAAMC,aAAuC,GAAG,EAAhD,CAAA;AAEA;AACA;AACA;;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvF,EAAA,MAAMC,UAAU,GAAGD,GAAG,IAAIE,MAAM,EAAhC,CAAA;;EAEA,MAAM;IACJC,QADI;AAEJC,IAAAA,SAAAA;AAFI,GAAA,GAIFL,KAJJ;QAGKM,cAHL,4BAIIN,KAJJ,EAAA,SAAA,CAAA,CAAA;;EAMA,MAAM;AAAEO,IAAAA,QAAAA;AAAF,GAAA,GAAeC,WAAW,EAAhC,CAAA;AACA,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAD,CAApC,CAAA;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAA,QAAA,CAAA,EAAA,EACML,cADN,EAAA;AAEE,IAAA,SAAS,EAAEC,QAFb;AAGE,IAAA,qBAAqB,EAAEE,iBAAiB,GAAGA,iBAAiB,CAACG,oBAArB,GAA4C,IAHtF;IAIE,SAAS,EAAEC,UAAU,CAACf,UAAU,CAACO,SAAZ,EAAuBA,SAAvB,CAJvB;AAKE,IAAA,GAAG,EAAEH,UAAAA;AALP,GAAA,CAAA,EAOGE,QAPH,CADF,CAAA;AAWD,CAvBuE,EAAjE;AAwBPN,UAAU,CAACO,SAAX,GAAuBT,SAAvB,CAAA;AACAE,UAAU,CAACgB,YAAX,GAA0BjB,aAA1B,CAAA;AACAC,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;;;;"}
1
+ {"version":3,"file":"AppContent.js","sources":["../../../src/components/app-content/styles.ts","../../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n box-sizing: border-box;\n margin-top: 64px;\n padding: 16px 32px;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n\n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppContent';\nconst CLASSNAME = 'redsift-app-content';\nconst DEFAULT_PROPS: Partial<AppContentProps> = {};\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n const contentRef = ref || useRef<HTMLElement>();\n\n const {\n children,\n className,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppContent\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppContent.className, className)}\n ref={contentRef as RefObject<HTMLElement>}\n >\n {children}\n </StyledAppContent>\n );\n});\nAppContent.className = CLASSNAME;\nAppContent.defaultProps = DEFAULT_PROPS;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppContent","forwardRef","props","ref","contentRef","useRef","children","className","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","defaultProps","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAAV,CAKzB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,+EAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,qBAAAA;GAAH,GAAA,IAAA,CAAA;AAAA,EAAA,OAA+B,CAACA,qBAAD,GAAyBC,GAAzB,CAA/B,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,wEAAA,CAAA,CAAA,CAAA,CAAA,GAAA,wDAAA,CAAA;AAAA,CALyB,EAazB,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAmBA,SAAS,GAAGD,GAAH,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,qEAAA,CAAA,CAAA,CAAA,CAAA,GAE3B,EAFD,CAAA;AAAA,CAbyB,CAAtB;;;ACEP,MAAME,cAAc,GAAG,mBAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,qBAAlB,CAAA;AACA,MAAMC,aAAuC,GAAG,EAAhD,CAAA;AAEA;AACA;AACA;;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvF,EAAA,MAAMC,UAAU,GAAGD,GAAG,IAAIE,MAAM,EAAhC,CAAA;;EAEA,MAAM;IACJC,QADI;AAEJC,IAAAA,SAAAA;AAFI,GAAA,GAIFL,KAJJ;QAGKM,cAHL,4BAIIN,KAJJ,EAAA,SAAA,CAAA,CAAA;;EAMA,MAAM;AAAEO,IAAAA,QAAAA;AAAF,GAAA,GAAeC,WAAW,EAAhC,CAAA;AACA,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAD,CAApC,CAAA;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAA,QAAA,CAAA,EAAA,EACML,cADN,EAAA;AAEE,IAAA,SAAS,EAAEC,QAFb;AAGE,IAAA,qBAAqB,EAAEE,iBAAiB,GAAGA,iBAAiB,CAACG,oBAArB,GAA4C,IAHtF;IAIE,SAAS,EAAEC,UAAU,CAACf,UAAU,CAACO,SAAZ,EAAuBA,SAAvB,CAJvB;AAKE,IAAA,GAAG,EAAEH,UAAAA;AALP,GAAA,CAAA,EAOGE,QAPH,CADF,CAAA;AAWD,CAvBuE,EAAjE;AAwBPN,UAAU,CAACO,SAAX,GAAuBT,SAAvB,CAAA;AACAE,UAAU,CAACgB,YAAX,GAA0BjB,aAA1B,CAAA;AACAC,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;;;;"}
package/esm/_internal/AppSidePanel.js CHANGED
@@ -11,7 +11,7 @@ var _templateObject;
11
11
  /**
12
12
  * Component style.
13
13
  */
14
- const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
14
+ const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
15
15
  let {
16
16
  $isCollapsed
17
17
  } = _ref;
package/esm/_internal/AppSidePanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiChevronLeft } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiChevronLeft } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":"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"}
package/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
18
18
  },
19
19
  "types": "types.d.ts",
20
- "version": "6.0.0-alpha.0",
20
+ "version": "6.0.0-alpha.2",
21
21
  "workspaces": [
22
22
  "packages/design-system",
23
23
  "packages/demo-site"
@@ -94,6 +94,7 @@
94
94
  "rollup-plugin-auto-external": "^2.0.0",
95
95
  "rollup-plugin-cleaner": "^1.0.0",
96
96
  "rollup-plugin-copy": "^3.4.0",
97
+ "rollup-plugin-execute": "^1.1.0",
97
98
  "rollup-plugin-tsconfig-paths": "^1.1.8",
98
99
  "rollup-plugin-typescript-paths": "^1.3.1",
99
100
  "storybook-addon-styled-component-theme": "^2.0.0",
@@ -112,5 +113,5 @@
112
113
  "react-dom": "18.1.0",
113
114
  "styled-components": "^5.3.3"
114
115
  },
115
- "gitHead": "16da892f3ccebae1ff2ad4684babc4b8ad460e1d"
116
+ "gitHead": "4d689725f117a47fd2dd4831e6f71dec733c2c82"
116
117
  }
package/style/redsift.css CHANGED
@@ -1,6 +1,370 @@
1
- @import "./redsift-fonts.css";
2
- @import "./redsift-design-tokens.css";
1
+ /* latin */
2
+ @font-face {
3
+ font-family: 'Electrolize';
4
+ font-style: normal;
5
+ font-weight: 400;
6
+ font-display: swap;
7
+ src: url(https://fonts.gstatic.com/s/electrolize/v14/cIf5Ma1dtE0zSiGSiED7AXEBuI9PQrfA.woff2) format('woff2');
8
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
9
+ }
10
+ /* cyrillic-ext */
11
+ @font-face {
12
+ font-family: 'Raleway';
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
17
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
18
+ }
19
+ /* cyrillic */
20
+ @font-face {
21
+ font-family: 'Raleway';
22
+ font-style: normal;
23
+ font-weight: 400;
24
+ font-display: swap;
25
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
26
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
27
+ }
28
+ /* vietnamese */
29
+ @font-face {
30
+ font-family: 'Raleway';
31
+ font-style: normal;
32
+ font-weight: 400;
33
+ font-display: swap;
34
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
35
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
36
+ }
37
+ /* latin-ext */
38
+ @font-face {
39
+ font-family: 'Raleway';
40
+ font-style: normal;
41
+ font-weight: 400;
42
+ font-display: swap;
43
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
44
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
45
+ }
46
+ /* latin */
47
+ @font-face {
48
+ font-family: 'Raleway';
49
+ font-style: normal;
50
+ font-weight: 400;
51
+ font-display: swap;
52
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
53
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
54
+ }
55
+ /* cyrillic-ext */
56
+ @font-face {
57
+ font-family: 'Raleway';
58
+ font-style: normal;
59
+ font-weight: 700;
60
+ font-display: swap;
61
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
62
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
63
+ }
64
+ /* cyrillic */
65
+ @font-face {
66
+ font-family: 'Raleway';
67
+ font-style: normal;
68
+ font-weight: 700;
69
+ font-display: swap;
70
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
71
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
72
+ }
73
+ /* vietnamese */
74
+ @font-face {
75
+ font-family: 'Raleway';
76
+ font-style: normal;
77
+ font-weight: 700;
78
+ font-display: swap;
79
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
80
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
81
+ }
82
+ /* latin-ext */
83
+ @font-face {
84
+ font-family: 'Raleway';
85
+ font-style: normal;
86
+ font-weight: 700;
87
+ font-display: swap;
88
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
89
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
90
+ }
91
+ /* latin */
92
+ @font-face {
93
+ font-family: 'Raleway';
94
+ font-style: normal;
95
+ font-weight: 700;
96
+ font-display: swap;
97
+ src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
98
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
99
+ }
100
+ /* cyrillic-ext */
101
+ @font-face {
102
+ font-family: 'Source Code Pro';
103
+ font-style: normal;
104
+ font-weight: 400;
105
+ font-display: swap;
106
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMOvWnsUnxlC9.woff2) format('woff2');
107
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
108
+ }
109
+ /* cyrillic */
110
+ @font-face {
111
+ font-family: 'Source Code Pro';
112
+ font-style: normal;
113
+ font-weight: 400;
114
+ font-display: swap;
115
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlOevWnsUnxlC9.woff2) format('woff2');
116
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
117
+ }
118
+ /* greek-ext */
119
+ @font-face {
120
+ font-family: 'Source Code Pro';
121
+ font-style: normal;
122
+ font-weight: 400;
123
+ font-display: swap;
124
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMevWnsUnxlC9.woff2) format('woff2');
125
+ unicode-range: U+1F00-1FFF;
126
+ }
127
+ /* greek */
128
+ @font-face {
129
+ font-family: 'Source Code Pro';
130
+ font-style: normal;
131
+ font-weight: 400;
132
+ font-display: swap;
133
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPuvWnsUnxlC9.woff2) format('woff2');
134
+ unicode-range: U+0370-03FF;
135
+ }
136
+ /* vietnamese */
137
+ @font-face {
138
+ font-family: 'Source Code Pro';
139
+ font-style: normal;
140
+ font-weight: 400;
141
+ font-display: swap;
142
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMuvWnsUnxlC9.woff2) format('woff2');
143
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
144
+ }
145
+ /* latin-ext */
146
+ @font-face {
147
+ font-family: 'Source Code Pro';
148
+ font-style: normal;
149
+ font-weight: 400;
150
+ font-display: swap;
151
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWnsUnxlC9.woff2) format('woff2');
152
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
153
+ }
154
+ /* latin */
155
+ @font-face {
156
+ font-family: 'Source Code Pro';
157
+ font-style: normal;
158
+ font-weight: 400;
159
+ font-display: swap;
160
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
161
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
162
+ }
163
+ /* cyrillic-ext */
164
+ @font-face {
165
+ font-family: 'Source Code Pro';
166
+ font-style: normal;
167
+ font-weight: 700;
168
+ font-display: swap;
169
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMOvWnsUnxlC9.woff2) format('woff2');
170
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
171
+ }
172
+ /* cyrillic */
173
+ @font-face {
174
+ font-family: 'Source Code Pro';
175
+ font-style: normal;
176
+ font-weight: 700;
177
+ font-display: swap;
178
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlOevWnsUnxlC9.woff2) format('woff2');
179
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
180
+ }
181
+ /* greek-ext */
182
+ @font-face {
183
+ font-family: 'Source Code Pro';
184
+ font-style: normal;
185
+ font-weight: 700;
186
+ font-display: swap;
187
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMevWnsUnxlC9.woff2) format('woff2');
188
+ unicode-range: U+1F00-1FFF;
189
+ }
190
+ /* greek */
191
+ @font-face {
192
+ font-family: 'Source Code Pro';
193
+ font-style: normal;
194
+ font-weight: 700;
195
+ font-display: swap;
196
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPuvWnsUnxlC9.woff2) format('woff2');
197
+ unicode-range: U+0370-03FF;
198
+ }
199
+ /* vietnamese */
200
+ @font-face {
201
+ font-family: 'Source Code Pro';
202
+ font-style: normal;
203
+ font-weight: 700;
204
+ font-display: swap;
205
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMuvWnsUnxlC9.woff2) format('woff2');
206
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
207
+ }
208
+ /* latin-ext */
209
+ @font-face {
210
+ font-family: 'Source Code Pro';
211
+ font-style: normal;
212
+ font-weight: 700;
213
+ font-display: swap;
214
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWnsUnxlC9.woff2) format('woff2');
215
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
216
+ }
217
+ /* latin */
218
+ @font-face {
219
+ font-family: 'Source Code Pro';
220
+ font-style: normal;
221
+ font-weight: 700;
222
+ font-display: swap;
223
+ src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
224
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
225
+ }/**
226
+ * Do not edit directly
227
+ * Generated on Mon, 01 Aug 2022 12:40:38 GMT
228
+ */
3
229
 
230
+ :root {
231
+ --redsift-color-primary-main: #0075da;
232
+ --redsift-color-primary-contrast: #ffffff;
233
+ --redsift-color-primary-contained-hover: #0063b9;
234
+ --redsift-color-primary-outlined-hover: rgba(0, 99, 185, 0.2);
235
+ --redsift-color-primary-outlined-resting: #0063b9;
236
+ --redsift-color-secondary-main: #f50057;
237
+ --redsift-color-secondary-dark: #c51162;
238
+ --redsift-color-secondary-light: #ff4081;
239
+ --redsift-color-secondary-contrast: #ffffff;
240
+ --redsift-color-secondary-contained-hover: #9e1f3f;
241
+ --redsift-color-secondary-outlined-hover: rgba(245, 0, 87, 0.08);
242
+ --redsift-color-secondary-outlined-resting: rgba(245, 0, 87, 0.5);
243
+ --redsift-color-text-primary: #1c1c1c;
244
+ --redsift-color-text-secondary: rgba(0, 0, 0, 0.6);
245
+ --redsift-color-text-disabled: #a8a8a8;
246
+ --redsift-color-link-primary: #02ac61;
247
+ --redsift-color-link-underline: rgba(2, 172, 97, 0.4);
248
+ --redsift-color-error-main: #e06354;
249
+ --redsift-color-error-dark: #e31b0c;
250
+ --redsift-color-error-light: #ffe3e0;
251
+ --redsift-color-error-contrast: #ffffff;
252
+ --redsift-color-error-contained-hover: #e31b0c;
253
+ --redsift-color-error-outlined-hover: #e31b0c;
254
+ --redsift-color-error-outlined-resting: #e31b0c;
255
+ --redsift-color-error-content: #5a201a;
256
+ --redsift-color-error-background: #fbedeb;
257
+ --redsift-color-warning-main: #fcbb54;
258
+ --redsift-color-warning-dark: #c77700;
259
+ --redsift-color-warning-light: #fff6dd;
260
+ --redsift-color-warning-contrast: #ffffff;
261
+ --redsift-color-warning-contained-hover: #9b511d;
262
+ --redsift-color-warning-outlined-hover: rgba(237, 108, 2, 0.08);
263
+ --redsift-color-warning-outlined-resting: rgba(237, 108, 2, 0.5);
264
+ --redsift-color-warning-content: #592e0d;
265
+ --redsift-color-warning-background: #fcf0e7;
266
+ --redsift-color-info-main: #2196f3;
267
+ --redsift-color-info-dark: #0b79d0;
268
+ --redsift-color-info-light: #64b6f7;
269
+ --redsift-color-info-contrast: #ffffff;
270
+ --redsift-color-info-contained-hover: #3267a5;
271
+ --redsift-color-info-outlined-hover: rgba(33, 150, 243, 0.08);
272
+ --redsift-color-info-outlined-resting: rgba(33, 150, 243, 0.5);
273
+ --redsift-color-info-content: #1c3b5e;
274
+ --redsift-color-info-background: #ebf5fd;
275
+ --redsift-color-success-main: #4caf50;
276
+ --redsift-color-success-dark: #3b873e;
277
+ --redsift-color-success-light: #7bc67e;
278
+ --redsift-color-success-contrast: #ffffff;
279
+ --redsift-color-success-contained-hover: #487940;
280
+ --redsift-color-success-outlined-hover: rgba(76, 175, 80, 0.08);
281
+ --redsift-color-success-outlined-resting: rgba(76, 175, 80, 0.5);
282
+ --redsift-color-success-content: #284524;
283
+ --redsift-color-success-background: #eff7ee;
284
+ --redsift-color-action-active: rgba(0, 0, 0, 0.54);
285
+ --redsift-color-action-hover: rgba(0, 0, 0, 0.04);
286
+ --redsift-color-action-selected: rgba(0, 0, 0, 0.08);
287
+ --redsift-color-action-disabled: #a8a8a8;
288
+ --redsift-color-action-disabled-background: #e4e4e4;
289
+ --redsift-color-action-focus: #e4e4e4;
290
+ --redsift-color-side-navigation-background: #2d2d34;
291
+ --redsift-color-side-navigation-menu-item-text-resting: rgba(255, 255, 255, 0.7);
292
+ --redsift-color-side-navigation-menu-item-text-disabled: #76767a;
293
+ --redsift-color-side-navigation-menu-item-text-hover: #ffffff;
294
+ --redsift-color-side-navigation-menu-item-background-hover: #4c4c64;
295
+ --redsift-color-side-navigation-menu-item-background-secondary: #333340;
296
+ --redsift-color-side-navigation-menu-item-background-active: #39394c;
297
+ --redsift-color-side-navigation-menu-item-active: #02ac61;
298
+ --redsift-color-side-navigation-scrollbar-resting: #4c4c64;
299
+ --redsift-color-side-navigation-scrollbar-hover: #5d5d73;
300
+ --redsift-typography-font-family-raleway: 'Raleway', sans-serif;
301
+ --redsift-typography-font-family-electrolize: 'electrolize', sans-serif;
302
+ --redsift-typography-font-family-source-code-pro: 'Source Code Pro', sans-serif;
303
+ --redsift-typography-font-weight-regular: 400;
304
+ --redsift-typography-font-weight-medium: 500;
305
+ --redsift-typography-font-weight-semi-bold: 600;
306
+ --redsift-typography-font-weight-bold: 700;
307
+ --redsift-typography-h1-font-family: var(--redsift-typography-font-family-electrolize);
308
+ --redsift-typography-h1-font-size: 24px;
309
+ --redsift-typography-h1-font-weight: var(--redsift-typography-font-weight-regular);
310
+ --redsift-typography-h1-line-height: 28px;
311
+ --redsift-typography-h1-text-transform: uppercase;
312
+ --redsift-typography-h2-font-family: var(--redsift-typography-font-family-raleway);
313
+ --redsift-typography-h2-font-size: 24px;
314
+ --redsift-typography-h2-font-weight: var(--redsift-typography-font-weight-semi-bold);
315
+ --redsift-typography-h2-line-height: 28px;
316
+ --redsift-typography-h3-font-family: var(--redsift-typography-font-family-raleway);
317
+ --redsift-typography-h3-font-size: 20px;
318
+ --redsift-typography-h3-font-weight: var(--redsift-typography-font-weight-medium);
319
+ --redsift-typography-h3-line-height: 24px;
320
+ --redsift-typography-h4-font-family: var(--redsift-typography-font-family-raleway);
321
+ --redsift-typography-h4-font-size: 18px;
322
+ --redsift-typography-h4-font-weight: var(--redsift-typography-font-weight-medium);
323
+ --redsift-typography-h4-line-height: 22px;
324
+ --redsift-typography-subtitle-font-family: var(--redsift-typography-font-family-raleway);
325
+ --redsift-typography-subtitle-font-size: 15px;
326
+ --redsift-typography-subtitle-font-weight: var(--redsift-typography-font-weight-bold);
327
+ --redsift-typography-subtitle-line-height: 26px;
328
+ --redsift-typography-body-font-family: var(--redsift-typography-font-family-raleway);
329
+ --redsift-typography-body-font-size: 15px;
330
+ --redsift-typography-body-font-weight: var(--redsift-typography-font-weight-regular);
331
+ --redsift-typography-body-line-height: 26px;
332
+ --redsift-typography-link-font-family: var(--redsift-typography-font-family-raleway);
333
+ --redsift-typography-link-font-size: 15px;
334
+ --redsift-typography-link-font-weight: var(--redsift-typography-font-weight-regular);
335
+ --redsift-typography-link-line-height: 26px;
336
+ --redsift-typography-input-text-font-family: var(--redsift-typography-font-family-source-code-pro);
337
+ --redsift-typography-input-text-font-size: 15px;
338
+ --redsift-typography-input-text-font-weight: var(--redsift-typography-font-weight-regular);
339
+ --redsift-typography-input-text-line-height: 26px;
340
+ --redsift-typography-button-large-font-family: var(--redsift-typography-font-family-raleway);
341
+ --redsift-typography-button-large-font-size: 15px;
342
+ --redsift-typography-button-large-font-weight: var(--redsift-typography-font-weight-medium);
343
+ --redsift-typography-button-large-line-height: 26px;
344
+ --redsift-typography-button-large-text-transform: uppercase;
345
+ --redsift-typography-button-medium-font-family: var(--redsift-typography-font-family-raleway);
346
+ --redsift-typography-button-medium-font-size: 15px;
347
+ --redsift-typography-button-medium-font-weight: var(--redsift-typography-font-weight-medium);
348
+ --redsift-typography-button-medium-line-height: 24px;
349
+ --redsift-typography-button-medium-text-transform: uppercase;
350
+ --redsift-typography-button-small-font-family: var(--redsift-typography-font-family-raleway);
351
+ --redsift-typography-button-small-font-size: 13px;
352
+ --redsift-typography-button-small-font-weight: var(--redsift-typography-font-weight-medium);
353
+ --redsift-typography-button-small-line-height: 22px;
354
+ --redsift-typography-button-small-text-transform: uppercase;
355
+ --redsift-typography-caption-font-family: var(--redsift-typography-font-family-raleway);
356
+ --redsift-typography-caption-font-size: 13px;
357
+ --redsift-typography-caption-font-weight: var(--redsift-typography-font-weight-regular);
358
+ --redsift-typography-caption-line-height: 23px;
359
+ --redsift-typography-badge-font-family: var(--redsift-typography-font-family-source-code-pro);
360
+ --redsift-typography-badge-font-size: 12px;
361
+ --redsift-typography-badge-font-weight: var(--redsift-typography-font-weight-medium);
362
+ --redsift-typography-badge-line-height: 20px;
363
+ --redsift-typography-chip-font-family: var(--redsift-typography-font-family-source-code-pro);
364
+ --redsift-typography-chip-font-size: 13px;
365
+ --redsift-typography-chip-font-weight: var(--redsift-typography-font-weight-regular);
366
+ --redsift-typography-chip-line-height: 18px;
367
+ }
4
368
  body {
5
369
  font-family: var(--redsift-typography-body-font-family);
6
370
  font-size: var(--redsift-typography-body-font-size);
package/style/redsift-design-tokens.css DELETED
@@ -1,143 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 01 Aug 2022 12:40:38 GMT
4
- */
5
-
6
- :root {
7
- --redsift-color-primary-main: #0075da;
8
- --redsift-color-primary-contrast: #ffffff;
9
- --redsift-color-primary-contained-hover: #0063b9;
10
- --redsift-color-primary-outlined-hover: rgba(0, 99, 185, 0.2);
11
- --redsift-color-primary-outlined-resting: #0063b9;
12
- --redsift-color-secondary-main: #f50057;
13
- --redsift-color-secondary-dark: #c51162;
14
- --redsift-color-secondary-light: #ff4081;
15
- --redsift-color-secondary-contrast: #ffffff;
16
- --redsift-color-secondary-contained-hover: #9e1f3f;
17
- --redsift-color-secondary-outlined-hover: rgba(245, 0, 87, 0.08);
18
- --redsift-color-secondary-outlined-resting: rgba(245, 0, 87, 0.5);
19
- --redsift-color-text-primary: #1c1c1c;
20
- --redsift-color-text-secondary: rgba(0, 0, 0, 0.6);
21
- --redsift-color-text-disabled: #a8a8a8;
22
- --redsift-color-link-primary: #02ac61;
23
- --redsift-color-link-underline: rgba(2, 172, 97, 0.4);
24
- --redsift-color-error-main: #e06354;
25
- --redsift-color-error-dark: #e31b0c;
26
- --redsift-color-error-light: #ffe3e0;
27
- --redsift-color-error-contrast: #ffffff;
28
- --redsift-color-error-contained-hover: #e31b0c;
29
- --redsift-color-error-outlined-hover: #e31b0c;
30
- --redsift-color-error-outlined-resting: #e31b0c;
31
- --redsift-color-error-content: #5a201a;
32
- --redsift-color-error-background: #fbedeb;
33
- --redsift-color-warning-main: #fcbb54;
34
- --redsift-color-warning-dark: #c77700;
35
- --redsift-color-warning-light: #fff6dd;
36
- --redsift-color-warning-contrast: #ffffff;
37
- --redsift-color-warning-contained-hover: #9b511d;
38
- --redsift-color-warning-outlined-hover: rgba(237, 108, 2, 0.08);
39
- --redsift-color-warning-outlined-resting: rgba(237, 108, 2, 0.5);
40
- --redsift-color-warning-content: #592e0d;
41
- --redsift-color-warning-background: #fcf0e7;
42
- --redsift-color-info-main: #2196f3;
43
- --redsift-color-info-dark: #0b79d0;
44
- --redsift-color-info-light: #64b6f7;
45
- --redsift-color-info-contrast: #ffffff;
46
- --redsift-color-info-contained-hover: #3267a5;
47
- --redsift-color-info-outlined-hover: rgba(33, 150, 243, 0.08);
48
- --redsift-color-info-outlined-resting: rgba(33, 150, 243, 0.5);
49
- --redsift-color-info-content: #1c3b5e;
50
- --redsift-color-info-background: #ebf5fd;
51
- --redsift-color-success-main: #4caf50;
52
- --redsift-color-success-dark: #3b873e;
53
- --redsift-color-success-light: #7bc67e;
54
- --redsift-color-success-contrast: #ffffff;
55
- --redsift-color-success-contained-hover: #487940;
56
- --redsift-color-success-outlined-hover: rgba(76, 175, 80, 0.08);
57
- --redsift-color-success-outlined-resting: rgba(76, 175, 80, 0.5);
58
- --redsift-color-success-content: #284524;
59
- --redsift-color-success-background: #eff7ee;
60
- --redsift-color-action-active: rgba(0, 0, 0, 0.54);
61
- --redsift-color-action-hover: rgba(0, 0, 0, 0.04);
62
- --redsift-color-action-selected: rgba(0, 0, 0, 0.08);
63
- --redsift-color-action-disabled: #a8a8a8;
64
- --redsift-color-action-disabled-background: #e4e4e4;
65
- --redsift-color-action-focus: #e4e4e4;
66
- --redsift-color-side-navigation-background: #2d2d34;
67
- --redsift-color-side-navigation-menu-item-text-resting: rgba(255, 255, 255, 0.7);
68
- --redsift-color-side-navigation-menu-item-text-disabled: #76767a;
69
- --redsift-color-side-navigation-menu-item-text-hover: #ffffff;
70
- --redsift-color-side-navigation-menu-item-background-hover: #4c4c64;
71
- --redsift-color-side-navigation-menu-item-background-secondary: #333340;
72
- --redsift-color-side-navigation-menu-item-background-active: #39394c;
73
- --redsift-color-side-navigation-menu-item-active: #02ac61;
74
- --redsift-color-side-navigation-scrollbar-resting: #4c4c64;
75
- --redsift-color-side-navigation-scrollbar-hover: #5d5d73;
76
- --redsift-typography-font-family-raleway: 'Raleway', sans-serif;
77
- --redsift-typography-font-family-electrolize: 'electrolize', sans-serif;
78
- --redsift-typography-font-family-source-code-pro: 'Source Code Pro', sans-serif;
79
- --redsift-typography-font-weight-regular: 400;
80
- --redsift-typography-font-weight-medium: 500;
81
- --redsift-typography-font-weight-semi-bold: 600;
82
- --redsift-typography-font-weight-bold: 700;
83
- --redsift-typography-h1-font-family: var(--redsift-typography-font-family-electrolize);
84
- --redsift-typography-h1-font-size: 24px;
85
- --redsift-typography-h1-font-weight: var(--redsift-typography-font-weight-regular);
86
- --redsift-typography-h1-line-height: 28px;
87
- --redsift-typography-h1-text-transform: uppercase;
88
- --redsift-typography-h2-font-family: var(--redsift-typography-font-family-raleway);
89
- --redsift-typography-h2-font-size: 24px;
90
- --redsift-typography-h2-font-weight: var(--redsift-typography-font-weight-semi-bold);
91
- --redsift-typography-h2-line-height: 28px;
92
- --redsift-typography-h3-font-family: var(--redsift-typography-font-family-raleway);
93
- --redsift-typography-h3-font-size: 20px;
94
- --redsift-typography-h3-font-weight: var(--redsift-typography-font-weight-medium);
95
- --redsift-typography-h3-line-height: 24px;
96
- --redsift-typography-h4-font-family: var(--redsift-typography-font-family-raleway);
97
- --redsift-typography-h4-font-size: 18px;
98
- --redsift-typography-h4-font-weight: var(--redsift-typography-font-weight-medium);
99
- --redsift-typography-h4-line-height: 22px;
100
- --redsift-typography-subtitle-font-family: var(--redsift-typography-font-family-raleway);
101
- --redsift-typography-subtitle-font-size: 15px;
102
- --redsift-typography-subtitle-font-weight: var(--redsift-typography-font-weight-bold);
103
- --redsift-typography-subtitle-line-height: 26px;
104
- --redsift-typography-body-font-family: var(--redsift-typography-font-family-raleway);
105
- --redsift-typography-body-font-size: 15px;
106
- --redsift-typography-body-font-weight: var(--redsift-typography-font-weight-regular);
107
- --redsift-typography-body-line-height: 26px;
108
- --redsift-typography-link-font-family: var(--redsift-typography-font-family-raleway);
109
- --redsift-typography-link-font-size: 15px;
110
- --redsift-typography-link-font-weight: var(--redsift-typography-font-weight-regular);
111
- --redsift-typography-link-line-height: 26px;
112
- --redsift-typography-input-text-font-family: var(--redsift-typography-font-family-source-code-pro);
113
- --redsift-typography-input-text-font-size: 15px;
114
- --redsift-typography-input-text-font-weight: var(--redsift-typography-font-weight-regular);
115
- --redsift-typography-input-text-line-height: 26px;
116
- --redsift-typography-button-large-font-family: var(--redsift-typography-font-family-raleway);
117
- --redsift-typography-button-large-font-size: 15px;
118
- --redsift-typography-button-large-font-weight: var(--redsift-typography-font-weight-medium);
119
- --redsift-typography-button-large-line-height: 26px;
120
- --redsift-typography-button-large-text-transform: uppercase;
121
- --redsift-typography-button-medium-font-family: var(--redsift-typography-font-family-raleway);
122
- --redsift-typography-button-medium-font-size: 15px;
123
- --redsift-typography-button-medium-font-weight: var(--redsift-typography-font-weight-medium);
124
- --redsift-typography-button-medium-line-height: 24px;
125
- --redsift-typography-button-medium-text-transform: uppercase;
126
- --redsift-typography-button-small-font-family: var(--redsift-typography-font-family-raleway);
127
- --redsift-typography-button-small-font-size: 13px;
128
- --redsift-typography-button-small-font-weight: var(--redsift-typography-font-weight-medium);
129
- --redsift-typography-button-small-line-height: 22px;
130
- --redsift-typography-button-small-text-transform: uppercase;
131
- --redsift-typography-caption-font-family: var(--redsift-typography-font-family-raleway);
132
- --redsift-typography-caption-font-size: 13px;
133
- --redsift-typography-caption-font-weight: var(--redsift-typography-font-weight-regular);
134
- --redsift-typography-caption-line-height: 23px;
135
- --redsift-typography-badge-font-family: var(--redsift-typography-font-family-source-code-pro);
136
- --redsift-typography-badge-font-size: 12px;
137
- --redsift-typography-badge-font-weight: var(--redsift-typography-font-weight-medium);
138
- --redsift-typography-badge-line-height: 20px;
139
- --redsift-typography-chip-font-family: var(--redsift-typography-font-family-source-code-pro);
140
- --redsift-typography-chip-font-size: 13px;
141
- --redsift-typography-chip-font-weight: var(--redsift-typography-font-weight-regular);
142
- --redsift-typography-chip-line-height: 18px;
143
- }
package/style/redsift-fonts.css DELETED
@@ -1,225 +0,0 @@
1
- /* latin */
2
- @font-face {
3
- font-family: 'Electrolize';
4
- font-style: normal;
5
- font-weight: 400;
6
- font-display: swap;
7
- src: url(https://fonts.gstatic.com/s/electrolize/v14/cIf5Ma1dtE0zSiGSiED7AXEBuI9PQrfA.woff2) format('woff2');
8
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
9
- }
10
- /* cyrillic-ext */
11
- @font-face {
12
- font-family: 'Raleway';
13
- font-style: normal;
14
- font-weight: 400;
15
- font-display: swap;
16
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
17
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
18
- }
19
- /* cyrillic */
20
- @font-face {
21
- font-family: 'Raleway';
22
- font-style: normal;
23
- font-weight: 400;
24
- font-display: swap;
25
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
26
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
27
- }
28
- /* vietnamese */
29
- @font-face {
30
- font-family: 'Raleway';
31
- font-style: normal;
32
- font-weight: 400;
33
- font-display: swap;
34
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
35
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
36
- }
37
- /* latin-ext */
38
- @font-face {
39
- font-family: 'Raleway';
40
- font-style: normal;
41
- font-weight: 400;
42
- font-display: swap;
43
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
44
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
45
- }
46
- /* latin */
47
- @font-face {
48
- font-family: 'Raleway';
49
- font-style: normal;
50
- font-weight: 400;
51
- font-display: swap;
52
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
53
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
54
- }
55
- /* cyrillic-ext */
56
- @font-face {
57
- font-family: 'Raleway';
58
- font-style: normal;
59
- font-weight: 700;
60
- font-display: swap;
61
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
62
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
63
- }
64
- /* cyrillic */
65
- @font-face {
66
- font-family: 'Raleway';
67
- font-style: normal;
68
- font-weight: 700;
69
- font-display: swap;
70
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
71
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
72
- }
73
- /* vietnamese */
74
- @font-face {
75
- font-family: 'Raleway';
76
- font-style: normal;
77
- font-weight: 700;
78
- font-display: swap;
79
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
80
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
81
- }
82
- /* latin-ext */
83
- @font-face {
84
- font-family: 'Raleway';
85
- font-style: normal;
86
- font-weight: 700;
87
- font-display: swap;
88
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
89
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
90
- }
91
- /* latin */
92
- @font-face {
93
- font-family: 'Raleway';
94
- font-style: normal;
95
- font-weight: 700;
96
- font-display: swap;
97
- src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
98
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
99
- }
100
- /* cyrillic-ext */
101
- @font-face {
102
- font-family: 'Source Code Pro';
103
- font-style: normal;
104
- font-weight: 400;
105
- font-display: swap;
106
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMOvWnsUnxlC9.woff2) format('woff2');
107
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
108
- }
109
- /* cyrillic */
110
- @font-face {
111
- font-family: 'Source Code Pro';
112
- font-style: normal;
113
- font-weight: 400;
114
- font-display: swap;
115
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlOevWnsUnxlC9.woff2) format('woff2');
116
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
117
- }
118
- /* greek-ext */
119
- @font-face {
120
- font-family: 'Source Code Pro';
121
- font-style: normal;
122
- font-weight: 400;
123
- font-display: swap;
124
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMevWnsUnxlC9.woff2) format('woff2');
125
- unicode-range: U+1F00-1FFF;
126
- }
127
- /* greek */
128
- @font-face {
129
- font-family: 'Source Code Pro';
130
- font-style: normal;
131
- font-weight: 400;
132
- font-display: swap;
133
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPuvWnsUnxlC9.woff2) format('woff2');
134
- unicode-range: U+0370-03FF;
135
- }
136
- /* vietnamese */
137
- @font-face {
138
- font-family: 'Source Code Pro';
139
- font-style: normal;
140
- font-weight: 400;
141
- font-display: swap;
142
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMuvWnsUnxlC9.woff2) format('woff2');
143
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
144
- }
145
- /* latin-ext */
146
- @font-face {
147
- font-family: 'Source Code Pro';
148
- font-style: normal;
149
- font-weight: 400;
150
- font-display: swap;
151
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWnsUnxlC9.woff2) format('woff2');
152
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
153
- }
154
- /* latin */
155
- @font-face {
156
- font-family: 'Source Code Pro';
157
- font-style: normal;
158
- font-weight: 400;
159
- font-display: swap;
160
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
161
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
162
- }
163
- /* cyrillic-ext */
164
- @font-face {
165
- font-family: 'Source Code Pro';
166
- font-style: normal;
167
- font-weight: 700;
168
- font-display: swap;
169
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMOvWnsUnxlC9.woff2) format('woff2');
170
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
171
- }
172
- /* cyrillic */
173
- @font-face {
174
- font-family: 'Source Code Pro';
175
- font-style: normal;
176
- font-weight: 700;
177
- font-display: swap;
178
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlOevWnsUnxlC9.woff2) format('woff2');
179
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
180
- }
181
- /* greek-ext */
182
- @font-face {
183
- font-family: 'Source Code Pro';
184
- font-style: normal;
185
- font-weight: 700;
186
- font-display: swap;
187
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMevWnsUnxlC9.woff2) format('woff2');
188
- unicode-range: U+1F00-1FFF;
189
- }
190
- /* greek */
191
- @font-face {
192
- font-family: 'Source Code Pro';
193
- font-style: normal;
194
- font-weight: 700;
195
- font-display: swap;
196
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPuvWnsUnxlC9.woff2) format('woff2');
197
- unicode-range: U+0370-03FF;
198
- }
199
- /* vietnamese */
200
- @font-face {
201
- font-family: 'Source Code Pro';
202
- font-style: normal;
203
- font-weight: 700;
204
- font-display: swap;
205
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMuvWnsUnxlC9.woff2) format('woff2');
206
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
207
- }
208
- /* latin-ext */
209
- @font-face {
210
- font-family: 'Source Code Pro';
211
- font-style: normal;
212
- font-weight: 700;
213
- font-display: swap;
214
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWnsUnxlC9.woff2) format('woff2');
215
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
216
- }
217
- /* latin */
218
- @font-face {
219
- font-family: 'Source Code Pro';
220
- font-style: normal;
221
- font-weight: 700;
222
- font-display: swap;
223
- src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
224
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
225
- }