testio-tailwind 3.17.1 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.17.1",
+	"version": "3.18.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/assets/stylesheets/app.css

@@ -1,7 +1,4 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
-
 @import "tailwindcss";
 @import './tailwind_config.css';
 @import './tailwind_theme_dark.css';
@@ -21,6 +18,7 @@
 @import './plugin_themes/pagy.css' layer(components);
 
 /*//// Components ////*/
+@import './components/fonts.css' layer(components);
 @import './components/actionbar.css' layer(components);
 @import './components/alerts.css' layer(components);
 @import './components/badges.css' layer(components);

package/src/assets/stylesheets/components/fonts.css

@@ -0,0 +1,120 @@
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 200;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-ExtraLight.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-ExtraLight.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 200;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-ExtraLightIt.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-ExtraLightIt.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-Light.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-Light.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 300;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-LightIt.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-LightIt.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-Regular.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-Regular.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 400;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-It.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-It.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-Semibold.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-Semibold.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 600;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-SemiboldIt.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-SemiboldIt.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-Bold.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-Bold.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 700;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-BoldIt.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-BoldIt.otf.woff') format('woff');
+}
+
+@font-face{
+    font-family: 'Source Sans 3';
+    font-weight: 900;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-Black.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-Black.otf.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Sans 3';
+    font-weight: 900;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceSans3-BlackIt.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceSans3-BlackIt.otf.woff') format('woff');
+}
+
+
+/*/// Source Code Pro ///*/
+
+@font-face {
+    font-family: 'Source Code Pro';
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/assets/fonts/SourceCodePro-Regular.otf.woff2') format('woff2'),
+         url('/assets/fonts/SourceCodePro-Regular.otf.woff') format('woff');
+}

package/src/pages/typography/fonts.haml

@@ -0,0 +1,14 @@
+---
+tags: typography
+title: Fonts
+---
+
+%p.mb-xs Here are the fonts used in the design system
+%p.font-extralight Source Sans 3 - Extra Light 200
+%p.font-light Source Sans 3 - Light 300
+%p Source Sans 3 - Regular 400
+%p.font-medium Source Sans 3 - Medium 500
+%p.font-semibold Source Sans 3 - Semibold 600
+%p.font-bold Source Sans 3 - Bold 700
+%p.font-black Source Sans 3 - Black 800
+%p.font-mono Source Code Pro - Regular 400